Formulários e entrada de dados em HTML

Formulários HTML são usados para passar dados para um servidor.  Um formulário HTML pode conter elementos como campos de texto, caixas de verificação, botões de submissão, dentre outros. Um formulário pode conter também listas de seleção, áreas de texto, fieldset, legendas e rótulos.

A tag <form> é usada para criar um formulário HTML:

<form>

.

input elements

.

</form>

Formulários HTML – O elemento Input

O elemento mais importante de um formulário é o elemento <input>. O elemento <input> é usado para obter informações do usuário.

Um elemento <input> pode variar de muitas formas, dependendo do atributo  type. Um elemento <input> pode ser tanto um campo de texto, quando uma caixa de verificação, quanto um campo de senha, dentre outros.

Os tipos de input mais comuns são descritos a seguir:

Campos de texto

<input type=”text”> define um campo de texto de uma linha onde o usuário pode digitar um texto:

<form>

First name:
<input type="text" name="firstname"><br>

Last name:
<input type="text" name="lastname">

</form>

O código acima irá ser exibido no navegador da seguinte forma:

First name: Last name:

Nota: O formulário propriamente dito não é visível. Note também que o comprimento padrão de um campo de texto é de 20 caracteres.

Campo de senha

<input type=”password”> define uma campo de senha:

<form>

Password:
<input type="password" name="pwd">

</form>

O código  HTML acima irá ser exibido no navegador da seguinte forma:

Password:

Nota: Os caracteres digitados em um campo se senha são mascarados (mostrados como asteriscos ou círculos).

Botões de Radio

<input type=”radio”> define um botão de Radio. Botões de Radio permitem que o usuário selecione APENAS UM de um número limitado de escolhas:

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

O código HTML acima será exibido no navegador da seguinte forma:

MaleFemale

Caixas de verificação

<input type=”checkbox”> define uma caixa de verificação. Caixas de verificação permitem que o usuário selecione ZERO ou MAIS opções de um número limitado e escolhas.

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

O código HTML acima será exibido no navegador da seguinte forma:

I have a bikeI have a car

Botão de submissão

<input type=”submit”> define um botão de submissão.

Um botão de submissão é usado para enviar os dados do formulário para um servidor. Os dados são enviados para a página especificado com o atributo action do formulário. O arquivo definido nesse atributo normalmente faz alguma coisa com a entrada recebida:

<form name="input" action="html_form_action.asp" method="get">

Username:
<input type="text" name="user">

<input type="submit" value="Submit">

</form>

O código acima será exibido no navegador da seguinte forma:

Username:

 

Se você digitar alguns caracteres no campo de texto acima e clicar no botão “Submit”, o navegador irá enviara sua entrada para uma página chamada “html_form_action.asp”. Essa página irá exibir a entrada recebida.

Mais exemplos de entrada

Radio buttons Como criar botões de radaio.

Checkboxes Como criar caixas de verificação, O usuário pode marcar ou desmarcar uma caixa de verificação.

Simple drop-down list Como criar uma lista drop-drown simples.

Drop-down list with a pre-selected value Como criar uma lista drop-drown com valores pré-selecionados.

Textarea Como criar um controle de entrada de texto multi-linhas. Em uma área de texto o usuário pode escrever uma quantidade ilimitada de caracteres.

Create a button Como criar um botão.

Exemplos de formulário

Fieldset around form-data Como criar uma borda em torno dos elementos de um formulário.

Form with text fields and a submit button Como criar um formulário com dois campos de texto e um botão de submissão.

Form with checkboxes Como criar um formulário com duas caixas de verificação e um botão de submissão.

Form with radio buttons Como criar um formulário com dois botões de radio e uma botão de submissão.

Send e-mail from a form Como enviar e-mail a partir de um formulário.

Tags de formulário HTML

New : Novas tags do HTML5.

Tag Descrição
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
lt;label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist>New Specifies a list of pre-defined options for input controls
<keygen>New Defines a key-pair generator field (for forms)
<output>New Defines the result of a calculation

Traduzido de w3schools.com