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>

1
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

2
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

3
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

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

5
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

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

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

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

9
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

10
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

11
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

12
Estrutura do Documento HTML5

HTML5 - Estrutura básica

 <!DOCTYPE html>

 Indica que se trata de um documento do tipo HTML

versão 5.
 Deve ser a primeira tag do código antes mesmo da
tag <html>.

13
 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

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

15
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}$">

JAVASCRIPT E
FORMS
Validações de formulários

16
Validação de formulários

 Os dados de um formulário devem ser enviados

para um servidor.

 Pode-se facilitar o trabalho de um servidor

efetuando validações com JavaScript como:
 campos não preenchidos, caixas não marcadas e etc.

Validação de formulários

 Alguns exemplos de validação:

 Campos de texto não preenchidos
 Campo de texto com tamanho mínimo e máximo
 Validação de campo de e-mail
 Campos com apenas números em seu conteúdo
 Seleção obrigatória de radio buttons, checkboxes e
caixas de seleção
…

17
Validação de formulários - Exemplo

JavaScript e Forms

 Acesso a um form em javascript por id ou name

document.myform

 no html

<form id=“myform” name=“myform” …>

18
JavaScript e Forms
 getElementByID
 Qualquer elemento HTML pode ter um atributo id. O
valor desse atributo deve ser único dentro do
documento.
 Pode selecionar um elemento com base na identificação
exclusiva com o método getElementById() do
objeto document.

JavaScript e Forms
 getElementsByName
 Ao contrário de id, o valor de um atributo name não
precisa ser único
 Pode selecionar um elemento com base na identificação
exclusiva com o método getElementByName() do
objeto document.

19
Acesso aos elementos de um Form

 Input text, textarea e password

Nome:
<input type=text name=nome id=nome>

nomeobj = document.getElementById("nome")
strnome = nomeobj.value

 propriedade value do objecto.

Acesso aos elementos de um Form

 Select
<p><select size=2 name=cidades id=cidades>
<option value=1>Porto</option>
<option value=2>Lisboa</option>
</select>
 O controlo select tem um array options[ ]
 O método selectedIndex devolve o índice da opção seleccionada
 A propriedade text devolve o texto da opção

var obj=document.getElementById("cidades");
index=obj.selectedIndex;
str=cidadesobj.options[index].text

20
Acesso aos elementos de um Form

 Radio Buttons / Checkboxes

Regime:
<input type=radio name=Regime value=Diurno checked=checked>Diurno
<input type=radio name=Regime value=Noturno>Noturno

 getElementsByName devolve um array de objectos com o mesmo nome

 Propriedade value devolve o valor do elemento

var radioobj=document.getElementsByName("Regime")
for (i=0;i<radioobj.length;i++)
if (radioobj[i].checked)
str=radioobj[i].value;

Expressões Regulares - JavaScript

 Usadas para validar a informação num Form HTML
 Criar uma expressão regular:
 Usando uma expressão literal:
var regexpr = /^\d{6}$/

 usando o construtor do objecto RegExp :

 var regexpr = new RegExp("^\d{6}$")

 Aplicar a expressão regular

 Método test do objecto RegExp regexp.test(num)

21