Formulários HTML

Os formulários HTML são usados para coletar diferentes tipos de entrada do usuário, todos os navegadores suportam o rótulo <form>. Definição e uso: O rótulo <form> é usado para criar formulários de entrada HTML. Os formulários podem conter elementos de entrada como campos de texto, caixas de seleção, caixas de rádio, botões de envio e outros.

Exemplo online

Criar campo de entrada de texto
Este exemplo demonstra como criar um campo de texto em uma página HTML. O usuário pode escrever texto no campo de texto.

Criar campo de entrada de senha
Este exemplo demonstra como criar um campo de senha em HTML.

Formulários HTML

Um formulário é uma área que contém elementos de formulário.

Os elementos de formulário permitem que o usuário insira conteúdo no formulário, como: campos de texto (textarea), listas deslizantes, caixas de seleção (radio)-botões), caixas de seleção (checkboxes) e outros.

Os formulários são configurados usando o rótulo de formulário <form>:

<form>
.
Elemento input
.
</form>

Formulários HTML - Elementos de entrada

O rótulo mais usado em formulários é o rótulo de entrada (<input>).

O tipo de entrada é definido pelo atributo de tipo (type). Os tipos de entrada mais comuns são os seguintes:

Campos de texto (Text Fields)

Os campos de texto são definidos pelo elemento <input type="text">. Eles são usados quando o usuário precisa digitar letras, números e outros conteúdos em um formulário.

<form action="/run/demo-form.php"> 　　
Primeiro nome:<input type="text" name="firstname" size="20"/><br/>Nome:<input type="text" name="lastname" size="20"/><br/><input type="submit" value="Submit"/> </form>

O navegador exibe assim:

Atenção:O formulário em si não é visível. Além disso, na maioria dos navegadores, a largura padrão da caixa de texto é 20 caracteres.

Campo de senha

O campo de senha é definido pela etiqueta <input type="password">:

<form action="/run/demo-form.php"> 　　
Senha:<input type="password" name="pwd"/><input type="submit" value="Submit"/> </form>

O efeito de exibição do navegador é o seguinte:

Atenção:Os caracteres do campo de senha não são exibidos em texto puro, mas são substituídos por asteriscos ou pontos.

Botões de rádio (Radio Buttons)

A etiqueta <input type="radio"> define a opção de caixa de seleção do formulário.

<form action="/run/demo-form.php"> 　　
<input type="radio" name="sex" value="male"/>Masculino<br/><input type="radio" name="sex" value="female"/>Feminino<input type="submit" value="Submit"/> </form>

O efeito de exibição do navegador é o seguinte:

Caixas de seleção (Checkboxes)

<input type="checkbox"> Define a caixa de seleção. O usuário precisa escolher uma ou várias opções entre várias opções fornecidas.

<form action="/run/demo-form.php"> 　　
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike<br/><input type="checkbox" name="vehicle" value="Car"/>I have a car<input type="submit" value="Submit"/> </form>

O efeito de exibição do navegador é o seguinte:

Botão de envio (Submit Button)

<input type="submit"> Define o botão de envio.

Quando o usuário clicar no botão de confirmação, o conteúdo do formulário será transmitido para outro arquivo. O atributo de ação do formulário define o nome do arquivo de destino. O arquivo definido pelo atributo de ação geralmente trata os dados de entrada recebidos de maneira relevante.:

<form name="input" action="/run/demo-form.php" method="get">
Nome de usuário: <input type="text" name="user">
<input type="submit" value="Enviar">
</form>

O efeito de exibição do navegador é o seguinte:

Se você digitar algumas letras no campo de texto acima e clicar no botão de confirmação, os dados de entrada serão enviados para a página "html_form_action.php". Esta página exibirá os resultados da entrada.

Mais exemplos online

Botão de opção única (Radio buttons)
Este exemplo demonstra como criar um botão de opção única em uma página HTML.

Caixa de opção múltipla (Checkboxes)
Este exemplo demonstra como criar um campo de opção múltipla em uma página HTML. O usuário pode marcar ou desmarcar a opção múltipla.

Lista suspensa simples
Este exemplo demonstra como criar uma caixa de lista suspensa simples em uma página HTML. A caixa de lista suspensa é uma lista opcional.

Lista suspensa pré-selecionada
Este exemplo demonstra como criar uma lista suspensa pré-selecionada simples.

Campo de texto (Textarea)
Este exemplo demonstra como criar um campo de texto (um controle de entrada de texto multilinha). O usuário pode escrever texto no campo de texto. O número de caracteres que podem ser escritos não é limitado.

Criar botão
Este exemplo demonstra como criar um botão. Você pode personalizar o texto do botão.

Exemplo de formulário

Formulário com borda
Este exemplo demonstra como desenhar uma caixa com título ao redor dos dados.

Formulário com campo de entrada e botão de confirmação
Este exemplo demonstra como adicionar um formulário à página. Este formulário contém dois campos de entrada e um botão de confirmação.

Formulário com campo de opção múltipla
Este formulário contém dois campos de opção múltipla e um botão de confirmação.

Formulário com botão de opção única
Este formulário contém dois campos de opção única e um botão de confirmação.

Enviar e-mail a partir do formulário
Este exemplo demonstra como enviar e-mails a partir de um formulário.

Etiquetas de formulário HTML

New: HTML5Nova etiqueta