08/08/2011

1

TECNOLOGIAS WEB – AULA 7

PROF. RAFAEL DIAS RIBEIRO@RIBEIRORD

Objetivos:

• Apresentar as principais tags utilizadas na construção de formulários em HTML.

• Compreender as principais estruturas formadas com as tags utilizadas

• Listar as principais tags de formulários e seus usos

08/08/2011

2

Formulários

Formulários

Principal forma de entrada de dados fornecidos por usuários na Internet

08/08/2011

3

Formulários

<form >

Elementos de Entrada

</form>

Indica o início e fim do formulário. A tag informa também ao navegador para onde deve enviar o formulário, como e que tipo de informação é que se deseja enviar.

Os atributos da tag form são: • action• method • enctype

<form action=" {atributo de ação} " method=“ {post ou get} ">

</form>

08/08/2011

4

Formulários

<form action=“ ” >

Elementos de Entrada

</form>

Deve-se indicar neste atributo a localização do recurso onde o formulário será processado.

Ex: <form action=“ cadastro.php” ><form action=mailto:user@provedor.com >

Formulários

<form method =“ ” >

Elementos de Entrada

</form>

Indica qual o método de HTTP será usado para enviar os conteúdos do formulário.

Existem duas possibilidades :• POST • GET

Ex: <form action=“ cadastro.php” method =“post” >

08/08/2011

5

FormuláriosAtravés do método HTTP "get", os dados são anexados ao URI especificado pelo atributo.

O método GET será adicionado à URI especificado pelo atributo action com um ponto de interrogação como separador, e só depois é que a URI é enviada. O resultado poderia ser por exemplo:

http://www.suapagina.com.br/cadastro.html?user=rafa&pass=1234

OBS: Caso não seja especificado qual o método, por padrão é assumido o GET.

Formulários

Através do método HTTP "post", os dados são anexados ao corpo do formulário e enviados ao agente a cargo do processamento.

Com o método POST a informação recolhida no formulário será incluída no corpo da página e enviada ao agente que a irá processar.

08/08/2011

6

Formuláriosenctype especifica a representação dos dados do formulário.

Determina o mecanismo utilizado para encode dos conteúdos obtidos pelo formulário.

Para o método POST quer para o GET o enctype é :application/x-www-form-urlencoded.

<form action="validar.html" method="POST" enctype="application/x-www-form-urlencoded">

Formulários

Caso deseje ter um formulário para upload de arquivos:multipart/form-data

<form action="validar.html" method="POST" enctype="multipart/form-data">

Nota: o método terá de ser o POST.

08/08/2011

7

input type="text“ - Rótulo descritivo

ELEMENTOS BÁSICOS DO FORMULÁRIONOME<br /><input type="text" name="txtNome" />

input type="text“ - Rótulo descritivo, Elemento HTML

ELEMENTOS BÁSICOS DO FORMULÁRIONOME<br /><input type="text" value=“valor do campo” name="txtNome" />

08/08/2011

8

ELEMENTOS BÁSICOS DO FORMULÁRIOSENHA<br /><input type=“password“ name="txtSenha" />input type="password“ - Rótulo descritivo (senha), Elemento HTML

ELEMENTOS BÁSICOS DO FORMULÁRIO

<input type="button" name="cmdValidar" value=“Validar" />

input type="button“

08/08/2011

9

ELEMENTOS BÁSICOS DO FORMULÁRIO

<input type=" submit " name="cmdEnviar" value=“Enviar" />

input type="submit“

ELEMENTOS BÁSICOS DO FORMULÁRIO

Qual o seu sexo ? <br /><input type="radio" name="sexo" value="masculino" /> Masculino<br /><input type="radio" name="sexo" value="feminino" /> Feminino<br />

input type="radio”

08/08/2011

10

ELEMENTOS BÁSICOS DO FORMULÁRIO

Qual o seu sexo ? <br /><input type="radio" name="sexo" value="masculino" /> Masculino<br />

<input type="radio" name="sexo" value="feminino" checked="checked" /> Feminino<br />

input type="radio" - Elemento HTML, Rótulo descritivo

ELEMENTOS BÁSICOS DO FORMULÁRIO

input type="checkbox“

Qual seu esporte favorito ? <br /><input type="checkbox" name="chkEsporte" value="Futebol" /> Futebol<br /><input type="checkbox" name="chkEsporte" value="Judo" /> Judo<br /><input type="checkbox" name="chkEsporte" value="TenisdeMesa" /> Tenis de Mesa<br /><input type="checkbox" name="chkEsporte" value="Surf" /> Surf<br /><input type="checkbox" name="chkEsporte" value="Amarelinha" /> Amarelinha<br />

08/08/2011

11

ELEMENTOS BÁSICOS DO FORMULÁRIO

Select

Titulo<br /><select name="ddlTitulo"><option>elemento 1</option><option>elemento 2</option><option>elemento 3</option><option>elemento 4</option><option>elemento 5</option></select>

ELEMENTOS BÁSICOS DO FORMULÁRIO

textarea

Comentários<br /><textarea name="txtComments"></textarea>

08/08/2011

12

ELEMENTOS BÁSICOS DO FORMULÁRIO

textarea

Comentários<br /><textarea name="txtComments“ rows="10" cols="50" ></textarea>

ELEMENTOS BÁSICOS DO FORMULÁRIO

textarea

Comentários<br />

<textarea name="txtComments“ rows="10" cols="50" >Texto que você pode inserir para quando o campo for carregado</textarea>

08/08/2011

13

ELEMENTOS BÁSICOS DO FORMULÁRIO

Outros elementos

hidden – Envia dados ocultos <input type=“hidden“ name="txtOculto" />reset – Botão que limpa os dados adicionados pelo usuário<input type="reset" name=“btLimpar" value=“Limpar">

file – Seleciona arquivos para um tipo de envio.

AGRUPANDO ELEMENTOS DO FORMULÁRIO

FIELDSET pode ser usado para agrupar qualquer variedade de elementos input deformulários

BENEFÍCIO:Você incrementa a usabilidade/acessibilidade fazendo sua página mais clara para usuários com deficiências visuais, ou usuários com restrições cognitivas.

<fieldset><legend>Primeiro Agupamento</legend><select><option>Primeiro 0</option><option>Primeiro 1</option><option>Primeiro 2</option><option>Primeiro 3</option></select></fieldset>

<fieldset><legend>Segundo Agrupamento</legend><select><option>Segundo 0</option><option>Segundo 1</option><option>Segundo 2</option><option>Segundo 3</option></select></fieldset>

08/08/2011

14

AGRUPANDO ELEMENTOS DO FORMULÁRIO

Da mesma forma como você pode agrupar inputs de um formulário, pode também

agrupar as opções de uma tag <select> usando a tag<optgroup>

Selecione uma cidade: <select><optgroup label="São Paulo"><option value="Araraquara">Araraquara</option><option value="Assis">Assis</option><option value="Campinas">Campinas</option></optgroup><optgroup label="Rio de Janeiro"><option value="Angra dos Reis">Angra dos Reis</option><option value="Mangaratiba">Mangaratiba</option><option value="Búzios">Búzios</option></optgroup></select>

PRATIQUE

08/08/2011

15

<form name="form1" method="post“ action="mailto:rafaeldiasribeiro@gmail.com"><p>Nome: input name="txtNome" type="text“ size="50"></p><p>E-mail:<input name="txtEmail" type="text“ size="50“> </p><p>Sexo: <input name="rdbSexo" type="radio" value="Masculino“> Masculino<input name="rdbSexo" type="radio" value="Feminino“> Feminino</p><p>Endereço: <input name="txtEndereco" type="text“ size="80">UF:<select name=“UF">

<option value=“RJ”>RJ</option><option value=“SP”>SP</option><option value=“MG”>MG</option><option value=“AM”>AM</option></select></p>

<p>Comentários:</p><p><textarea name="txtComentarios" rows="6“> </textarea></p><p> <input name="chkNoticias" type="checkbox“ value="checkbox" checked>Desejo Receber Notícias </p><p> input name="btSubmit" type="submit" id="btSubmit" value="Enviar">

<input name="btReset" type="reset" id="btReset" value="Limpar“> </p></form>

PRATIQUE