Resumo de Html Básico - Formulários -

FORMULÁRIOS HTML

Formulários HTML são usados para obter informações do usuário de várias maneiras.

Em formulários, os usuários digitam os dados requisitados e as informações são enviadas para o servidor.

Um formulário contém elementos de entrada, como campos para texto, checkboxes, radio-buttons, submit buttons, etc. Um formulário também pode ter listas de seleção, área de texto, fieldset, legendas e etiquetas.

A tag <form> é utilizada pra criar formulários.

<form>
.
input elements
.
</form>

_______________________________________________________________________________
ELEMENTOS DE ENTRADA

Os elementos de entrada são os elementos mais importantes do formulário.

Eles são utilizados para selecionar as informações do usuário.

Um elemento de entrada pode variar de diversas maneiras, dependendo do tipo de atributo. Ele pode ser do tipo campo de texto, checkbox, campo de senha, radio button, submit button, etc.

Os tipos mais importantes estão descritos a seguir.

_______________________________________________________________________________
CAMPOS DE TEXTO

<input type="text /> define um campo de texto de uma linha onde o usuário pode digitar informações.

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

NOTA: O campo tem por padrão o comprimento de 20 caracteres.

_______________________________________________________________________________
CAMPO DE SENHA

<input type="password" /> defne um campo de senha.

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

NOTA: Os caracteres do campo senha aparecem mascarados em forma de asterístico durante a digitação.

_______________________________________________________________________________
RADIO BUTTONS

<input type="radio" /> define um radio button. São utilizados para o usuário escolher uma única opção em uma lista de opções.

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

_______________________________________________________________________________
CHECKBOXES

<input type="checkbox" /> define um checkbox. São utilizados para o usuário selecionar uma ou mais opções em uma lista de opções.

<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>

_______________________________________________________________________________
SUBMIT BUTTONS

<input type="submit" /> define um botão submit (eviar).

O botão é usado para enviar os dados preenchidos para um servidor. Os dados são enviados para uma página defnida no atributo action do formulário.

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

A página no servidor "html_form_action.asp" (exemplo) irá executar alguma instrução com os dados recebidos.

_______________________________________________________________________________
EXEMPLOS

Radio Buttons:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

Checkboxes:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_checkbox

Lista de seleção simples:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2

Lista de opção exibindo uma das opções no início.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select3

Área de texto:
http://www.w3schools.com/html/showit.asp?filename=tryhtml_textarea

Botão de enviar (submit):
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_button

Como criar bordas ao redor dos elementos do formulário:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_legend

Formulário cm áreas de texto e botão de enviar:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit

Formulário com checkboxes:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_checkbox

Formulário com radio-buttons:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_radio

Enviar um e-mail através de um formulário:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_mail

Resumos Relacionados