Formulários são usados para coletar informações de usuários de uma determinada pagina. Os formulários tem diversos elementos como por exemplo texto, senha, mensagem e etc.
Todo formulário começa com o elemento <form> e termina com </form> e dentro desse elemento temos os seguintes atributos: id, action, method, enctype e label.
- id: Define um "nome" para um elemento
- action: Endereço da aplicação para onde o formulário e seus dados serão enviados
- method: Método utilizado para envio do formulário
- enctype: Tipo de codificação dos dados do formulário
- label: Rótulo associado a um controle de formulário
- accesskey: Caractere correspondente à tecla de atalho para acesso ao elemento
Dentro do elemento <label> temos os seguintes atributos: accesskey e for.
- accesskey: Caractere correspondente à tecla de atalho para acesso ao elemento
- for: Associa o rotulo a um elemento através do id
O elemento <input> serve para controlar um campo com entrada de dados do formulário e seus atributos são: type, id, name, accesskey, alt, checked, disabled, maxlength, readonly, size, src, tabindex, value, max, min e step.
- type: Tipo do controle e temos varios tipos por exemplo
text = caxa de texto de uma única linha
date = torna possível o usuário escolher uma data
email = caixa de email e que reconhece se o usuário coloco um email valido ou não
number = campo numérico
range = controle numérico onde pode definir um intervalo entre um numero e outro
password = funciona como text, mas os caracteres digitados serão representados por asteriscos ('*')
hidden = controle oculto
file = controle de seleção de arquivos
checkbox = caixa de verificação/confirmação (permite seleções múltiplas)
radio = botão de opção (não permite seleções múltiplas)
button = botão
image = funciona como submit mas utiliza uma imagem)
submit = botão para enviar os dados do form
reset = botão para restaurar o conteúdo original do form - id: Define um nome para o elemento
- name: Nome do controle que o identifica ao enviar o formulário
- accesskey: Caractere correspondente à tecla de atalho para acesso ao elemento
- alt: Texto alternativo
- checked: Indica que um 'checkbox' ou um 'radio' estará previamente marcado
- disabled: Desabilita o controle de modo que o usuário não poderá interagir com ele
- maxlength: Número máximo de caracteres que o usuário pode inserir em um campo 'text' ou 'password’
- readonly: Indica que o controle será utilizado somente para leitura, impedindo alterações em seus valores
- size: Tamanho inicial do controle (Pode ser expresso em pixels. Quando type="password" ou type="text" o tamanho indica o número de caracteres)
- src: Quando type="image", indica a localização da imagem
- tabindex: Ordem de navegação na página quando se utiliza a tecla TAB
- value: Valor previamente definido
- max: Valor máximo
- min: Valor minimo
- step: Define intervalos entre os números
O elemento <select> serve para controle de uma lista de opções possíveis de seleção e seus atributos são: id, multiple, disable, size, tabindex.
- id: Define um nome para o elemento
- multiple: Habilita a seleção com múltiplas opções
- disable: Desabilita o controle de modo que o usuário não poderá interagir com ele
- size: Número de linhas em que as opções serão visíveis no controle
- tabindex: Ordem de navegação na página quando se utiliza a tecla TAB
O elemento <option> serve para controlar o que pode ser selecionado no controle select e seus atributos são: value, selected, label e disabled.
- value: Valor correspondente à opção e que será atribuído ao controle
- selected: Opção selecionada previamente
- label: Rótulo vinculado à opção
- disabled: Desabilita o controle de modo que o usuário não poderá interagir com ele
O elemento <optgroup> serve para grupamento lógico dos elementos option e seus atributos são: disabled e label.
- disabled: Desabilita o controle de modo que o usuário não poderá interagir com ele
- label: Rótulo com legenda para o grupo de opções
O elemento <textarea> serve para controlar um campo de texto de várias linhas e seus atributos são: id, tabindex, accesskey, cols, rows e readonly.
- id: Define um nome para o elemento
- tabindex: Ordem de navegação na página quando se utiliza a tecla TAB
- accesskey: Caractere correspondente à tecla de atalho para acesso ao elemento
- cols: Número de colunas para a área de inserção de texto (uma coluna corresponde ao tamanho médio de um caractere)
- rows: Número de linhas para a área de inserção de texto
- readonly: Indica que o controle será utilizado somente para leitura, impedindo alterações em seus valores
O elemento <button> é um botão clicável e seus atributos são: id, accesskey, disabled, tabindex, type e value.
- id: Define um nome para o elemento
- accesskey: Caractere correspondente à tecla de atalho para acesso ao elemento
- disabled: Desabilita o controle de modo que o usuário não poderá interagir com ele
- tabindex: Ordem de navegação na página quando se utiliza a tecla TAB
- type: Tipo do botão
button = genérico
submit = para envio do formulário, submetendo os dados
reset = para restaurar o conteúdo original do formulário - value: Valor previamente definido
O elemento <fieldset> serve para agrupamento de controles por temática semântica e o elemento <legend> é a legenda do fieldset e tem o atributo accesskey.
- accesskey: Caractere correspondente à tecla de atalho para acesso ao elemento
Exemplo de um formulario
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<body>
<form id="cadastro" action="cadastrar.php" method="post">
<fieldset>
<legend>Formulário de Contato</legend>
<fieldset>
<legend>Dados Pessoais</legend>
<label for="nome">Nome:*</label>
<input id="nome" type="text" required /><br />
<label for="endereco">Endereço:*</label>
<input id="endereco" type="text" required />
<label for="numero">Nº:*</label>
<input id="numero" type="text" required />
<label for="complemento">Complemento</label>
<input id="Complemento" type="text" /><br />
<label for="dd"> Telefone:</label>
(<input type="number" id="dd" />)
<label for="telefone"> </label>
<input type="number" id="telefone" /> <br />
</fieldset>
<fieldset>
<legend>Dados do Curso</legend>
<label for="unidade">Unidade:</label>
<input list="list_unidade" id="unidade" />
<datalist id="list_unidade">
<option value="Carapicuiba">
<option value="Barueri">
<option value="Osasco">
<option value="São Paulo">
</datalist><br />
<label for="curso ">Cursos:</label>
<select id="curso">
<option>---Selecione um curso---</option>
<optgroup label="Cusos De TI">
<option> Análise de Sistemas</option>
<option> Jogos Digitais</option>
<option>Sistemas para Internet</option></optgroup>
<optgroup label="Outros Cursos">
<option> Logística</option>
<option> Secretariado</option>
</select>
</fieldset>
<label for="mensagem">Mensagem:</label>
<textarea cols="20" rows="5" id="mensagem">Digite seu texto aqui</textarea><br />
<input type="submit" value-"Enviar" />
<input type="reset" value="Redefinir" />
</fieldset>
</body>
</html>