Criar e formatar formulários HTML

Criar e formatar formulários HTML. Tags form, input, select e textarea

Home Tecnologia

Formulários HTML são usados em larga escala na web. Contatos, cadastros, buscas, login e senha, caixas de seleção, etc. Com formulários temos opções de ligar nossa página com programas de envio de email ou sistemas que enviam os dados do formulário para um banco de dados, por exemplo.

Os formulários podem ser analisados de quatro formas:

  • estruturação (HTML)
  • formatação (CSS)
  • validação (Javascript)
  • tratamento dos dados (Alguma tecnologia servidor: ASP, ASP.NET, PHP, etc)

Veremos aqui as duas primeiras que consiste em criar e formatar formulários HTML.

Vamos a um exemplo:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Criar e formatar formulários HTML</title>
<link href="estilo_form.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <fieldset>
  <legend>Preencha os dados abaixo:</legend>
 
 <div class="linha">
  <label>Nome: <br />
  <input name="nome" type="text" id="nome" size="40" />
  </label>
 </div>
 
 <div class="linha2">
  <label>
  Email: <br />
  <input name="email" type="text" id="email" size="40" />
  </label>
 </div>
 <div class="linha">
  <label>Sexo:
  <input name="masc" type="radio" value="masculino" />Masculino</label>
  <label><input name="fem" type="radio" value="feminino" />Feminino</label>
 </div>
 <div class="linha2">
  <label>Estado:
  <select name="estado" id="estado">
  <option>SP</option>
  <option>MG</option>
  <option>RJ</option>
  <option>ES</option>
  </select>
   </label>
 </div>
  
 <div class="linha">
  <label>Comentários: <br />
  <textarea name="comentarios" cols="30" rows="4" id="comentarios"></textarea>
  </label>
 </div>
   
 <div class="linha">
  <label><input name="newsletter" type="checkbox" id="newsletter" value="sim" />
  Quero receber a newsletter deste site
  </label>
 </div>
  
 <div class="linha2">
  <label><input name="Enviar" type="submit" id="Enviar" value="Enviar" />
  </label>
 </div>
 
  </fieldset>
</form>
</body>
</html>

Analisando o código do formulário.

<form> – Tag principal do formulário, ela determina diversos comportamentos. Veja a seguir:

  • id – nome do formulário. É usado para validação em Javascript ou no CSS
  • method – este atributo informa como os dados serão enviados. Há dois valores possíveis: POST (os dados são postados internamente) e GET (os dados são enviados pela URL).
  • action – É o atributo que define para onde os dados serão enviados quando o formulário for submetido.

<input> – esta tag criar um campo de texto. há algumas variações:

  • text – campo de texto simples
  • password – campo de texto para digitação de senha. Os valores são mostrados com ****
  • radio – criar botões de seleção de escolha única.
  • checkbox – cria botões de seleção de múltipla escolha
  • submit – criar botões que irão postar os dados do form quando clicado
  • reset – cria botões que vão apagar os dados do form quando clicado
  • button – cria botões sem ação nenhuma, usado para eventos de javascript.

<select> – Este atributo gera caixas de seleção no estilo drop-down, muito usado para campo que tem uma lista muito grande de itens para a escolha (estado no nosso caso).

<textarea> – Este atributo é usado para criar uma caixa de texto de múltiplas linhas, bastante usado para campos com textos extensos.

Para um melhor posicionamento dos objetos do formulário veja também o post Tabela para dados tabulares e Layout sem tabelas e layout centralizado na página.

Formatação do formulário

Os formulários vem com a formatação padrão do HTML, para mudar a formatação  precisamos recorrer ao CSS, para isto crie um arquivo com o nome estilo_form.css e salve na mesma pasta que o exemplo acima. Abaixo o código do arquivo estilo_form.css

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
}
#form1 legend {
 color: #333366;
 font-weight: bold;
}
#form1 fieldset {
 padding: 20px 10px 20px 10px;
 width: 300px;
}
#form1 label {
 color: #FF9900;
}
.linha {
 padding-top: 10px;
 padding-left: 10px;
}
.linha2 {
 padding-top: 10px;
 padding-left: 10px;
}
input,select,textarea{
 background-color: #f4f4f4;
}

Analisando o código acima:

#form1 legend – irá formatar a tag <legend> que está dentro do formulário form1.

#form1 fieldset – irá formatar a tag <fieldset> que está dentro do formulário form1.

#form1 label – irá formatar a tag <label> que está dentro do formulário form1.

.linha – formata a classe .linha

.linha2 – formata a classe .linha2

input,select,textarea – formata as tags <input …>, <select> e <textarea>
 

Gostou? Compartilhe



 

Leia também:



© 2008-2018 | Professor Digital | Política de Privacidade | Em Jesus Cristo eu confio