HTML - HyperText Markup Language - Formulário

12

Transcript of HTML - HyperText Markup Language - Formulário

• Os elementos de formulário são elementos que permitem o usuário entrar informação

(como campos de texto, campos de área de texto, menus drop-down, botões de seleção

única, botões de seleção múltipla, caixas de seleção, etc.) em um formulário.

<form></form>

<form>

Atributos

• method – método HTTP de envio das informações (POST / GET)

• action – endereço a serem enviados os dados - #

• enctype - multipart/form-data – para envio de arquivos

<form method="#" action="POST">

<input>

Atributos

• type – tipo de campo ( text / radio / checkbox / file / hidden / password ) (color / date / datetime /

month / email / number / range / search / tel / time / url / week - HTML5*)

• name – nome do campo a ser enviado

• value – valor do campo

<input type="text" name="nome" value="">

<input>

Tipo de dado Tipo de campo

text Texto

radio Opção, seleção única

checkbox Opção, seleção múltipla

file Arquivo

hidden Oculto

password Senha

Tipo de dado Tipo de campo

color Seleção de cor

date Data

datetime Data e Hora

month Mês

email E-mail

number Número

range Intervalo numérico

search Busca

tel Telefone

time Hora

url URL

week Semana

<textarea>

Atributos

• rows – quantidade de linhas (em tamanho)

• cols – quantidade de colunas (em tamanho)

• name – nome do campo a ser enviado

• value – valor do campo

<textarea name="texto">Conteúdo</textarea>

<select>

Atributos

• name – nome do campo a ser enviado

• multiple – quando for utilizado para seleção de múltiplos itens

• Para cada opção é utilizada a tag <option>

<select name="nome">

<option value="1">Opção 1</option>

<option value="2">Opção 2</option>

</select>

<button>

Atributos

• type – tipo de botão (button | submit | reset )

<button type="submit">Enviar</button>

<label>

Atributos

• for – destino quando clicado (igual ao atributo id do campo)

<label for="nome">

<input type="text" name="nome" id="nome">

</label>

Validação

Obrigatoriedade de preenchimento – em HTML5

• Para tornar um campo obrigatório, em HTML5, deve-se adicionar o atributo required.

<input type="text" value="Campo" required>

<form></form>

<input></input>

<textarea></ textarea>

<button></button>

<select></select>

<label></label>

• Tutorial de HTML Formulários - (http://www.hugoribeiro.com.br/Curso_HTML/html/c11.htm)

• Os formulários HTML - (http://br.ccm.net/contents/238-os-formularios-html)

• HTML button type Attribute - (http://www.w3schools.com/tags/att_button_type.asp)