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
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.
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:
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:
<input> - esta tag criar um campo de texto. há algumas variações:
<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.
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>
COMPARTILHE: Facebook Twitter WhatsApp