Formulários

Profa. Monica
IFSUL
 Conteúdos

ü Introdução
ü Sintaxe
ü Componentes e Atributos
l Entrada de dados
l Área de texto
l Lista
ü Considerações
 Introdução
•  Formulários – forma que o usuário
pode submeter dados para um
servidor, para seu processamento;
o Primeiro: conhecer componentes
de controle;
o Segundo: scripts;
 Sintaxe  FORM
<FORM name=”nome” action=”url script”
method=”GET/POST”>
...
</FORM>
•  Atributos:
o  name – nome do formulário;
o  action – especifica o endereço de destino
da informação;
o  method – define o método de envio dos
dados;
•  GET: dados enviados pela url;
(informação aparece);
•  POST: dados enviados por meio de
variável;
 Componentes
•  Componente – container para vários
controles;
o  INPUT – diversos tipos entrada (campo de
texto, password, caixa de seleção, botões);
o  LABEL – strings para apresentação de
controles (informação que aparece para o
usuário);
o  BUTTON – botões (considera-se os do
INPUT);
o  SELECT – criação de menus de opções
(lista);
o  TEXTAREA – entrada de texto;
 Elemento  INPUT
•  Elemento para entrada de dados; Pode-se
receber dados de diferentes formas;
•  Sintaxe:
<INPUT type=”tipo de entrada de dados”

name=”nome”
id=”identificador”
Atributos

value=”valor padrão”
size=”tamanho
maxlenght=”limite de caracteres”
src=”url” CHECKED READONLY DISABLED
tabindex=”sequencia”
accesskey=”tecla de atalho” >
 Atributo  TYPE
•  Determina o tipo de entrada de dados;
o  text – entrada de texto; (padrão)‫‏‬
o  hidden – campo oculto;
o  password – entrada de senha;
o  file – entrada de arquivo;
o  checkbox – caixa com múltiplas opções;
o  radio – caixa com opções simples;
o  submit – botão de envio;
o  reset – botão de reset; (limpa dados);
o  button – botão genérico;
o  image – botão imagem (atribui-se uma
imagem);

Exemplo: cap08 - ex08-01

 Atributos  NAME/ID/
VALUE
•  name - atribui um nome ao dado; campo
obrigatório;
•  id – atributo de identificação;
•  value – campo com valor padrão;
o text e password – opcionais;
o hidden, checkbox e radio – obrigatórios;
o submit, reset e button – texto mostrado
no botão;

Exemplo: cap08 - ex08-02

 Atributos  SIZE/
MAXLENGHT/SRC
•  size – determina o tamanho de entrada de texto
em caracteres; (text, file, password);
Exemplo: cap08 – ex08-03
•  maxlenght – número máximo de caracteres
digitados em uma entrada de texto; (text, file,
password);
Exemplo: cap08 – ex08-04
•  src – caminho da imagem para o botão do tipo
“image”;
Exemplo: cap08 – ex08-05
 Atributos  CHECKED/
READONLY/DISABLED  
ü checked – determina que um campo do tipo
“checkbox” ou “radio” fique selecionado;
Exemplo: cap08 - ex08-06

ü readonly – impede que o usuário altere o

conteúdo do campo;
Exemplo: cap08 - ex08-07

ü disable – inibe a interação do usuário nos

campos com esse atributo; (dados não são
enviados no formulário, são ignorados);
Exemplo: cap08 - ex08-08

Exemplo: ex-checked-read-disable
 Atributos    TABINDEX/
ACCESSKEY  
ü  tabindex – determina a sequência que o
navegador aceitará quando o usuário teclar
TAB;
Exemplo: cap08 - ex08-09

ü accesskey – define uma tecla de atalho para

o campo do formulário;
- tecla ALT + tecla definida no accesskey
Exemplo: cap08 - ex08-10

Exemplo: ex-tab-accesskey
 Elemento  BUTTON
ü Podem ser criados 3 tipos de botões;
ü submit, reset, button
ü Sintaxe:
<BUTTON name=”nome”
value=”valor inicial para o botão”
Atributos

type=”submit/button/reset”
DISABLED
tabindex=”sequencia”
accesskey=”tecla de atalho” >
</BUTTON>
Exemplo: ex-button
 Elemento  SELECT
ü Apresenta opções para o usuário;
ü Sintaxe:
<SELECT name=”nome”
size=”tamanho”
DISABLED MULTIPLE
Atributos

tabindex=”sequencia”
accesskey=”tecla de atalho” >
<OPTION value=”item” SELECTED>
descrição do item
</OPTION>
</SELECT>
 Atributos  do  SELECT
•  Os atributos: name, disabled, tabindex e
accesskey são os mesmos do elemento
INPUT;
•  size – quantidade de linhas que a lista
mostrará (valor padrão = 1);
•  multiple – permite que o usuário escolha
mais de um item (para size > 1);
•  value – determina valor para cada item;
•  selected – seleciona o item da lista;
Exemplo: cap08 – ex08-13, 14, 15

Exemplo: ex-select
 Grupos  de  Itens
•  Uma forma de organizar listas com
grandes quantidades de itens;

•  Sintaxe:
<SELECT>
<OPTGROUP label=”descrição do
grupo”>
<OPTION> item </OPTION>
</OPTGROUP>
</SELECT>

Exemplo: cap08 - ex08-16

 Elemento  TEXTAREA
ü Áreas de texto para receber informações;
ü Diferença: TEXTAREA e INPUT type=”text”
ü receber textos de várias linhas;
ü Sintaxe:
<TEXTAREA name=”nome”
rows=”identificador”
Atributos

cols=”valor padrão”
READONLY DISABLED
tabindex=”sequencia”
accesskey=”tecla de atalho” >
... valor padrão ...
</TEXTAREA>
 Atributos  do  
TEXTAREA
•  Os atributos: name, readonly, disabled,
tabindex e accesskey são os mesmos do
elemento INPUT;
•  rows – define o número de linhas
apresentadas no navegador

•  cols – especifica a largura da área de

texto em caracteres;
Exemplo: cap08 - ex08-12
Exemplo: cap08 - ex08-11

Exemplo: ex-textarea
 Elementos  FIELDSET/
LEGENDA
ü Fieldset é um elemento para visualizar
informações separadamente no formulário;
ü Servem para auxiliar no controle da
navegação do usuário (tecla TAB) pelos
campos do formulário;
ü Sintaxe:
<FIELDSET>
<LEGENDA>
...........
</LEGENDA>
</FIELDSET>
Exemplo: cap08 - ex08-18
Exemplo: ex-fieldset
 Aplicando  CSS
ü Sugestão: estilo incorporado definindo
formatação para o INPUT;
INPUT {
background-color: #b2b1b3;
font: 12px arial;
color:#b0e6e6;
border:2px solid #000099;
}
INPUT.ex {
background-color: #808080;
font: 12px verdana;
color:#808080;
border:2px solid #896564;
} Exemplo: formulario-css
 Exercício
•  Crie um formulário para que as
pessoas possam enviar seus dados
pessoais e profissionais para seleção
de uma vaga em uma empresa de
grande porte;
o Sugestões de informações: nome,
telefone, email, idade, cargo,
experiência profissional, nível de
inglês, pretensão salarial, etc...