Os elementos internos de um formulário xhtml podem ser divididos em 7 tipos: input, button, select, textarea, label, fieldset e legend:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<form action='enviar.php' method="post">
 
    <fieldset>
        <legend>Dados Pessoais</legend>
        <label for="txtnome">Nome:</label>
        <input id="txtnome" type="text" />
        <label for="txtemail">Email:</label>
        <input id="txtemail" type="text" />
    </fieldset>
 
    <fieldset>
        <legend>Dados Comerciais</legend>
        <label>Área de Atuação:</label>
        <select><option>RH</option><option>Criação</option></select>
        <label for="txtcargo">Cargo:</label>
        <input type="text" id="txtcargo />
    </fieldset>
 
    <fieldset>
        <legend>Área de Sugestões</legend>
        <label>Sugestão:</label>
        <textarea rows="10" cols="10">Mensagem aqui</textarea>
    </fieldset>
 
    <input type="submit" id="enviar" value="enviar" /> 
 
</form>

Fieldset & Legend

O elemento fieldset tem a função de denominar áreas ao formulário, como exemplo área de inserção de dados pessoais, logo outro fieldset para área de informações comerciais. A Legenda serve para descrever em texto algo que identifique o fieldset.

Label

Serve para descrever ou associar a um outro elemento, utilizando o atributo for que server irá criar um ligação entre os dois elementos, quando o label for clicado o foco passara para o outro elemento da ligação, no caso abaixo a label contendo o texto Nome tem como valor ao atributo for igual á txtnome.

1
2
3
4

<form action='postar' method="post">
        <label for="txtnome">Nome:</label>
        <input id="txtnome" type="text" />
</form>

Input

O elemento input é um elemento de formulário, onde ao atributo type se agregam vários outros valores que definem outros tipos de inputs, são eles:

• radio - Seleção de uma única alternativa
• checkbox – Seleção de múltiplas alternativas
• submit – Elemento que envia informações de um formulário
• image – Elemento que envia informações de um formulário atrávez de um botão gráfico
• text – Caixa que recebe valores simples de texto
• hidden – Envia dados ocultos
• password – Entrada de linha de texto com informações ocultas em ****.
• reset – Botão que limpa os dados adicionados pelo usuário
• file – Seleciona arquivos para um tipo de envio.
• button – Botão evento, semelhante ao input mas aceita conteúdo

Select

O elemento select é destinado a exibir uma lista de opções onde muitas vezes essa lista é extensa, o elemento exibe somente uma opção e esconde todas as restantes.As opções são exibidas onde definimos a tag option.

1
2
3
4
5
6
7
8
9
10

<form action='postar' method="post">
        <label>Cargo:</label>
        <select>
           <option>Funcionário</option>
           <option>Coordenador</option>
           <option>Gerente</option>
           <option>Diretor</option>
           <option>Presidente CEO</option>
        </select>
</form>

Textarea

Este elemento é semelhante ao input type=”text”, com a diferença de ter a possibilidade de inserção de múltiplas linhas de texto. Onde em cols é definida a quantidade de colunas e rows de linhas que são exibidas antes do scroll se ativar.

1
2
3
4

<form action='postar' method="post">
        <label for="txtmsg">Deixe sua mensagem:</label>
        <textarea id="txtmsg" cols="10" rows="25"></textarea>
</form>

1 Comentário

Assine o Feed RSS dos comentários deste post | URL de TrackBack

1. 

   Luiz Alberto Comentário por 26 de julho de 2009 @ 14:17

   Ol? amigo! Eu gostaria de adicionar o seu RSS no meu Internet Explorer, mas n?o sei como fazer…podes me ajudar?

Deixe um comentário