FORMULÁRIOS

HTML
Formulários HTML

 A possibilidade de receber informação dos utilizadores

através da utilização de formulários traz alguma versatilidade
aos documentos HTML
 Todo o formulário em HTML é construído usando elementos
dentro de um bloco <FORM>
Formulários HTML
Formulários HTML

 Tag <FORM></FORM>
Utilizado para demarcar início e fim de um formulário.

<form name=dados action=pagina.php>

... Comandos
</form>

name  nome do formulário

action  programa para o qual os dados são enviados
Formulários HTML
 Tag <INPUT>
 Permite a entrada de dados através do formulário
<input type=text name=nome size=20 >

 Atributos
 type – informa qual é o tipo do campo de entrada de dados
 name – informa qual é o nome do campo
 value – informa um valor padrão para o campo
 size – informa o tamanho do campo exibido na tela
 maxlength – informa o número máximo de carateres do campo
 id – identidade única para tag
Formulários HTML
 Atributo TYPE
 text
 password
 radio
 checkbox
 button
 submit
 reset
 hidden
Formulários HTML
 Type TEXT
 Campo simples para digitação de texto.

<input type=text name=nome value=“nome”

size=50 maxlength=50>

name  nome do campo

value  valor pré-definido do campo (opcional)
size  tamanho do campo
maxlength  quantidade de caracteres
Formulários HTML

 Elementos <INPUT> com TYPE=text podem ser usados para

entrada de texto
Formulários HTML
 Type PASSWORD
 Comando que cria campos para digitação de senhas.
<input type=password name=senha>

 Com TYPE=password o texto digitado é ocultado na

tela do browser
Formulários HTML
 Type RADIO
 Comando que cria campos para marcação de uma única
alternativa.

<input type=radio name=sexo value=M>

Masculino
<input type=radio name=sexo value=F checked>
Feminino

checked deixa uma alternativa pré-selecionada.

Formulários HTML
 Radio Buttons, se tiverem o mesmo nome, formam um grupo. No grupo,
apenas uma seleção é aceite
Formulários HTML
 Type CHECKBOX
 Comando que cria campos para marcação de várias
alternativas.

<input type=checkbox name=op1 value=1> opção 1

<input type=checkbox name=op2 value=2> opção 2
Formulários HTML

 Checkboxes permitem mais de uma seleção

 O código enviará nomes repetidos contendo valores diferentes
Formulários HTML
 Type BUTTON

 Comando que cria um botão.

<input type=button name=clic value="Click me">

Formulários HTML

 Type SUBMIT

 Comando que cria um botão que submete os dados do

formulário ao programa especificado.

<input type=submit name=envia value=enviar>

Formulários HTML

 Type RESET

 Comando que reinicializa o formulário (Reset)

<input type=reset value=“limpar dados">

Formulários HTML
 Button Evento programado (Button)
 Submit  Envio do formulário (Submit)
 Reset  Reinicialização do formulário (Reset)
Formulários HTML
 Type HIDDEN
 Campos ocultos são úteis para que o autor da página
possa enviar informações ao servidor
 Informações sobre configuração da aplicação
 Comandos, para selecionar comportamentos diferentes da aplicação
 Parâmetros especiais para controle da aplicação, sessão ou dados que pertencem ao
contexto da aplicação

<form>
Nome:
<input type=text name=nome><br><br>
<input type=hidden name=pais value=portugal>
<input type=submit value="Submit">
</form>
Formulários HTML
 Tag <TEXTAREA> </TEXTAREA>
Comando que cria um campo para digitação de texto
organizado em mais de uma linha.

<textarea name=obser cols=60 rows=5>

texto
</textarea>

name nome do campo

texto  um valor pré-definido do campo
cols  quantidade de colunas
rows  quantidade de linhas
Formulários HTML
 TEXTAREA possibilita a entrada de texto de múltiplas linhas
Formulários HTML
 Tag <SELECT> </SELECT>
Comando que cria uma caixa de seleção.

 Tag <OPTION>
 especifica as opções da caixa de seleção.

<select name=sexo>
<option value=M>Masculino
<option value=F>Feminino
</select>
Formulários HTML
 O par de elementos <SELECT> e <OPTION> define o nome da
coleção
Formulários HTML
 Tag <FIELDSET> </FIELDSET>
Permite agrupar elementos de um formulário em caixas
que podem ser legendadas através da tag
 <legend> </legend>

<fieldset>
<legend>Opinião</legend>
Gostou da minha Home Page?<br>
<input type=Radio name=Gostou value=Sim>sim
<input type=Radio name=Gostou value=MM CHECKED>Mais ou Menos
<input type=Radio name=Gostou value=Não>Não!
</fieldset>
HTML5
Novos elementos para Formulários
Formulários HTML
 Novos valores para o atributo type com HTML5
 tel - Telefone
 search – Um campo de busca
 email – Email com formatação e validação
 url – Um endereço web
 datetime
<input type="email" name="email" >
 date
 month
 week
 time
 number
 range
Custom validators
 color
HTML5 – elementos e atributos
 Novos atributos para formulários
 Autofocus - receber o foco quando a página é carregada
<input type=text name=login autofocus >

 Placeholder - dica que descreve o valor esperado de um campo

<input type=text name=pesquisa placeholder=”Search”>

 Required - campo de entrada com preenchimento obrigatório

<input type=text name=login required>

 Pattern - especifica uma expressão regular que o valor do

elemento deve conter contra.
<input type=text name=” CEP ” required pattern=”\d{5}-\d{3}” />
HTML5 – elementos e atributos
 Uso do atributo pattern
 Apenas letras
<input type=text name="text" pattern="[a-z\s]+$">

 Apenas números
<input type=text name="numbers" pattern="[0-9]+$" >

 Valores alfanuméricos
<input pattern="[a-zA-Z0-9]+" type="text">

 Data
<input type=date maxlength=10 name="date" pattern="[0-
9]{2}\/[0-9]{2}\/[0-9]{4}$" min="2012-01-01" max="2014-02-18">
HTML5 – elementos e atributos
 Hora
<input type=time maxlength="8" name="hour" pattern="[0-
9]{2}:[0-9]{2} [0-9]{2}$" >

 Telefone
<input type="tel" required="required" maxlength="15"
name="phone" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" >

 Email
<input type="email" required="required" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" >

 Moeda
<input type="tel" required="required" maxlength="15"
name="valor" pattern="([0-9]{1,3}\.)?[0-9]{1,3},[0-9]{2}$">
HTML5 – elementos e atributos
 Novos atributos para formulários
 Novo atributo form para elementos como input, select e
textarea;
 Permitem que os controles sejam associados a um
formulário;
 Os controles não precisam ser descendentes do
elemento form.
<label for=“email”>
Email: <input type=“email” form=“foo” name=“email”>
</label>
<form id=“foo”></form>