Aplicativos para InternetAula 07Formulários

Formulários

Aplicações web dinânicas normalmente precisam receber entradas de dados de seus usuários.

Para atender a esse objetivo, criamos formulários eletrônicos em nossas páginas HTML.

O formulário irá receber dados do usuário e repassá-los para o servidor, onde serão processados e possivelmente devolvidos ao usuário.

Cada formulário é delimitado pela marcação <form> no código HTML, e irá gerar uma requisição exclusiva para o lado servidor da aplicação.

Exemplo de formulário

Exemplo de formulário

<form action="cadastro.php" method="post"><fieldset><legend>Dados Pessoais</legend>

<label for="nome">Nome</label> <input type="text" name="nome" id="nome"> <label for="idade">Idade</label> <input type="text" name="idade" id="idade"><label>Estado</label>

<select name="estado"><option value="SP">São Paulo<option><option value="RJ">Rio de Janeiro<option><option value="RS">Rio Grande do Sul<option>

</select><label for="masculino">Sexo</label><input type="radio" name="sexo" id="masculino"> <label for="masculino">Masculino</label><input type="radio" name="sexo" id="feminino"> <label for="feminino">Feminino</label>

</fieldset>

<fieldset><legend>Opinião</legend>

<label for="excelente">Avaliação</label><input type="radio" name="avaliacao" id="excelente"> <label for="excelente">Excelente</label><input type="radio" name="avaliacao" id="boa"> <label for="boa">Boa</label><input type="radio" name="avaliacao" id="ruim"> <label for="ruim“ >Ruim</label><label for="comentarios">Comentários</label><textarea name="comentarios" id="comentarios“></textarea><label for="newsletter">Deseja receber newsletter?</label><input type="checkbox" name="newsletter" id="newsletter"> <label for="newsletter">Sim, envie-me emails com novidades</label>

</fieldset>

<input type="submit" value="Enviar“> <input type="reset" value="Apagar"></form>

Tag <form>

Delimita o formulário. Somente os campos que estiverem entre <form> e </form> serão enviados ao servidor.

Atributo Valor Descrição

action endereço Especifica o endereço da página do servidor que irá receber a requisição

method GETPOST

Tipo de requisição a ser enviada para o servidor:GET- os dados entrados fazem parte do URL associado à consulta enviada para o servidor; suporta até 128 caracteres. POST - os dados entrados fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados.

enctype Tipo de codificação dos dados

O padrao e application/x-www-form-urlencoded, mas alguns browsers suportam text/plain

Tag <fieldset>

Permite agrupar campos em regiões, dependendo do tipo de informações a serem entradas.

Os campos colocados entre <fieldset> e </fieldset> aparecerão dentro da mesma região.

Uma legenda pode ser atribuída a cada fieldset usando-se a tag <legend></legend>

Atributo Valor Descriçãodisabled disabled Desabilita os elementos do formulario internos ao

fieldset

form nome do form Especifica um ou mais forms aos quais o fieldset pertence

name nome Especifica o nome do fieldset

Tag <input>

Cria um campo do formulário.

Atributo Valor Descriçãoname nome Define o nome do campo. É o identificador que o

servidor irá receber para ler o valor do campo.type button

checkboxfilehiddenpasswordradioresetsubmittext

Button – cria um botãoCheckbox – caixa de seleção para multiplos valoresFile – Seleciona um arquivoHidden – campo ocultoPassword – Senha, oculta caracteres com ***Radio – caixa de seleção para único valorReset – Botão para limpar o formulárioSubmit – Botão que envia o formulárioText – campo tipo texto

value valor Define o valor do campo. Esse atributo é enviado para o servidor na requisição e é alterado quando o usuário digita algo no campo.

Campos input

type=“text”

type=“pasword”

type=“submit” e type=“reset”

type=“checkbox”

type=“radio”

type=“file”

Tag <textarea>

Cria um campo de digitação livre, que permite várias linhas de texto.

Exemplo:

Atributo Valor Descriçãodisabled disabled Desabilita o textarea

form nome do form Especifica um ou mais forms aos quais o textarea pertence

name nome Especifica o nome do textarea

readonly readonly Define que o textarea permite somente leitura

Tags <select> e <option>

A tag <select></select> cria uma caixa de seleção.

Cada opção a ser inclusa deve ser delimitada pela tag <option></option>

Enquanto o texto exibido é o conteúdo da tag option, o atributo value define o valor a ser enviado para o servidor.

Tag <label>

A tag <label></label> serve para criar o rótulo de um campo.

O atributo for de um label indica o id do campo que ele aponta. Ao clicar no label, o campo recebe foco automático.

Novos campos do HTML 5

O HTML 5 introduziu novos tipos de campos de formulários, já programados para validar diferentes tipos de dados (ainda não são compatíveis com todos os navegadores).

– <input type = “tel”>– <input type = “email”>– <input type = “url”>– <input type = “number”>– <input type = “range”>– <input type = “date”>– <input type = “time”>– <input type = “datetime”>– <input type = “month”>– <input type = “week”>– <input type = “color”>– <input type = “search”>– <datalist>– <progress>– <meter>

Novos campos do HTML 5

Campo email

Inputs com type=“email” armazenam endereços de email. Navegadores que aceitam esse tipo de campo validam automaticamente o conteúdo, buscando a existência do caracter @.

Campo tel

Inputs com type=“tel” permitem armazenar números de telefone. Em dispositivos móveis, ele altera o teclado de alfanumérico para numérico.

Campo url

Inputs com type=“url” armazenam endereços da web. A validação feita pelo navegador busca pela string “http://”

Campo number

Inputs com type=“number” armazenam valores numéricos, e disponibilizam uma caixa de incremento/decremento de valores.

Atributo Valor Descriçãostep valor Valor do incremento.

min valor Valor mínimo que pode ser selecionado pelo campo

max valor Valor máximo que pode ser selecionado pelo campo

value valor Valor atual do campo

Campo range

Inputs com type=“range” armazenam valores numéricos, e disponibilizam uma barra de alcance para o usuário selecionar o valor.

Atributo Valor Descriçãostep valor Valor do incremento.

min valor Valor mínimo que pode ser selecionado pelo campo

max valor Valor máximo que pode ser selecionado pelo campo

value valor Valor atual do campo

Campo date

Inputs com type=“date” disponibilizam uma janela de calendário para seleção de data.

Campo time

Inputs com type=“time” permitem seleção de horário.

Campo datetime

Inputs com type=“datetime” combinam um seletor de data com um de horário, e permitem ajuste de fuso hórário.

Campo month

Inputs com type=“month” permitem seleção de um mês.

Campo week

Inputs com type=“week” permitem seleção de uma semana.

Campo color

Inputs com type=“color” permitem seleção de uma cor RGB e retornam sua representação hexadecimal.

Campo search

Inputs com type=“search” mostram automaticamente um “x” para apagar o conteúdo do campo se houver algum valor digitado.

Datalist

Datalist permitem criar uma caixa de sugestões para serem preenchidas em campos de texto.O campo de texto utiliza o atributo list=“nomeDatalist” para referenciar a datalist desejada.

Progress

Permite inserir uma barra de progresso. A divisão value/max determina a porcentagem do progresso. O valor pode ser alterado via javascript, para criar uma barra de progresso dinamica.

Meter

Cria uma régua com indicador de valores dentro de uma escala.

Outros atributos do HTML 5

Placeholder– Define um texto de exemplo a ser exibido se o campo estiver vazio

Required– Define que o campo vai ser validado pelo navegador. O form não será

enviado se houver erros. *

* Para impedir que o formulario seja validado no momento do envio use o atributo novalidate na tag form.

Exercício

Crie a seguinte página de formulário: