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:
