Professores:

Carla Plantier Message – cpmessage@unoeste.edu.br

Fúlvio Fanelli – fulvio@unoeste.br
Cristiane Maciel Rizo - cris@unoeste.br
Cássia Alves Perego - cassia@unoeste.br
Silvio Carro - silvio@unoeste.br
Formulários
•Formulários são usados como forma de se obter informações
dos usuários de páginas web
• São mecanismos muito comuns e amplamente usados na
coleta de informações

Um formulário é
composto por vários
elementos de
diferentes tipos que
permitem a entrada de
dados.
Formulários
• Para definirmos um formulário usamos a tag <form>.
▪ Todos os elementos membros do formulário devem estar
delimitados pela tag <form>
• A tag <form> apresenta três atributos:
▪ name: nome do formulário
▪ action: endereço web para onde serão enviados os dados do
formulário
▪ method: o método HTTP (post ou get) que será usado no
envio dos dados
<form name=“cadastro” action=“pagina.jsp”
method=“post”>
<!-- Elementos do Formulário -->
</form>
Formulários
Entrada de Dados

• Podemos usar para a entrada de dados caixas de texto,

botões, caixas de seleção e até mesmo campos ocultos.
• Para fazermos a entrada de dados em um formulário
podemos usar as tags:
▪ input
▪ select
▪ textarea
 Formulários
Entrada de Dados - INPUT

• A tag <input> é a mais utilizada dentro de formulários. O tipo de

entrada que a tag representa depende do seu atributo type:
▪ text: dados do tipo caractere
▪ password: igual ao text, mas o texto digitado não é mostrado em
tela
▪ checkbox: caixas de seleção, aceitam a seleção de várias opções
▪ radio: botão de opção, aceita apenas a seleção de uma opção
▪ hidden: cria um campo invisível
▪ button: botão simples que pode ser vinculado a eventos
▪ reset: botão que, após ser acionado, volta o formulário ao seu estado
inicial
▪ submit: botão que, ao ser acionado, envia os dados do formulário
para o endereço definido no action do <form>
▪ file: abre uma janela para seleção de arquivos
Formulários
Entrada de Dados - INPUT

• Tipo TEXT

<input type=“text” name=“txtNome” size=“40”

maxlength=“30” value=“Digite seu nome” />

• value: indica o valor atual do campo

• name: indica o nome do campo para posterior
processamento quando os valores forem enviados
• size: tamanho do campo a ser exibido no navegador
• maxlength: quantidade máxima de caracteres que pode ser
digitado no campo
Formulários
Entrada de Dados - Rótulos

O <label>elemento define um rótulo para vários elementos do

formulário.

É muito útil para usuários de leitores de tela, porque o leitor de

tela lerá em voz alta o rótulo quando o usuário focar no elemento
de entrada.

<label for="fname">Nome:</label>
<input type="text" id="fname" name="fname">
Formulários
Entrada de Dados - INPUT

• Tipo PASSWORD

<input type=“password” name=“txtSenha” size=“20”

maxlength=“15” value=“” />

• Similar ao TEXT e possui os mesmos atributos

• O diferencial é que qualquer caractere digitado nele será
exibido como um asterisco (*)
Formulários
Entrada de Dados - INPUT

• Tipo HIDDEN

<input type=“hidden” name=“hCodigo” value=“1” />

• Permite o armazenamento e envio de dados sem que eles

fiquem visíveis no navegador do usuário (ocultos)
Formulários
Entrada de Dados - INPUT

• Tipo CHECKBOX

<input type=“checkbox” name=“iCampo”

Value=“10” checked=“checked” /> Opção 10

• Este campo pode assumir dois estados: selecionado ou não

• Quando deseja-se que o campo seja inicializado como
selecionado devemos usar o atributo checked na tag
• O atributo value representa o valor associado à opção para
futuro processamento
Formulários
Entrada de Dados - INPUT

• Tipo CHECKBOX - Exemplo

<form name="form1">
<input type=checkbox name="opcao1" value="1"
checked=“checked” />Opção 1<br />
<input type=checkbox name="opcao2" value="2“ />Opção 2<br />
<input type=checkbox name="opcao3" value="3“
checked=“checked” />Opção 3<br />
<input type=checkbox name="opcao4" value="4“ />Opção 4
</form>
Formulários
Entrada de Dados - INPUT

• Tipo RADIO

<input type=“radio” name=“iRadio”

value=“1” checked=“checked” /> Opção 1

• Similar ao checkbox, no entanto permite selecionar

apenas uma opção de cada vez
• Podemos adicionar vários campos do tipo radio, porém
todos que pertençam ao mesmo grupo deverão ter o
atributo name iguais
Formulários
Entrada de Dados - INPUT

• Tipo RADIO - Exemplo

<form name="form1">
<input type=”radio” name="opcao1" value="1“ />Opção 1<br />
<input type=”radio” name="opcao1" value="2“ />Opção 2<br />
<input type=“radio” name="opcao1" value="3"
checked=“checked” />Opção 3<br />
<input type=“radio” name="opcao1" value="4“ />Opção 4
</form>
Formulários
Entrada de Dados - INPUT

• Tipo BUTTON, SUBMIT e RESET

<input type=“button” name=“b1” value= “OK?”/>
<input type=“reset” name=“b2” value= “OK”/>
<input type=“submit” name=“b3” value= “OK!”/>

• Exibe um botão no navegador

• O atributo value indica o texto a ser exibido no botão
• Os tipos reset e submit possuem as mesmas propriedades
que o button, no entanto, quando clicados, apresentam
um comportamento diferente
▪ submit: envia todo o conteúdo do formulário para o endereço definido
no atributo action do <form>
▪ reset: retorna os valores dos campos do formulário aos seus valores
iniciais
▪ button: pode ser vinculado a eventos de página (JavaScript)
Formulários
Entrada de Dados

Elemento específico para botões.

<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
Formulários
Entrada de Dados - INPUT

• Tipo FILE

<input type="file" text= "Procurar" name="bfile"/>

• <input type="file"> cria uma tela que permite o Upload de

arquivos para o servidor
• Geralmente ele fica embutido em um <form> separado.
Formulários
Entrada de Dados - SELECT

• Caixa de Seleção
<select name=“selOpcao” >
<option value=“1” selected=“selected”> Opção1 </option>
<option value=“2”> Opção2 </option>
<option value=“3”> Opção3 </option>
</select>

• Cada opção da lista é definida através de uma tag <option>

• Quando desejamos que uma opção já esteja selecionada,
usamos o atributo selected da tag <option>
• A propriedade size altera a apresentação do
objeto na tela, e pode ser usada e conjunto
com a propriedade multiple para permitir
a seleção de vários elementos
Formulários
Entrada de Dados - TEXTAREA

<textarea rows="5" cols="20">

Testando um campo texto...
</textarea>

• A tag <textarea> insere no formulário uma caixa de texto

de múltiplas linhas, denominada área de texto
• O número de linhas é especificado pelo atributo rows e o
número de colunas (caracteres por linha) pelo atributo
cols.
• Para inicializar o conteúdo do textarea, colocamos o texto
entre a tag de abertura e a de fechamento
Formulários
Form x CSS

• Classes CSS podem ser utilizadas para formatar os forms.

<style type="text/css">
input { background-color: #B0E0E6;
font: 12px verdana, arial, helvetica, sans-serif;
color:#003399;
border:2px solid #000099;
}
select { background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
}
</style>
 http://www.w3schools.com/tags/att_input_type.asp

search: Define um input para busca. O atributo value tem

efeito placeholder.

<input type="search" id="pesq1"

value="o que vai pesquisar?" />

<br/>

<input type="search" id="pesq2" />

• tel: Define um input para telefone, e seu formato é independente de região.
O atributo pattern permite ao programador definir uma expressão para
validação do telefone.

<input type="tel" id="telefone"

pattern="\(\d{2}\)\s\d{5}-\d{4}" title = “(99) 99999-9999” />

pattern: valida o valor do input text usando uma expressão regular:

<input type="text" pattern="\d{5}-?\d{3}" title="99999-999"
/>

Como utilizar/montar as expressões regulares.

http://www.devmedia.com.br/validando-formularios-usando-regular-expression/12042
• url: Define um input a entrada de URL absoluta.
<input type="url" id="urlSite" />

• email: Define um input entrada de e-mail.

<input type="email" id="email" />

• date, time, datetime e datetime-local:

Define um input customizado para
entrada de data, hora, e data e hora.

<input type="date" id="data" />

<input type="time" id="hora" />
<input type="datetime"
id="datahora" />
• month e week: Definem um input customizado para seleção
de um mês e uma semana respectivamente.
<input type="month" id="mes"/>
<input type="week" id="semana"/>

• number: Define um input para entrada de número.

<input type="number" id="numero" />
• range: Define um input para entrada de número contido num
intervalo. Os atributos min e max determina o valor mínimo
e máximo do intervalo, já o atributo step indica de quanto
será o incremento.

• <input type="range" id="numero" min="5" max="20" step="1"/>

• color: Define um input para receber um valor RGB.

<input type="color" id="cor"/>

placeholder: define um texto estilo marca-da-água em
elementos inputs e textarea.

<input type="text" placeholder="Digite aqui

seu nome"/>

autofocus: define qual elemento do formulário receberá o

foco logo que a página for carregada. Aplicado na
maioria dos elementos do formulário.
<input type="text" id="nome"
autofocus="true"/>
required: define um elemento input, select ou textarea como
requerido.
<input type="text" id="nome" required="required"
/>
list: define uma lista de sugestões para
inputs (combinado com a tag <datalist>).

<input id="lanche" type="text" list="dlLanches" />

<datalist id="dlLanches">
<option value="X-Frango"></option>
<option value="X-Salada"></option>
<option value="X-Egg"></option>
<option value="BigMac Pirata"></option>
</datalist>