Hoje o tutorial apresenta um formulário pronto. O formulário abaixo que será construido.
Crie um arquivo: contato.html
<!DOCTYPE html!>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link href="estilo.css" rel="stylesheet" type="text/css" media="all">
<title>Formulário</title>
</head>
<body>
<div id="container">
<div id="corpo">
<section>
<article class="artigo">
<form method="POST" action="processacont.php">
<input type="hidden" name="operacao" value="incluir">
<table border="0">
<tr>
<td width="960" height="20"></br>
<font color="#154ecd" size="5"> Fale Conosco</font>
</td>
</tr>
</table></br>
<hr style='width: 100%; height:5px; text-align:center; border:0px; color:#154ecd; background:#154ecd;' /></br>
<table border="0">
<tr>
<td width="330" height="20">
<font color="#154ecd" size="4"> Nome: </font>
<font color="red" size="4">*</font>
</td>
<td width="320" height="20">
<font color="#154ecd" size="4">E-mail: </font>
<font color="red" size="4">*</font>
</td>
<td width="310" height="20">
<font color="#154ecd" size="4">Telefone: </font>
<font color="red" size="4">*</font>
</td>
</tr>
<tr>
<td width="330" height="20">
<input type="text" name="nome" size="35" class="txtarea">
</td>
<td width="320" height="20">
<input type="text" name="email" size="35" class="txtarea">
</td>
<td width="310" height="20">
<input type="number" name="telefone" size="35" class="txtarea">
</td>
</tr>
</table>
<table border="0"></br>
<tr>
<td width="330" height="20">
<font color="#154ecd" size="4"> Informe seus interesses: </font>
<font color="red" size="4">*</font>
</td>
</tr>
</table></br></br>
<table border="0">
<tr>
<td height="20">
<input type="checkbox" name="interesse[]" value="aniversario">
</td>
<td height="20">
<input type="checkbox" name="interesse[]" value="casamento">
</td>
</tr>
<tr>
<td height="20">
<font color="#154ecd" size="4">Festa de Aniversário</font>
</td>
<td height="20">
<font color="#154ecd" size="4">Festa de Casamento</font>
</td>
</tr>
</table>
<table border="0"></br>
<tr>
<td width="960" height="20">
<font color="#154ecd" size="4"> Descreva sua solicitação: </font>
</td>
</tr>
</table>
<table border="0">
<tr>
<td width="6" height="20">
<td>
<td width="330" height="20">
<label>
<textarea name="solicitacao" id="textarea" cols="114" rows="5"></textarea>
</label>
</td>
</tr>
</table></br></br>
<table border="0">
<tr>
<td width="420" height="50"> ( * ) Campos obrigatórios </td>
</tr>
<tr>
<td>
<input type="reset" value="Cancelar" />
<input type="submit" name="enviar" value="Enviar">
</td>
</tr>
</table>
</form>
</article>
</section>
</div>
<!--Copyright © Membo. Todos os direitos reservados.-->
</div>
</body>
</html>
Agora crie um arquivo para estilo: estilo.css
/*html5 semantics tags
article, aside, figure, footer, header, hgroup, menu, nav, section
{ display: block; }*/
/* light css reset */
* { margin : 0; padding : 0; }
/*h2, h3, h4, h5, p, ul, ol { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}
/* =page level container */
#container {/*Container que contem o site */
margin: 0px auto 0px auto;
width: 960px;
background:#CAE1FF;
}
#corpo { /*Div Corpo do site possui a section*/
margin: 1px;
padding-top: 0px;
padding-bottom: 20px;
height: 600px;
}
section { /*Div Corpo do site possui o cabecalho do artigo, o corpo do artigo e o cabecalho*/
margin:0px auto 0px auto;
width:958px;
height:600px;
float:left;
background:#CAE1FF;
margin-left:0px;
}
.artigo {
margin:0px auto 0px auto;
width:958px;
height:350px;
float:left;
background:#CAE1FF;
margin:0px;
}
.txtarea {/*Define a altura do input*/
/*background-color:#B0E0E6;*/
height: 40px;
font: 18px georgia, sans-serif;
color:#154ecd;
}
Espero que gostem do formulário.
Até um próximo tutorial.
Veja
Mais:
- Atributo required no HTML5
- Formulário de contato pronto com
HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando
Pattern
- Colocar vídeo na página com
HTML5
- Colocar áudio na página com
HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em
HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5
- Elemento canvas em HTML5
05:13
