Formulários

GDF - SECRETARIA DE ESTADO DE EDUCAÇÃO DO DF
CEP - ESCOLA TÉCNICA DE BRASÍLIA
CURSO TÉCNICO EM INFORMÁTICA
DESENVOLVIMENTO WEB I
<form>
<input type=”text” name=
value=”” />
</form>

Sumário
Formulários....................................................................................................... 5
Funcionamento de um formulário....................................................................... 5
Como criar formulários ....................................................................................... 5
Controles do Formulário.................................................................................. 6
Criando os campos do formulário....................................................................... 6
Tag <form> </form>.......................................................................................... 6
Atributos da tag <form> </form>......................................................................... 6
name: ................................................................................................................. 6
action: informa............................................................................................... 6
method: .............................................................................................................. 6
get: ..................................................................................................................... 6
post: ................................................................................................................... 6
enctype="multipart/form-data": ........................................................................... 6
Tag <input> </input> ........................................................................................ 6
Atributos da tag <input> ..................................................................................... 7
type: ................................................................................................................... 7
name: ................................................................................................................. 7
value:.................................................................................................................. 7
Campo de texto - <input type=”text” />............................................................... 8
Atributos de type=”text” ...................................................................................... 9
name: ................................................................................................................. 9
value:.................................................................................................................. 9
size:.................................................................................................................... 9
maxlength:.......................................................................................................... 9
Controle oculto - <input type=”hidden” /> ........................................................... 9
Atributos de type=”hidden” ............................................................................... 10
type: ................................................................................................................. 10
name: ............................................................................................................... 10
value:................................................................................................................ 10
Caixa de verificação - <input type=”checkbox” />............................................. 10
Atributos de type=”checkbox”........................................................................... 10
type: ................................................................................................................. 10
name: ............................................................................................................... 10
value:................................................................................................................ 10
Caixa de opção - <input type=”radio” /> ........................................................... 11
Regras aplicadas na criação de uma caixa de opção: ..................................... 11
Atributos de type=”radio”.................................................................................. 12

type: ................................................................................................................. 12
name: ............................................................................................................... 12
value:................................................................................................................ 12
checked:........................................................................................................... 12
Campo de senha - <input type=”password”> ................................................... 13
Campo para a seleção de arquivos - <input type=”file” />................................ 13
Tag <textarea> </textarea>.............................................................................. 14
Atributos da tag <textarea> </textarea> ........................................................... 14
name: ............................................................................................................... 14
rows:................................................................................................................. 14
cols:.................................................................................................................. 14
A tag <select> </select>................................................................................... 15
Agrupamento de opções - <optgroup>............................................................. 16
Lista de opções e Caixa combinada................................................................. 17
Atributos da tag <select> </select> .................................................................. 18
name: ............................................................................................................... 18
size:.................................................................................................................. 18
multiple............................................................................................................. 18
Atributos da tag <option> </option> ................................................................. 20
value:................................................................................................................ 20
selected:........................................................................................................... 20
Botões - <input type=”submit” /> e <input type=”reset” /> ................................ 21
Tipos de botões................................................................................................ 21
Button:.............................................................................................................. 21
Submit: ............................................................................................................. 21
Reset:............................................................................................................... 21
Atributos de <type=”submit” /> ......................................................................... 21
type: ................................................................................................................. 21
name: ............................................................................................................... 21
value:................................................................................................................ 21
As tags < label >, < legend > e < fieldset > ...................................................... 22
A tag <label> </label> ...................................................................................... 22
Atributos da tag <label> </label>...................................................................... 22
for:.................................................................................................................... 22
accesskey:........................................................................................................ 22
class: ................................................................................................................ 22
dir: .................................................................................................................... 22
id: ..................................................................................................................... 22
lang: ................................................................................................................. 22

style:................................................................................................................. 22
title:................................................................................................................... 22
xml:lang:........................................................................................................... 22
As tags <fieldset> e <legend>.......................................................................... 22
Comandos, funções e valores dos controles de formulários .................... 25
Referências..................................................................................................... 26

5
Formulários
Formulário são a base para que os sites realizem cadastros, pesquisas, envio de
comentários, etc., aumentando o poder de interação com os visitantes dos sites.
Um formulário HTML é uma página Web que contém, além de texto, elementos
especiais chamados controles, representados por caixas de checagem, botões, caixas
de seleção, campos de textos, etc.
Os formulário são criados em HTML e possuem no mínimo uma campo entrada de
dados e um botão para enviar as informações digitadas no campo.
Os formulário servem como contêineres para os vários controles que o compõem.
Funcionamento de um formulário
Os usuários preenchem os campos do formulário submetendo-o, em seguida, a algum
agente de processamento. Neste momento, todas as informações fornecidas são
enviadas a um programa escrito especialmente para processar esses dados de
acordo com alguma necessidade e especificação.
Em alguns casos os dados são gravados em um Banco de Dados, em outros casos
uma nova página é construída, em outros ainda as informações são encaminhadas
via e-mail.
Como criar formulários
Para inserir um formulário usamos a tag <form> </form>.
Os formulários podem conter diversos campos onde o usuário poderá inserir as
informações solicitadas.
Exemplo:
<form>
<input type="text" />
<input type="submit" value="Enviar" />
</form>

6
Controles do Formulário
Quando os dados de um formulário são preenchidos e o botão “Enviar” é acionado
esses dados são enviados e o programa definido na propriedade “action” recebe os
valores informados nos campos existentes no formulário (nome e e-mail) e os
armazena.
Criando os campos do formulário
Existem vários tipos de campos e elementos que podem ser utilizados na construção
de um formulário.
A seguir detalhamos cada um deles.
Tag <form> </form>
Informa o início e o término de um formulário. Todas as demais tags devem estar entre
essas tags.
Atributos da tag <form> </form>
name: é o nome que será dado ao formulário; identifica o formulário dentro da página.
action: informa o arquivo que será executado para processar as informações
enviadas e o local (URL) do servidor e do programa que vai processar os dados do
formulário.
Após os dados de um formulário serem preenchidos e o botão “Enviar” é acionado o
servidor recebe, processa e armazena os dados para uso posterior, podendo enviar
por e-mail ou realizar alguma outra operação.
Para esse procedimento ocorrer é necessário que se defina na tag <form> a
propriedade “action” e a URL do programa ou página que completará a operação.
method: informa o método de envio de informações.
O método de envio de informações do formulário pode ser do tipo:
get: método que envia as variáveis digitadas pelo usuário pela URL, ou seja,
podemos ver as variáveis sendo passadas pela URL da página de destino. Não é
muito aconselhável o uso do método GET, pois ele expõe os nomes e os valores das
variáveis.
post: método que envia as variáveis digitadas pelo corpo da página, sendo
completamente transparente para o usuário. É o método mais aconselhável.
enctype="multipart/form-data": usado no caso de upload de arquivos.
Tag <input> </input>
A tag <input> define um campo de entrada do usuário.
A tag <input> é uma tag vazia usada para criação de vários tipos de controle.
A tag <input> não possui fechamento como a grande parte das tags HTML, então o
fechamento é indicado pela barra ao final da tag <input ... />.
A sintaxe da tag <input> é semelhante para todos os controles definidos por essa tag,
sendo alguns atributos comuns a todos os controles.

7
Atributos da tag <input>
type: A tag <input> informa o tipo de controle que será criado, podendo ser do tipo:
 Caixa de texto - text.
 Controle oculto - hidden.
 Caixa de verificação - checkbox.
 Caixa de opção - radio.
 Menu de opção - select.
 Botões - button, submit e reset.
name: Define um nome interno para o controle.
É através deste nome que a aplicação no servidor identificará os diversos dados
informados no formulário, portanto, é sempre recomendado dar ao controle um nome
que tenha uma relação com a informação que será inserida nele.
value: Este atributo recebe e armazena as informações inseridas nos controles para
que estas sejam lidas e processadas pela aplicação no servidor.
O atributo “value” de uma caixa de texto é preenchido quando o usuário digita algum
dado na mesma, por isso, caso deseje que a caixa de texto apareça sem nenhuma
informação prévia, declare-a como vazia, colocando após o sinal de igual (=), duas
aspas da seguinte forma:
<form>
<input type="text" name="nome" value="" />
</form>
Sintaxe de controles da classe input:
<input type="tipo_controle" name="nome_controle" value="vazio_ou_va-
lor_controle" />
Além dos atributos apresentados acima, alguns controles possuem também seus
atributos específicos, a fim de definirem as suas particularidades.
Exemplo:
<form action="http://www.site.com.br/processa.asp">
Dados pessoais
Nome:<br/>
<input type="text" name=”nome” value=”” /><br/>
E-mail:</br>
<input type="text" name=”email” value=”” /><br/>
Cargo:<br/>

8
<input type="text" name="cargo" value="administrador" size="40" />
<br/><br/>
<input type="submit" value="Enviar" />
</form>
Campo de texto - <input type=”text” />
Este controle permite a entrada de dados, digitados em uma única linha e deve ser
usado quando forem solicitadas informações como: nome, endereço, bairro, cidade,
CEP, telefone, e-mail etc.
Dica: O texto usado para descrever a informação que será inserida em um controle, deverá
estar bem próximo ao mesmo, posicionado acima ou à sua esquerda.
Este posicionamento é facilmente conseguido com a utilização de tabelas, no entanto
a recomendação é utilizar a nova semântica usando a tag <label></label> com
formatação via CSS.
Um campo de texto é criado com a tag <input> e definindo seu tipo para texto com o
comando type, e também nomeando-o com o comando name.
Exemplo:
<form>
Curso:
<input type="text" name="curso" value="" size="40" maxlength="50" />
</form>

9
Atributos de type=”text”
name: no atributo name declaramos que o nome interno da caixa de texto será
"curso".
value: no atributo value não inserimos nenhum valor para que a caixa de texto seja
carregada vazia.
Caso queiramos que seja apresentado algum valor inicial, devemos inseri-lo entre aspas.
size: define o tamanho no qual a caixa de texto será apresentada na página. Neste
caso, definimos seu tamanho em "40" caracteres.
maxlength: define a quantidade de caracteres que serão aceitos pela caixa de texto.
Neste caso, serão aceitos até "50" caracteres mesmo que na tela sejam visíveis
somente "40".
Exemplo:
<form>
Nome do curso:<br/>
<input type="text" name="curso" value="Informe o nome do curso"
size="40" maxlength="50" />
</form>
Controle oculto - <input type=”hidden” />
Inserimos um controle oculto no formulário, para que determinadas informações sejam
enviadas ao servidor, sem que o usuário possa visualizá-las na apresentação da
página.
O atributo hidden serve para dar informações extras à página que processará os resultados
do preenchimento, por exemplo, o IP, sistema operacional etc.
Exemplo:
<input type="hidden" name="descrição" value="cadastro para receber
novidades sobre o site" />

10
Atributos de type=”hidden”
type: no atributo type definimos a criação de um controle oculto "hidden".
name: no atributo name informamos que o nome interno do controle oculto será
"descrição".
value: no atributo value inserimos a informação que será enviada ao servidor para
ser processada.
O ideal é que o controle oculto seja inserido no topo do formulário, logo após a sua
abertura.
Num site em que houver mais de um formulário é recomendado inserir em cada um
deles, um controle oculto com a sua descrição para que ao receber as informações
no seu e-mail, por exemplo, você saiba a que elas se referem.
Caixa de verificação - <input type=”checkbox” />
A controle do tipo “checkbox” é usado para criar opões para o usuário escolher. Nessa
opção de controle é possível ao usuário selecionar mais de uma opção dentre as
apresentadas no formulário.
Seu uso é comum em situações de pesquisa sobre interesses pessoais do usuário.
Exemplo:
<input type="checkbox" name="informações" value="sim" />
Atributos de type=”checkbox”
type: no atributo type definimos que o controle criado será uma caixa de verificação
"checkbox".
name: no atributo name definimos o nome interno da caixa de verificação.
value: no atributo value definimos qual deverá ser a informação enviada ao servidor
caso o usuário aceite a condição que lhe foi proposta, marcando a caixa de
verificação.
Para que a caixa de verificação apareça marcada inicialmente, devemos usar o
atributo específico “checked”.
<input type="checkbox" name="informações" value="sim" checked />
Caso omitamos o atributo “value” e o usuário marque a caixa de verificação, o valor
enviado ao servidor será "on" e caso a caixa de verificação não seja marcada,
nenhuma informação será enviada ao servidor.

11
Caixa de opção - <input type=”radio” />
O controle tipo “radio” disponibiliza opções para que o usuário selecione apenas uma.
Uma caixa de opção é um controle que disponibiliza para o usuário, várias opções e
destas, o mesmo poderá selecionar apenas uma.
A sintaxe de uma caixa de opção:
<input type="radio" name="nome_do_grupo_de_opções" value="checar" />
Regras aplicadas na criação de uma caixa de opção:
Cada nova opção adicionada deve ser antecedida pela tag usada na criação deste
controle.
Exemplo:
<form>
- Opção 1<br/>
- Opção 2<br/>
- Opção 2<br/>
- Opção 4
</form>

12
O botão da opção selecionada gera um par name/value que será enviado ao servidor.
Por uma questão de acessibilidade, as opções devem estar dispostas verticalmente
(uma por linha), para que os programas leitores de tela possam identificá-las
individualmente. Para tanto, ao final da descrição de cada opção, utilize a tag <br/> -
quebra de linha.
Todas as opções pertencentes a uma mesma caixa de opção, devem receber a mesma
descrição no atributo name, para que sejam agrupadas em um único controle.
Exemplo:
<input type="radio" name="classificação" value="Ótimo" /> Ótimo<br>
<input type="radio" name="classificação" value="Bom" /> Bom <br>
<input type="radio" name="classificação" value="Regular" checked />
Regular <br>
<input type="radio" name="classificação" value="Ruim" /> Ruim <br>
<input type="radio" name="classificação" value="Péssimo" />Péssimo
Atributos de type=”radio”
type: o atributo type define que o controle criado será uma caixa de opção "radio".
name: o atributo name define um nome interno para o controle e que deverá ser
inserido em todos os itens que compõem o grupo da caixa de opção.
value: no atributo value definimos a informação em que cada item da caixa de opção
enviará ao servidor quando selecionado.
checked: o atributo checked define qual das opções estará selecionada inicialmente.
Perceba que na demonstração acima, nós determinamos que a opção que deverá
aparecer selecionada inicialmente é a que contém a descrição "regular".

13
Campo de senha - <input type=”password”>
A única diferença entre um campo de senha e um de texto é que no campo de senha
os caracteres são protegidos, ou seja, o navegador exibe asteriscos ou bolinhas em
vez dos caracteres. Para criar um campo de senha defina o valor do comando type
para password.
Exemplo:
<form>
<input type="password" name="senha_do_usuario"/>
</form>
Campo para a seleção de arquivos - <input type=”file” />
Esse tipo de campo é utilizado para a seleção de arquivos no computador, e é criado
definindo o tipo seu tipo para file.
Exemplo:
<form>
<input type="file" name="imagem"/>
</form>
No campo tipo “file” o comando value não é aplicado.
Caso se deseje utilizar este tipo de campo em um formulário devemos definir um
comando na tag <form> para que seja possível o envio do arquivo. O comando é
enctype, esse comando deve assumir o valor de multipart/form-data.
Exemplo:
<form action=” ” method=”post” enctype="multipart/form-data">
<input type="file" name="arquivo"/>
</form>

14
Tag <textarea> </textarea>
A classe textarea permite a criação de uma área de texto para o usuário escrever
comentários, mensagens etc.
O controle textarea, difere-se do controle caixa de texto "text" da classe input, por
permitir ao usuário a possibilidade de digitar uma informação que abranja mais de
uma linha de texto.
Áreas de texto são ideais para situações que exijam um espaço maior para a entrada
de dados tipo texto, como formulários de e-mail, campos para observações,
comentários, opiniões etc. por comportarem uma quantidade de texto maior que os
campos de texto.
Para a criação de um controle textarea é utilizado uma tag em par -
<textarea>...</textarea>, possuindo partes referentes à sua abertura e ao seu
fechamento.
Exemplo:
<textarea name="nome" rows="n_linhas" cols="n_colunas"> valor_inicial
</textarea>
Atributos da tag <textarea> </textarea>
name: o atributo name define o nome interno para o controle.
Importante: O nome interno de um controle deve ser sempre condizente com a informação
que será inserida no mesmo.
rows: o atributo rows define a quantidade de linhas para o controle textarea.
cols: o atributo cols definimos a quantidade de colunas para o controle textarea.
A letra “n” dos valores citados no exemplo acima, deve ser substituída pelo número
que irá definir a quantidade de linhas e colunas desejadas.

15
Veja:
O texto inicial contido no campo textarea será substituído pelo texto inserido pelo
usuário, caso ele deseje escrever seus próprios comentários.
Caso queiramos que o controle textarea não apresente nenhuma informação inicial,
basta que a tag seja fechada imediatamente após a definição da parte referente à sua
abertura.
Assim:
<textarea name="opiniões" rows="10" cols="50"></textarea>
A tag <select> </select>
A tag <select> é usada como queremos criar um menu de opções e tem a função
semelhante aos botões radio, pois permitem a escolha de uma única opção.
Sua utilização é recomendada quando se tem um número muito grande de opções de
resposta.
Para criar um menu dropdown utilize a tag <select> </select> e para criar cada uma
das opções utilize a tag <option> </option>.
<form>
<form action="" method="post" name="form1" >

16
Qual é o seu estado? <br />
<select class="selecao">
<option value="">Selecione</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option>...</option>
</select><br/>
</form></form>
Agrupamento de opções - <optgroup>
É possível agrupar os itens de um menu de opções do tipo dropdown em formulários,
o que possibilita a apresentação dos seus itens em grupos e com quantidades
preestabelecidas permitindo ao usuário a seleção de um ou mais itens entre os
disponíveis no controle.
Para agrupar os itens de um menu de opções usamos a tag <optgroup> dentro da
tag <select>.
A tag <optgroup> é acompanhada pelo atributo label que vai permitir criar
subgrupos dentro do menu, identificando cada subgrupo do menu de opções.
Exemplo:
<form>
<select name="nomeMenu">
<optgroup label="Grupo 1">
<option value="valor1">Opção 1</option>

17
</optgroup>
</optgroup>
</select>
</form>
O controle caixa combinada possibilita inicialmente a visualização apenas do item que
foi previamente selecionado.
Para ter acesso aos demais itens é necessário abrir a caixa combinada para a seleção
do item desejado.
Diferentemente da caixa de opção "radio" da classe input, utiliza-se os controles da
classe select, para situações que exijam um número maior de opções, ou quando
houver a necessidade do usuário realizar uma múltipla seleção entre os itens
disponibilizados em uma lista.
Lista de opções e Caixa combinada
A diferença básica entre a sintaxe utilizada para a criação de uma lista ou de uma
caixa combinada, está relacionada com a definição da quantidade de itens que serão
exibidos simultaneamente e com a capacidade de permitir ou não, a múltipla seleção
dos itens inseridos em cada um destes controles.
Exemplo:
<form>
<select name="nome_controle" size="n_itens"> - Parte referente à
abertura da tag select.
<option value="valor_item1" selected> Descrição da primeira opção

18
<option value="valor_item2"> Descrição da segunda opção
<option value="valor_item3"> Descrição da terceira opção
<option value="valor_item4"> Descrição da quarta opção
<option value="etc."> etc.
</select> - Parte referente ao fechamento da tag select.
</form>
A tag <select> delimita a abertura e o fechamento de uma lista ou caixa combinada.
Dentro da tag select, inserimos a tag <option> para cada novo item adicionado ao
controle.
Atributos da tag <select> </select>
name: define nome interno do controle.
size: define a quantidade de itens que serão exibidos simultaneamente pelo controle
criado.
multiple: A inserção deste atributo permite a seleção de múltiplos itens em uma
lista.
Quando for necessário utilizar o atributo multiple, permita que o usuário visualize um conjunto
de itens simultaneamente, para que o mesmo possa verificar as opções anteriormente
selecionadas nesta lista.
Por padrão o menu do tipo dropdown exibe apenas uma opção visível.
No exemplo abaixo, sem clicar no menu vemos apenas "Opção 1".

19
Podemos definir na tag <select> o atributo size que permite delimitar quantas opções
- tags <option>, serão exibidas, ou seja, quantas linhas do menu vão aparecer.
Exemplo:
<form>
<select name="nomeMenu" size="7">
</optgroup>
</optgroup>
</select>
</form>
No exemplo acima, há 5 linhas com as opções e mais 2 linhas com os nomes dos
grupo, totalizando um total de 7 linhas no menu.
No atributo size foi definido o valor 7 para que as 7 linhas do menu sejam exibidas.

20
Caso se escolha um número menor de linhas para serem exibidas, automaticamente
uma barra de rolagem será criada.
Exemplo:
Definindo-se o atributo size="5":
<form>
<select name="nomeMenu" size="7">
</optgroup>
</optgroup>
</select>
</form>
Caso o atributo size seja omitido, ele assumirá o seu valor padrão "1" e o controle
criado será uma caixa combinada.
Caso o atributo size receba como valor um número maior do que "1", o controle criado
será uma lista.
Atributos da tag <option> </option>
value: define a informação que cada item enviará ao servidor, caso o mesmo seja
selecionado.
selected: define entre os itens inseridos, qual aparecerá previamente selecionado.

21
Botões - <input type=”submit” /> e <input type=”reset” />
O botão é um tipo de controle utilizado para executar uma determinada ação, com os
dados inseridos nos demais controles do formulário.
Tipos de botões
Na classe “input” existe três tipos de botões disponíveis:
Button: Este tipo de botão não envia automaticamente as informações do formulário
para o servidor. É comumente utilizado quando o processamento das informações é
realizado no lado cliente, através das linguagens de script locais, embutidas nos
próprios navegadores como: JavaScript e VBScript.
Submit: Este tipo de botão ao ser pressionado, envia automaticamente todas as
informações inseridas no formulário para que estas possam ser processadas por uma
aplicação no servidor.
Reset: Este tipo de botão ao ser pressionado, limpa todos os campos existentes no
formulário, resgatando as suas definições iniciais.
A sintaxe utilizada para a criação de botões, é idêntica independentemente do seu
tipo.
Exemplos:
<input type="submit" name="enviar" value="Enviar" />
<input type="reset" name="limpar" value="Limpar" />
Atributos de <type=”submit” />
type: o atributo type definimos o tipo de botão "submit" ou "reset".
name: o atributo name é utilizado para definir os nomes internos para os botões
criados.
value: com o atributo value definimos qual será o rótulo caption apresentado pelos
botões.
Nos exemplos acima, o botão do tipo "submit" apresentará como descrição a palavra
"Enviar" e o botão do tipo "reset" apresentará como descrição a palavra "Limpar". A
descrição inserida em um botão deverá condizer com a ação que o mesmo executará
ao ser pressionado.

22
As tags < label >, < legend > e < fieldset >
Nomeando e agrupando campos de um Formulário
A tag <label> </label>
A tag <label> define um rótulo para um elemento input através do atributo “id”, veja
abaixo no exemplo, dois campos de texto com rótulos indicados pela tag label.
Exemplo:
<form>
<label for="nm">Nome</label>
<input type="text" name="nome" id="nm" />
<br />
<label for="snm">Sobrenome</label>
<input type="text" name="sobrenome" id="snm" />
</form>
O elemento <label> não faz nada de especial mas, melhora a usabilidade para
usuários de mouse, pois quando a tag <label> é clicada, aciona o campo ao qual a
label se refere para entrada de dados.
Atributos da tag <label> </label>
for: o atributo "for" da tag <label> deve referenciar o atributo "id" da tag da qual é o
rótulo.
accesskey: Indica um caractere de atalho de teclado para acessar um elemento.
class: Indica um nome de classe para um elemento
dir: Indica a direção do texto para o conteúdo de um elemento. As opções são rtl,ltr
ou ltr,rtl (rigth to left ou left to right, respectivamente).
id: Indica um palavra que será um identificador único para um elemento.
lang: Indica o código de linguagem para o conteúdo de um elemento.
style: Indica um estilo (CSS) em linha para um elemento.
title: Indica informação extra sobre um elemento
xml:lang: Indica código de linguagem para um documento XHTML
As tags <fieldset> e <legend>
A tag <fieldset> é usada para agrupar elementos relacionados dentro de um
formulário, desenhando uma borda em torno desses elementos.
Ela é especialmente útil na organização de formulários extensos.
A tag <legend> é usada para definir um título para o bloco agrupado pelo <fieldset>.

23
Exemplo:
<fieldset>
<form>
<label for="nm">Nome</label>
<input type="text" name="nome" id="nm" />
<br />
<label for="snm">Sobrenome</label>
<input type="text" name="sobrenome" id="snm" />
</form>
</fieldset>
É possível estilizar os elementos <fieldset> e <legend> por meio de CSS.
Observe a seguir uma estilização inline para os elementos citados.
<fieldset style="width:250px; border:1px solid #ff0000;">
<legend style="font:bold 12pt arial; color:#0000ff">Dados
pessoais</legend>
<form>
<label for="nome">Nome</label><br/>
<input type="text" name="nome" id="nome" />
<br />
<label for="sobrenome">Sobrenome</label><br/>
<input type="text" name="sobrenome" id="sobrenome" />
</form>
</fieldset>

25
Comandos, funções e valores dos controles de formulários
Comandos Funções Valores
name
Atribui um nome ao campo.
É muito importante a
utilização deste comando,
pois é através deste nome
atribuído a cada campo, que
poderemos capturar os
dados e manipulá-los.
Qualquer nome que não inicie com
símbolos ou números, e que não
contenha caracteres especiais (ç), nem
acentos ou espaços.
value
Atribui um valor predefinido
ao campo.
Qualquer tipo de valor. Por exemplo,
frases, números entre outros.
maxlength
Determina um valor máximo
de caracteres que um campo
irá suportar.
Números inteiros maiores que zero.
size
Determina o tamanho do
campo em caracteres.
rows
Determina a quantidade de
linhas em uma área de texto.
cols
Determina a quantidade de
colunas em uma área de
texto.
disabled
Desabilita um campo ou área
de texto, impossibilitando ao
usuário inserir dados.
Valor disabled, em português desativado.
checked
Este comando é aplicável a
caixas de seleção e a botões
do tipo rádio, e quando for
aplicado, a opção já aparece
selecionada.
Valor checked, em português
verificado/marcado/selecionado.
type
Define o tipo do campo ou
elemento do formulário.
button (botão), checkbox (caixa de
seleção), file (campo para a seleção de
arquivos no PC), password (campo de
senha), radio (botão radio), reset (botão
que limpa o formulário), submit (botão
que envia o formulário), text (campo de
texto).

Referências
A tag label: Disponível em: http://www.codex.wiki.br/Html/TagLabel. Acesso em
19/06/2016.
A tag legend. Disponível em: http://www.codex.wiki.br/Html/TagLegend. Acesso em
19/06/2016.
Basso. Maik. Construindo formulários em HTML. Disponível em
http://www.maikbasso.com.br/2012/01/construindo-formularios-em-
html.html#ixzz4C4DoIYVt. Acesso em 19/06/2016.
Formulários. Disponível em: http://www.codex.wiki.br/html/Formularios. Acesso em
19/06/2016.
HTML com acessibilidade. Disponível em: http://www.fundacaobradesco.org.br/vv-
apostilas/cursoHTML/A_Classe_input.html. Acesso em 19/06/2016.
http://www.htmlprogressivo.net/p/formularios-em-html.html. Acesso em 19/06/2016.
http://www.infowester.com/tagsdesconhecidas.php. Acesso em 19/06/2016.
https://developer.mozilla.org/pt-BR/docs/HTML/Introduction. Acesso em 19/06/2016.
Silva, Osmar. J. HTML 4.0 e XHTML 1.0: Domínio e Transição. 2ª edição. São Paulo:
Editora Érica, 2007. 345 p.

Formulários

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (13)

Semelhante a Formulários

Semelhante a Formulários (20)

Formulários