Criação de Formulários em HTML 5

Olá, pessoal!!

Na última aula começamos a estudar as tags HTML 5 para a criação de formulários. Recapitulando, abaixo se encontram as tags estudadas:

TAG <form>:

Delimita a área de um formulário. Todos os campos de um formulário devem ficar dentro das tags <form> e </form>.

Atributos da tag <form>:

action – define para onde serão enviadas as informações preenchidas no formulário;
method – define o método de envio das informações contidas no formulário. Este método aceita dois valores: GET e POST. No método GET as informações podem ser vistas na URL de envio. No método POST as informações não ficam visíveis na URL, sendo, portanto, um método mais seguro

Exemplos:

<form action="envia.php" method="get">
 
</form>

<form action="resultados.php" method="post">
 
</form>

TAG <input>:

A tag <input> é utilizada para a criação de diversos campos em um formulário. Através do atributo type , definimos o tipo de controle que a tag representará, podendo ser caixas de texto, botões de seleção e de rário, campos para senha, e-mail, etc. A tag input aceita vários atributos que complementam suas funcionalidades. Os principais atributos que utilizaremos são:

id – identifica o campo com um nome qualquer, criado a critério do desenvolvedor. O id deve ser único e nenhum outro elemento na página pode ter o mesmo id.
name – define o nome do campo. Através do name será possível requisitar as informações preenchidas no formulário através de Javascript ou linguagens de servidor.
type – como mencionado acima, define o tipo de controle que será criado.
style – utilizado para aplicar códigos CSS ao elemento.
placeholder – insere um texto dentro do elemento, que servirá de dica na hora do preenchimento.
class – cria um nome de classe para o elemento, que poderá ser utilizado para referenciá-lo numa página CSS.

Existem muitos outros atributos, que o veremos no decorrer das aulas.

Abaixo vamos ver alguns campos que podemos criar utilizando a tag input.

Campos de Texto

<input type=”text”>

Veja abaixo alguns exemplos de campos de formulários que podemos criar utilizando esta tag:

Campos de texto – para a criação de um campo de texto, utilizamos o atributo text, como mostrado abaixo. Um campo de texto também aceita números, espaços e caracteres especiais.

<input type="text" class="full" id="nome" name="nome" placeholder="Seu nome aqui ...">

campo-de-texto-html

No exemplo acima, adicionamos os atributos type, class, id, name e placeholder.

Campos de Email

<input type=”email”>

O tipo email, como o próprio nome diz, cria um campo próprio onde o usuário deverá digitar um e-mail válido.

<input type="email" class="full" id="email" name="email">

campo-email-html5

Campos de Senha

<input type=”password”>

O tipo password é utilizado para a criação de campos de senha. Quando o usuário digita, os caracteres são substituídos por bolinhas, que ocultam a string digitada.

<input type="password" class="full" id="senha1" name="senha1" required maxlength="10"&gt;

Através do atributo required, tornamos o campo de preenchimento obrigatório e com o atributo maxlength, definimos que o campo aceitará, no máximo, 10 caracteres.

campos-de-senha-password-html5

Caixas de Texto

<textarea> … </textarea>

Com a tag <textarea>, inserimos uma caixa de texto no nosso formulário. Nela o usuário poderá digitar um texto qualquer, aceitando letras, números e caracteres especiais.

<textarea class="full altura" id="mensagem" name="mensagem">Digite sua mensagem ...
 </textarea>

caixa-de-texto-html5

Botões de Envio e Reset

<input type="submit" value="Cadastrar">
<input type="reset" value="Limpar">

Com o atributo submit, criamos um botão de envio do formulário. Dentro do atributo value, informamos o texto que será exibido ao usuário dentro do botão.
Com o atributo reset, criamos um botão que terá a função de limpar todas as informações digitadas no formulário.

input-submit-html5

Código Competo

O código completo do formulário desenvolvido em sala de aula encontra-se abaixo. Qualquer dúvida adicional, debateremos na próxima aula. Bons estudos!!

<!DOCTYPE html>
<html>
<head>
 <title>Formulários em HTML5</title>
 <meta charset="UTF-8">
 <style type="text/css">
 body{
 background: #23745c
 }
 main{
 background: #fff;
 width: 70%;
 margin: 0 auto;
 padding: 20px;
 display: block
 }
 label{
 display: block;
 margin-top: 15px
 }
 .full{
 width: 100%
 }
 .altura{
 height: 300px
 }
 </style>
</head>
<body>
 <main>
 <form method="get" action="envia.php">
 <label for="nome">Nome Completo:</label>
 <input class="full" type="text" id="nome" name="nome" placeholder="Seu nome ..." required>
 <br>
 <label for="cpf">CPF:</label>
 <input class="full" type="text" id="cpf" name="cpf" required>
 <br>
 <label for="email">E-mail:</label>
 <input class="full" type="email" id="email" name="email" required>
 <br>
 <label for="senha1">Crie uma senha:</label>
 <input type="password" class="full" id="senha1" name="senha1" required maxlength="10">
 <br>
 <label for="senha2">Repita a senha:</label>
 <input class="full" type="password" id="senha2" name="senha2" required maxlength="10">
 <br>
 <label for="mensagem">Digite sua mensagem:</label>
 <textarea class="full altura" id="mensagem" name="mensagem" autofocus>Digite sua mensagem ...
 </textarea>
 <br><br>
 <input type="submit" value="Cadastrar">
 <input type="reset" value="Limpar">
 </form>
 </main>
</body>
</html>