HTML - Parte 4: Formulários

Prévia do material em texto

HTML - Parte 4
DCC 121 - Laborato´rio de Programac¸a˜o Web
Prof. Luiz Maur´ılio da Silva Maciel
Departamento de Cieˆncia da Computac¸a˜o
Instituto de Cieˆncias Exatas
Universidade Federal de Juiz de Fora
15 de setembro de 2014
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 1 / 21
Roteiro
1 Formula´rios
Input
Outras tags de formula´rio
Formula´rios e tabelas
2 Exerc´ıcios
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 2 / 21
Formula´rios
Formula´rios em HTML
Formula´rios sa˜o utilizados para passar informac¸o˜es para o servidor
Por exemplo, pode ser usado para fazer cadastros
Podem conter diversos elementos de entrada como campos de texto,
listas de selec¸a˜o, boto˜es etc
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 3 / 21
Formula´rios
Criando formula´rios
Formula´rios em HTML sa˜o criados pela tag <form>
Dois atributos importantes dessa tag sa˜o:
action: especifica a pa´gina para onde os dados sera˜o enviados quando
o formula´rio e´ submetido (default: a pro´pria pa´gina)
method: especifica a forma como os dados sera˜o enviados ao servidor.
Valores poss´ıveis:
“GET”: envia dos dados pela URL (default)
“POST”: envia pelo cabec¸alho da requisic¸a˜o
Exemplo:
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 4 / 21
Formula´rios Input
A tag <input>
O elemento mais importante de um formula´rio e´ a tag <input>
E´ utilizado para selecionar informac¸a˜o do usua´rio
Esse elemento pode ter va´rias formas de acordo com o atributo type
Alguns exemplos sa˜o: campo de texto, checkbox, campo de senha,
boto˜es etc
O atributo name e´ utilizado para dar um identificador ao campo para
ser passado ao servidor
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 5 / 21
Formula´rios Input
Campos de texto
O tag <input type=“text”> e´ utilizada para definir um campo de
entrada de texto de uma linha
Alguns atributos importantes desse elemento sa˜o:
maxlength: limita o tamanho da entrada de dados
size: define o tamanho do campo (default: 20)
value: define um valor inicial para o campo
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 6 / 21
Formula´rios Input
Campos de senha
Utiliza-se a tag <input type=“password”> para criar campos de
senha
Semelhante aos campos de texto mas com o conteu´do oculto
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 7 / 21
Formula´rios Input
Radio Buttons
A tag <input type=“radio”> e´ utilizada para criar campos de
selec¸a˜o u´nica
O atributo value e´ utilizado para especificar o valor de cada campo
(por exemplo, para envio ao servidor)
O atributo checked e´ utilizado para deixar um campo selecionado ao
carregar a pa´gina
Importante: radios que pertencem a um mesmo grupo devem ter o
mesmo valor para o atributo name
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 8 / 21
Formula´rios Input
Checkboxes
A tag <input type=“checkbox”> permite criar campos em que o
usua´rio pode escolher mais de uma opc¸a˜o
O atributo value e´ utilizado para especificar o valor de cada campo
(por exemplo, para envio ao servidor)
O atributo checked e´ utilizado para deixar um campo selecionado ao
carregar a pa´gina
Importante: checkboxes que pertencem a um mesmo grupo devem
ter o mesmo valor para o atributo name
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 9 / 21
Formula´rios Input
Boto˜es
A tag <input type=“submit”> cria um bota˜o para envio dos dados
do formula´rio
A tag <input type=“reset”> cria um bota˜o para limpar os dados do
formula´rio
O valor do atributo value corresponde ao texto que aparece no bota˜o
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 10 / 21
Formula´rios Outras tags de formula´rio
A´reas de texto
A tag <textarea> e´ utilizada para criar entradas de texto maiores,
na˜o limitadas a somente uma linha
O atributo rows define a quantidade de linhas e o atributo cols define
a quantidade de colunas
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 11 / 21
Formula´rios Outras tags de formula´rio
Listas de selec¸a˜o
A tag <select> e´ utilizada para criar listas de selec¸ao (combo box)
Cada opc¸a˜o e´ criada pela tag <option>
O atributo value e´ utilizado para especificar o valor de cada campo
(por exemplo, para envio ao servidor)
O atributo selected e´ utilizado para deixar uma opc¸a˜o selecionada ao
carregar a pa´gina
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 12 / 21
Formula´rios Outras tags de formula´rio
Agrupando Opc¸o˜es
A tag <optgroup> e´ utilizada para agrupar opc¸o˜es dentro de uma
lista de selec¸a˜o
O atributo label e´ utilizado para dar nome ao agrupamento
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 13 / 21
Formula´rios Outras tags de formula´rio
Agrupando campos
A tag <fieldset> e´ utilizada para agrupar campos relacionados em
um formula´rio
A tag <legend> e´ usada para dar t´ıtulo ao agrupamento
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 14 / 21
Formula´rios Formula´rios e tabelas
Formula´rios e tabelas
Pode-se usar a estrutura de tabelas para melhorar a organizac¸a˜o de
formula´rios
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 15 / 21
Formula´rios Formula´rios e tabelas
Formula´rios e tabelas
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 16 / 21
Formula´rios Formula´rios e tabelas
Formula´rios e tabelas
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 17 / 21
Formula´rios Formula´rios e tabelas
Formula´rios e tabelas
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 18 / 21
Exerc´ıcios
Exerc´ıcio
1 Crie um arquivo HTML com o nome index.html
2 Coloque como t´ıtulo (title) da pa´gina: Cadastro
3 Crie um cabec¸alho centralizado de n´ıvel 1 (h1) com o texto:
Cadastro de Alunos
4 Adicione o formula´rio a seguir.
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 19 / 21
Exerc´ıcios
Exerc´ıcio
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 20 / 21
Exerc´ıcios
Instruc¸o˜es para o envio dos exerc´ıcios
Crie um arquivo compactado (.zip, .rar ou .7z) contendo todos os
arquivos dos exerc´ıcios
Nomeie seu arquivo da seguinte forma:
DCC121 Tarefa4 NumeroDeMatricula NomeSobrenome.zip
Exemplo: DCC121 Tarefa4 200822017 LuizMaciel.zip
Envie para o email do professor (luiz.maurilio@ice.ufjf.br) com o
seguinte assunto: DCC121 Tarefa 4
Prazo para envio: ate´ as 23:59 de 21/09/2014 (domingo)
Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 4 15 de setembro de 2014 21 / 21
	Formulários
	Input
	Outras tags de formulário
	Formulários e tabelas
	Exercícios