Criar e formatar formulários HTML e CSS. Roteiro de estudo em HTML

Veja como estudar HTML com esse roteiro de estudo incluindo os conhecimentos conceituais, da linguagem e os conhecimentos práticos para a criação de sites.. Criar e formatar formulários HTML e CSS. Tags form, input, select e textarea

Índice deste artigo

Roteiro de estudo: Conhecimentos conceituais
Roteiro de estudo: Conhecimentos da linguagem HTML
Roteiro de estudo: Conhecimentos práticos de HTML
Criar formulários em HTML e formatar em CSS

Creio que uma das dificuldades de quem está estudando HTML é saber o que estudar. Afinal, são tantos termos que as vezes acaba confundindo que está iniciando seus estudos nessas tecnologias. Minha intenção neste post é criar um roteiro de estudos para HTML.

Para facilitar o entendimento, separei os os roteiros de conhecimentos que em três grupos: conceituais, da própria linguagem e os aspectos práticos. No final um exemplo de como criar e formatar formulários usando HTML e CSS

Roteiro de estudo: Conhecimentos conceituais

Conhecer a estrutura básica de um documento HTML;
Reconhecer a diferença em HTML e XHTML;
Conhecer as versões do HTML e XHML e estabelecer as diferenças entre elas;
Conhecer as diversas extensões do HTML (.htm, .html, .html, etc);
Entender o que é doctype, os diversos tipos de doctype e as diferenças entre eles;
Conhecer a semântica das tags;
Conhecer como uma página HTML é lida e indexada pelos sites de busca;
Diferenças entre navegadores;
Relação com o CSS. Como usar o CSS para formatar documentos HTML;
Relação com Javascript;
Relação com outras linguagens de programação, como ASP, PHP, CGI, etc;
Padrões web. Entender como isto pode facilitar a navegação no site;
Conhecer os diversos conjuntos de caracteres: utf-8, iso-8859-1, etc;
Regras para validação do código HTML.

Roteiro de estudo: Conhecimentos da linguagem HTML

Conhecer a relação das tags;
Conhecer os atributos de cada tag;
Conhecer as entidades HTML, como:   ©, etc.

Roteiro de estudo: Conhecimentos práticos de HTML

Estruturar textos como parágrafos, títulos e textos inline;
Criar formulários;
Criar tabelas simples e tabelas com cabeçalho;
Criar links internos, externos, verticais e de email;
Inserir imagens;
Trabalhar com frames e iframes;
Criar listas ordenadas, não ordenadas e de definição;
Criar meta tags;
Linkar arquivos externos como arquivos e javascript e CSS;
Incorporar recursos externos, como vídeos do Youtube, mapas do Google Maps, entre outros;
Inserir arquivos em Flash ou outros plugins;
Criar um layout baseado no conceito de Tableless;
Conhecer ferramentas e editores de HTML.

Você deve estar se perguntando: onde encontrar informações sobre tudo isto? Bem, embora existam muitos sites sobre o assunto, creio que o www.w3schools.com seja o mais indicado para você criar seu roteiro de estudo. Boa sorte e bons estudos.

Criar formulários em HTML e formatar em CSS

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:

<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>

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>