Profª Ana Paula Cardoso

anapaula.cardoso@ifmg.edu.br

IFMG – Formiga/MG

23/Mar/2018

Desenvolvimento Web I
Curso Técnico em Informática
HTML5 Formulários

• Servem para que o browser possa enviar informações e dados

do usuário para serem processadas por outros programas
• Para inserir um formulário na página, deve ser usada a
tag <form></form>
• Dentro da tag pode ser utilizado um conjunto de elementos
para gerar os controles:
• Input, Button, Textarea
• Legend, Label, Fieldset
• Datalist, Keygen, Output
• Select, Option, optgroup
HTML5 Formulários

• Atributos <form>:
• name: nome do formulário.
• id: identificação como de qualquer outro elemento HTML.
• action: define para aonde serão enviados os dados do formulário.
• method: com o valor get, envia os dados do formulário pela URL;
com o valor post, envia os dados "implicitamente".
• enctype: usado para fazer o upload de arquivos, quando é definido
o valor multipart/form-data.
HTML5 Formulários

• Elemento <input>
• Gera um campo onde o usuário pode selecionar ou entrar com
dados de várias maneiras.

• Atributos:
• Name: nome do campo que será utilizado pelo script
• Value: valor inicial do campo (opcional).
• Size: indica o tamanho do campo que aparece na tela (opcional,
valor default=20)
• Maxlength: determina o tamanho máximo de caracteres que o
usuário pode digitar (opcional).
HTML5 Formulários

• Atributos Type <input>:

• Text: texto (default);
• Password: senhas;
• Hidden: envia variáveis escondidas;
• Submit: botões de ação (valor default = enviar consulta);
• Reset: botões de ação (restaura os valores iniciais das entradas de
dados, valor default=redefinir)
HTML5 Formulários

• Atributos Type <input>:

• Checkbox: botões de seleção de múltiplas escolhas.
• Possui a diretiva Checked (opcional, o elemento já aparece marcado).
• O atributo name deve ser igual para todas as escolhas de uma lista;
• Radio: botões de seleção de escolha única,
• o atributo name deve ser igual para todas as escolhas de uma lista.
• Possui a diretiva Checked (opcional, o elemento já aparece marcado).
HTML5 Formulários

• Atributos Type <input>:

• search – para pesquisas;
• number – são setas para aumentar e diminuir números, limitando
número máximo e mínimo;
• range – botão deslizante;
• color – mostra uma paleta de cores;
• tel – números de telefones;
HTML5 Formulários

• Atributos Type <input>:

• url – endereço de url;
• email – endereço de e-mail;
• date/month/week – mostra no campo um calendário que permite
navegar entre meses e anos;
• time – para mostrar a hora;
• datetime – configura data e hora;
• datetime-local – data e hora local.
HTML5 Formulários

• Atributos Type <input>:

• A sintaxe desta tag é:
• <INPUT type="Nome do campo" value="Valor por padrão"
name="Nome do elemento">.
HTML5 Formulários
HTML5 Formulários
HTML5 Formulários

• Elemento <select>
• Possibilita a escolha de um ou mais itens;
• Tag:
<SELECT>..
<OPTION>
<\OPTION>
</SELECT>
HTML5 Formulários

• Atributos de Select:
• Name: nome do campo
• Size: determina quantos itens da lista serão mostrados
• Multiple: determina a seleção de mais de um item (tecla sifth).

• <OPTION> <\OPTION>:
• Define os itens de seleção
• Atributos:
• Value: valor transmitido pelo browser caso a opção seja selecionada
• Selected: escolha padrão
Exercício

• Crie um site para o preenchimento de um formulário de

inscrição, conforme modelo a seguir.
Exercícios
HTML5 Formulários

• Atributos <input>:
• list: O ID de um elemento <datalist> cujo conteúdo, elementos
<option> , e são usados como dicas e mostrados como sugestões
no campo de entrada.
• pattern: Uma expressão regular que o valor de controle é
comparado, que podem ser usados com valores type de text, tel,
search, url, e email.
HTML5 Formulários

• Atributos <input>:
• formmethod: Uma string indicando qual método HTTP (GET or
POST) deve ser usado quando enviado; ele substitui o method do
elemento <form> , se definido. O formmethod só aplica quando o
type é image ou submit.
• x-moz-errormessage : Uma string que é mostrada como uma
mensagem de erro quando o a validação falha. Esta é uma
extensão Mozilla, e não é padrão.