Criação de formulários e tabelas com HTML

INTR

ODUÇÃO AO H

TML –

FORMULÁ

RIOS E

TABELA

S

PR

OF.

L EO

NA

RD

O S

OA

RE

S E

SI L

VA

Campus Garanhuns

O QUE SÃO FORMULÁRIOS HTML?

FORMULÁRIOS

• Alguns sistemas web necessitam de dados do usuário

• Na maioria dos casos essa informação é usada para salvar ou carregar dados no banco de dados

• Informações do usuário são usadas em:• Cadastros• Atualizações• Envio de arquivos • Dentre outros…

EXEMPLOS DE FORMULÁRIOS

FLUXO DE ENVIO DE INFORMAÇÕES EM UM FORMULÁRIO

1)

2) 3)

COMO FORMULÁRIOS SÃO CRIADOS

ATRIBUTOS DA TAG <FORM>

• method• Descrição: Forma a ser usada para envio das

informações.• Valores: GET, POST

• name e id• Descrição: identificadores para o formulário

• action• Descrição: url de destino onde os dados do formulário

serão enviados

TAG INPUT, SELECT, RADIO, CHECKBOX E TEXTAREA

ATRIBUTOS DA TAG INPUT

• type• Descrição: tipo de input que será utilizado• Valores: button, checkbox, file, text, submit, radio,

reset, image, password, hidden

• value• Descrição: valor pré-estabelecido a ser utilizado no

input

• maxlength• Descrição: quantidade máxima para o valor

• name e id• Descrição: identificadores para o formulário

INPUT DE TEXTO

• Exemplo:

<form action="">Primeiro nome: <input type="text" name="primeironome" /><br />Segundo nome: <input type="text" name="primeironome" /></form>

INPUT DE SENHA

• Exemplo

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

INPUT DE RADIO

• Exemplo

<form><input type="radio" name="sexo" value="masculino" /> Masculino<br /><input type="radio" name="sexo" value="feminino" /> Feminino</form>

TAG TEXTAREA

• Utilizada em campos que precisam de textos com múltiplas linhas

• Exemplo:• Descrições pessoais, e-mail, solicitações

ATRIBUTOS DA TAG TEXTAREA

• cols• Descrição: quantidade de colunas do campo de

textarea

• rows• Descrição: quantidade de linhas do campo de

textarea

EXEMPLO DE TEXTAREA

<form action="">

Descrição:<br> <textarea rows=4 cols=20></textarea>

</form>

TAG SELECT

• Utilizada quando há diversas opções pré-definidas para um campo

• Possibilita a escolha de uma ou várias opções

EXEMPLOS DA TAG SELECT

UTILIZAÇÃO DA TAG SELECT

• Formada por uma tag <select></select>

• Opções são compostas por tags <option>

EXEMPLO DO INPUT DE SELECT

<form action="">

<select name=”mes">

<option value=”janeiro">Janeiro</option>

<option value=”fevereiro">Fevereiro</option>

…

</select>

</form>

EXERCÍCIO