Prof.

Daniel Cosme Mendonça Maia

Bacharel em Sistemas de Informação (Unimontes)
Especialista em Tecnologias para Desenvolvimento Web (Unopar)
Mestre em Informática (UnB)
Desenvolvedor Web (HTML/CSS/PHP)
 Os formulários são muito importantes no
ambiente web; é através deles que podemos
recolher dados introduzidos pelos visitantes;

144
 Um formulário pode conter vários campos de
diferentes tipos.

 Podemos utilizar campos que permitem

inserir dados numéricos, textos pequenos,
textos longos, selecionar elementos de uma
lista, selecionar opções exclusivas, selecionar
caixas de opções (não-exclusivas).

145
 Os formulários são criados através do
elemento form. Dentro desse elemento
colocamos diversos elementos para inserção
de dados.
O elemento form por si só não faz
com que o navegador desenhe nada
<form> na página. Ele contém elementos que
... recolhem os dados e possui atributos
que “dizem” ao navegador como e
</form> para onde devem ser enviados os
dados inseridos pelo visitante.

146
 Os principais atributos da tag <form> são:
Atributo Valores Possíveis Descrição do Atributo
name (caracteres alfanuméricos) Define o nome do formulário.
enctype application/x-www-form-urlencoded Define como os dados do formulário
multipart/form-data serão codificados.
text/plain
method get Define o método de transferência dos
post dados do formulário. (Get → Envia os
dados como parte do URL) / (Post →
Envia os dados de forma reservada.)
action URL Define quem/qual página receberá os
dados transmitidos pelo formulário.

147
 A tag <input> (entrada) é o elemento
utilizado com mais frequência em
formulários;

 Este elemento pode assumir diversas formas

com finalidades diferentes;

 Definimos o tipo da entrada através do

atributo type.
148
 Para utilizarmos campos de texto em
formulários definimos o tipo como “text”.

<form method=“get”>
Primeiro Nome: <input type=“text”
name=“primeiro_nome” />
Segundo Nome: <input type=“text”
name=“segundo_nome” />
</form>

149
 Para utilizarmos botões de envio em
formulários definimos o tipo como “submit”.

<form method=“get”>
Primeiro Nome: <input type=“text”
name=“primeiro_nome” />
Segundo Nome: <input type=“text”
name=“segundo_nome” />
<input type=“submit” value=“Enviar”/>
</form>
150
 Para utilizarmos botões de reset (limpar
formulário) definimos o tipo como “reset”.

<form method=“get”>
Primeiro Nome: <input type=“text”
name=“primeiro_nome” />
Segundo Nome: <input type=“text”
name=“segundo_nome” />
<input type=“submit” value=“Enviar”/>
<input type=“reset” value=“Limpar”/>
</form>
151
 Nosso formulário deverá ter uma estrutura semelhante ao formulário acima.

Perceba que a barra de endereços do navegador exibe um URL maior.

Esse URL contém parâmetros (campos do formulário) e os valores de
cada parâmetro.

Parâmetros / Valores
primeiro_nome = Maria
segundo_nome = Silva

152
 Os campos de texto possuem uma variação
importante, no qual é possível utilizar campos de
senha. Para isso utiliza-se o tipo “password”.

<form method=“get”>
Login: <input type=“text”
name=“usuario” />
Senha: <input type=“password”
name=“senha” />
<input type=“submit” value=“Entrar”/>
</form>
153
 Os “Radio Buttons” são utilizados para criar um grupo
de opções. Neste tipo é possível selecionar apenas
uma opção de cada vez.

<form method=“get”>
<input type=“radio” name=“sexo”
value=“masculino”/> Masculino <br/>
<input type=“radio” name=“sexo”
value=“feminino”/> Feminino <br/>
<input type=“submit” value=“Enviar”/>
</form>

154
 As caixas de validação “checkboxes” devem
ser usadas quando queremos que o visitante
aceite (ou não) os itens dentro de um
pequeno grupo. Neste tipo, podemos
selecionar mais de uma opção.

155
<form method=“get”>
Qual(is) sabor(es) de pizza você
gosta: <br/>
<input type=“checkbox”
name=“4queijos”/> 4 Queijos <br/>
<input type=“checkbox”
name=“frango”/> Frango <br/>
<input type=“checkbox” name=“amoda”/>
À moda <br/>
<input type=“checkbox”
name=“bolonhesa”/> Bolonhesa <br/>
<input type=“submit” value=“Enviar”/>
</form>
156
 Os formulários podem ser melhores
organizados quando utilizamos o elemento
fieldset, em conjunto com o elemento
legend. Esses elementos criam uma “caixa”
de divisão na área dos campos do formulário.

157
<form method=“get”>
<fieldset>
<legend>Qual(is) sabor(es) de pizza
você gosta:</legend>
<input type=“checkbox” name=“4queijos”/>
4 Queijos <br/>
<input type=“checkbox” name=“frango”/>
Frango <br/>
<input type=“checkbox” name=“amoda”/> À
moda <br/>
<input type=“checkbox” name=“bolonhesa”/>
Bolonhesa <br/>
<input type=“submit” value=“Enviar”/>
</fieldset>
</form>
158
 A lista de seleção é um elemento cujo o
usuário pode selecionar uma opção dentre
várias selecionáveis. O elemento para criar a
lista é o select.

159
<form method=“get”>
<fieldset>
<legend>Estado:</legend>
<select name=“estado”>
<option value=“MG”>MG</option>
<option value=“SP”>SP</option>
<option value=“RJ”>RJ</option>
<option
value=“outro”>Outro</option>
</select>
<input type=“submit” value=“Enviar”/>
</fieldset>
</form>
160
<form method=“get”>
Definindo opção
<fieldset> selecionada por “Padrão”
<legend>Estado:</legend>
<select name=“estado”>
<option value=“MG”>MG</option>
<option value=“SP”>SP</option>
<option value=“RJ”
selected=“selected”>RJ</option>
<option
value=“outro”>Outro</option>
</select>
<input type=“submit” value=“Enviar”/>
</fieldset>
</form>
161
<form method=“get”>
<fieldset> Permitindo selecionar mais
de uma opção da lista.
<legend>Estado:</legend>
<select name=“estado”
multiple="multiple">
<option value=“MG”>MG</option>
<option value=“SP”>SP</option>
<option value=“RJ”
selected=“selected”>RJ</option>
<option
value=“outro”>Outro</option>
</select>
<input type=“submit” value=“Enviar”/>
</fieldset>
</form>
162
 Os formulários que precisam “armazenar” textos
longos necessitam de um campo especial para
isso. Neste caso, utilizamos o elemento
textarea.
<form method=“get”>
Digite sua mensagem: <br/>
<textarea name=“mensagem”
rows=“8” cols=“80”></textarea>
<input type=“submit”
value=“Enviar”/>
</form>
163