Nesta matéria derá ensinado como trabalhar com formulários e também com os novos do HTML5, porém ainda não recomendo usar este formulários específicos para HTML5 em lugares que ficarão abertos ao publico em geral, apenas para painel de Administração, já que é feito um treinamento de como usar o mesmo.
Abaixo segue o Código do nosso Formulário completo e em seguida a explicação de cada um deles.
Código 01:
<!doctype html>
<html lang="pt-br">
<head>
<title>Formulários</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="#" name="">
<input type="text" name="txtNome" placeholder="Seu nome aqui." required /> Nome:<br /> <!--Suportado por todos navegadores -->
<input type="email" name="txtEmail" placeholder="Seu e-mail aqui." required /> E-mail:<br />
<input type="tel" name="txtTelefone" required /> Telefone:<br />
<input type="date" name="txtData" /> Data Nascimento:<br />
<input type="color" name="txtCor" />Cor Favorita:<br />
<input type="number" name="txtCor" />Idade:<br />
<br />
<textarea name="txtAdicionais" rows="10" cols="40"></textarea><!--Suportado por todos navegadores -->
<br />
<select name="txtProfissao">
<option selected value="Programador">Programador</option>
<option value="Analista">Analista</option>
<option value="Designer">Designer</option>
</select>
<br />
<input type="radio" name="sexo" value="M" />Masculino <input type="radio" name="sexo" value="F" />Feminino.
<br />
<input type="checkbox" name="fimes" value="Terror" /> Terror
<input type="checkbox" name="acao" value="Terror" /> Ação
<input type="checkbox" name="comedia" value="Terror" /> comedia
<br />
<input type="submit" name="btnSubmit" value="Cadastrar" /><!--Suportado por todos navegadores -->
<input type="reset" name="btnReset" value="Limpar" /> <!--Suportado por todos navegadores -->
<br /> <br />
<input type="search" name="txtBusca"> Encontre:<br />
</form>
</body>
</html>
<form method=”post” action=”” name=””></form> - Criamos uma Tag do tipo formulário, dentro dela que nossos campos devem ficar para que sejam interpretados como um formulário. method=”” definimos se o formulário vai enviar ou receber, para enviar usamos o post e para receber usamos o get. name=”” Atribuímos um nome para nosso formulário, pois se necessitarmos fazer alguma validação será necessário. action=”” informa para onde estes dados serão enviados, geralmente uma página programada para receber e tratar estes dados.
<input type="text" name="txtNome" placeholder="Seu nome aqui." Required /> - input significa entrada, type é o tipo do campo, neste caso usei o tipo text, este tipo texto é o que recomendo que se use ao invés dos novos tipos do HTML 5. name=”” é o nome do nosso campo, através do name=”” que vamos pegar o valor dele.
Placeholder=”” - Insere um texto predefinido em background, quando o usuário clicar ou digitar algo este texto é ocultado, este atributo só esta presente no HTML . Required informa ao formulário que ele só poderá ser enviado se este campo estiver preenchido, ele funciona como uma validação, porém recomendo que este tipo de validação seja feita com JS e na linguagem de programação.
<input type="email" name="txtEmail" placeholder="Seu e-mail aqui." required /> - Segue o mesmo padrão do text, porém o email exige a entrada de um E-mail para enviar o formulário.
<input type="tel" name="txtTelefone" required /> - Segue o mesmo padrão do text porém o tel e cria um campo do tipo telefone e exige a entrada de um telefone válido, ainda é possível criar uma mascará para ele.
<input type="date" name="txtData" /> - Segue o mesmo padrão dos demais acima, porém o tipo date cria um campo especifico para datas.
<input type="color" name="txtCor" /> - Segue o mesmo padrão dos demais acima, porém o tipo color cria um campo para selecionar uma cor.
<input type="number" name="txtCor" /> - Segue o mesmo padrão dos outros acima, porém o tipo number cria um campo para entrada de números.
<textarea name="txtAdicionais" rows="10" cols="40"></textarea> - Este campo é usado quando se deseja uma entrada de dados com espaço maior, como por exemplo um campo de observações onde o usuário deve digitar o que ele achou do seu ultimo final de semana, rows=”” define a quantidade mínima de linhas e cols=”” define a quantidade máxima de caracteres permitido para cada linha.
<select name="txtProfissao">
<option selected value="Programador">Programador</option>
<option value="Analista">Analista</option>
<option value="Designer">Designer</option>
</select> - Select cria um campo onde o usuário deve selecionar um uma lista algum valor, o name deve ficar junto a Tag e dentro dela criamos as opções para o usuário. Para cada opção devemos criar uma option, dentro de value informamos o valor que aquela opção tem. Dentro da Tag option colocamos o texto que será visível para o usuário. Caso queria iniciar a lista com um valor já selecionado basta acrescentar o atributo selected,=”selected”.
<input type="radio" name="sexo" value="M" /> - O tipo rádio cria um campo onde só pode ser selecionado um radio, pois geralmente quando ele é usado contém vários campos e só permite que um seja selecionado, o nome para todos devem ser o mesmo pois o que você deve mudar é o valor doa tributo value=””.
<input type="checkbox" name="fimes" value="Terror" /> - O campo checkbox permite que você selecione mais de uma opção, se necessário todas. O nome deve ser o mesmo para todos o que deve mudar é valor do atributo value=””.
<input type="submit" name="btnSubmit" value="Cadastrar" /> - Este campo é o responsável por enviar nosso formulário, o tipo submit cria um botão que quando clicado envia o formulário, tome cuidado com as Tags informada dentro do form pois se algo estiver errado seu formulário não será enviado com sucesso.
<input type="reset" name="btnReset" value="Limpar" /> - O tipo reset limpa todos os campos do nosso formulário, ele faz com que todos os valores voltem ao original. Atualmente este botão não esta mais em uso.
