Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos
a sua colabora��o.
Os doadores receber�o material que n�o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais,
Dicas, etc.
Tutoriais HTML - 6
Tutorial para Criar Formul�rios
Neste tutorial veremos como criar alguns formul�rios em Html.
Temos que criar o formul�rio de login e registro no documento Html muitas vezes para mostrar os formul�rios em uma p�gina
da web. Portanto, esta p�gina descrever� como criar ambos os formul�rios nos documentos Html usando v�rias tags.
Exemplo 1: Formul�rio de login
Se quisermos criar um formul�rio de login no documento Html para mostrar o formul�rio na p�gina da web, devemos seguir as
etapas ou usar as tags a seguir. Usando essas tags ou etapas, podemos criar facilmente um formul�rio.
Passo 1: Primeiramente, devemos digitar o c�digo Html em qualquer editor de texto ou abrir o arquivo Html existente no
editor de texto no qual queremos criar o formul�rio de login.
Passo 2: Agora, temos que colocar o cursor naquele ponto onde queremos criar um formul�rio entre o in�cio e o fechamento
da tag <body> no documento HTML. E, ent�o, temos que digitar a tag cujo nome � <form>. � a primeira marca que � usada para
criar um formul�rio Html.
Passo 3: Agora, temos que usar a tag <label>:
, que define o nome dos elementos. Ent�o, temos que digitar a segunda tag para exibir o ID do usu�rio. Depois de digitar o nome,
devemos fechar a tag </label>.
<label>ID do usu�rio:</label>
Passo 4: Agora, temos que usar a tag <input>, que permite ao usu�rio inserir os caracteres na caixa. Ent�o, temos
que digitar esta tag com seu atributo para inserir o User-id. N�o h� necessidade de fechar a tag de entrada porque a � tag desemparelhada.
<input type="text">
Passo 5: Novamente, temos que digitar a tag <label> para exibir o r�tulo como senha. E, ent�o temos que digitar a
senha usando a tag <input> que � mostrada no seguinte bloco:
<label>Senha:</label>
<input type="password">
Passo 6: E depois disso, temos que dar o valor submit no atributo type para enviar o formul�rio.
<input type="submit" valor="Enviar">
Passo 7: E, por �ltimo, temos que salvar o arquivo Html e depois executar o arquivo e ent�o veremos o formul�rio de login
na p�gina da web no navegador.
Veja na imagem abaixo o resultado desse c�digo depois de executado:
Exemplo 2: Formul�rio de Registro
Se quisermos criar um formul�rio de registro no documento Html, devemos seguir os passos ou usar as tags a seguir. Usando
essas tags ou etapas, podemos criar facilmente um formul�rio.
Passo 1: Primeiramente, devemos digitar o c�digo Html em qualquer editor de texto ou abrir o arquivo Html existente no
editor de texto no qual queremos criar o formul�rio de registro.
Passo 2: Agora, devemos colocar o cursor naquele ponto onde queremos criar um formul�rio entre o in�cio e o fechamento
da tag <body> no documento html. E, ent�o, temos que digitar a tag cujo nome � <form>. � a primeira tag usada para criar um
formul�rio html.
Passo 3: Label: Agora, temos que definir o r�tulo, que � usado para denotar o nome para o qual o elemento foi criado.
<label>ID do usu�rio:</label>
Passo 4: Campo de texto e senha: tamb�m podemos criar facilmente os campos de texto e senha usando a tag de entrada com
o valor diferente do atributo type.
Passo 5: Radio Button: Tamb�m podemos criar o bot�o de op��o para selecionar uma op��o da lista fornecida. Para criar o
bot�o de r�dio, temos que fornecer o valor "radio" no atributo type da tag de entrada.
Passo 6: Checkbox (Caixa de sele��o): Tamb�m podemos criar as caixas de sele��o para selecionar uma ou mais op��es da
lista fornecida. Para criar o checkbox no formul�rio, temos que dar o valor "checkbox" no atributo type.
Passo 7: Drop-down Menu (Menu suspenso): Se queremos criar o menu suspenso para selecionar uma op��o. Ent�o, para cri�-lo,
temos que digitar o elemento option dentro do elemento select.
Passo 8: Text area (�rea de texto): Se quisermos inserir uma ou mais linhas de texto na caixa, devemos usar a
tag <textarea> na tag <form>.
Passo 9: Caixa de sele��o de arquivo: Se quisermos anexar um arquivo local com os dados do formul�rio, devemos fornecer
o valor do arquivo no atributo "type" da tag <input>.
Passo 10: Bot�o enviar: Este bot�o � usado no final do formul�rio antes do fechamento da tag <form>. Ele � usado para
enviar o formul�rio no banco de dados.
Passo 11: Reset button (Bot�o Redefinir): Este bot�o � usado para redefinir todos os controles de formul�rio para seus
valores padr�o. Para criar o bot�o reset, temos que dar o valor reset no atributo type da tag <input>.
Passo 12: E, depois de todas as tags temos que fechar a tag </form> e ent�o temos que salvar o arquivo Html e depois
rodar o arquivo no Browser.
Veja na imagem abaixo o resultado desse c�digo depois de executado:
