Formulários HTML são geralmente usados para facilitar a comunicação entre os internautas que acessam um determinado site e os administradores do mesmo.
Com formulários, é possível criar salas de bate-papo, livros de visita, enquetes, e muito mais.
Todo Formulário HTML é composto por controles que podem ser “Botões”, “Caixas de Textos”, “Caixas de Senha”, etc. São diversos tipos de controles que podem ser utilizados.
FORM e atributos relativos
A Tag <form> serve para informar o início e o término de um formulário, ou seja, é necessário que todos os controles do formulário fiquem posicionados entre a abertura e o fechamento da Tag <form> para que os dados sejam enviados corretamente.
Abaixo falaremos sobre esses controles:
ID: Define um nome para o formulário.
ACTION: Define para onde será enviado o conteúdo do formulário.
METHOD: Especifica o método de envio HTTP dos dados do formulário, são eles GET e POST.
ENCTYPE: Especifica como os dados do formulários serão encriptografados quando enviados para o servidor, este atributo somente será usado quando o método de envio for POST.
Ex.: <form id="nome_do_formulário" action="url_de_destino" method="metodo_de_envio" enctype="modo_de_encriptografia">
</form>
LABEL
A tag <label> define um rótulo para um elemento <input>.
ACCESSKEY: Define uma tecla de atalho para ativar um elemento.
FOR: Representa uma ligação da tag label com um campo.
Ex.: <form>
<label for="homem" accesskey="h">Homem</label>
<input type="radio" name="sexo" id="homem" value="homem">
<label for="mulher" accesskey="m">Mulher</label>
<input type="radio" name="sexo" id="mulher" value="mulher">
</form>
INPUT
A tag <input> especifica um campo de entrada onde o usuário pode inserir dados. Elementos <input> são usados dentro de uma tag <form>. Um campo de entrada pode variar de muitas formas, dependendo do tipo de atributo:
TYPE: define como será o campo de interação (um texto, por exemplo), abaixo algumas interações que podem ser atribuídas:
TEXT: Especifica o tipo que o elemento terá.
DATE: Renderiza uma pequena janela que torna possível que o usuário escolha uma data.
EMAIL: Esse atributo faz com que o campo de e-mail seja automaticamente validado verificando se há ou não o simbolo @ assim validando como um e-mail valido.
NUMBER: O campo que contem esse iten como type permite que o usuário digite apenas números no campo.
RANGE: Este renderiza uma pequena barra que com números de "escala" podendo assim facilitar na escolha de um valor apenas arrastando o mouse.
PASSWORD: Definindo esse atributo os caracteres digitados no campo são automaticamente mascarado.
HIDDEN: Pode ser utilizado quando é necessário gravar um dado que não seja preciso o usuário digitar.
FILE: Renderiza um botão para que o usuário navegue nas pastas do seu computador para que ele escolha um arquivo a ser enviado ao servidor.
CHECKBOX: Define uma caixa de seleção sendo possível fazer múltiplas escolhas.
RADIO: Define itens para seleção de maneira que não pode se escolher mais de um dado.
BUTTON: Renderiza um botão que o usuário pode definir alguma ação quando ele é clicado.
IMAGE: Define uma imagem como botão.
SUBMIT: Cria um botão de envio dos dados do formulário.
RESET: Redefine tudo o que foi escrito no formulário.
ID: Esse atributo é usado para identificar o conteúdo da tag.
NAME: Usado como o ID para identificar o conteúdo da tag, muito usado no HTML4
ACCESSKEY: Define uma tecla de atalho para a input na qual é utilizado.
ALT: Esse atributo define um nome alternativo para a imagem caso o usuário por algum motivo não conseguir visualiza-la.
CHECKED*: Pré-define um item em uma lista.
DISABLE: Desativa um elemento input.
MAXLENGTH**: Define o numero máximo para um campo.
READONLY: Define um campo somente de leitura.
SIZE**: Define o tamanho do campo.
SRC***: Especifica um endereço de uma imagem para ser utilizado em um botão de envio.
TABINDEX: Define uma ordem quando o sistema de navegação é feito por abas.
VALUE: Especifica o valor em uma tag input.
MAX****: Define um valor máximo para a tag.
MIN****: Define um valor minimo para a tag.
STEP****: Define uma regra de dados numéricos a serem inclusos no formulário.
* Para input type radio ou checkbox.
** Para input type text ou password.
*** Para input type image.
**** Para input type number ou range.
SELECT
A tag <select> é usada para que o usuário selecione um dado a ser adicionado ao banco de dados do servidor por uma caixa suspensa, veja alguns do principais atributos desta tag.
ID: Esse atributo é usado para identificar o conteúdo da tag.
MULTIPLE: Quando presente ele define que vários itens pode serem selecionados.
DISABLE: Desativa um elemento select.
SIZE: Especifica o numero de itens visíveis em uma caixa de seleção.
TABINDEX: Define uma ordem quando o sistema de navegação é feito pela tecla TAB.
Ex.: <select id="identificação_do_campo" size="determina_a_espessura">
<option>Seleção 1</option>
<option>Seleção 2</option>
<option>Seleção 3</option>
</select>
OPTION
O tag <option> define uma opção em uma lista de seleção. Elas podem ir dentro das tags SELECT ou DATALIST. Essa tag pode ser usada sem atributos, más geralmente precisa conter o atributo VALUE para indicar o que será enviado para o servidor, veja alguns do principais atributos desta tag.
VALUE: Especifica o valor que sera enviado para o servidor.
SELECT: Especifica um item da lista pré-selecionado.
LABEL: Especifica um resumo do item da lista.
DISABLE: Desativa um elemento option.
Ex.: <select id="identificação_do_campo" size="determina_a_espessura">
<option value="opcao1">Seleção 1</option>
<option value="opcao2" selected>Seleção 2</option>
<option value="opcao3">Seleção 3</option>
</select>
OPTGROUP
A tag <optgroup> é usado para agrupar itens relacionados de uma lista de seleção, se você fará uma longa lista de opções, o agrupamento torna sua caixa de seleção mais atrativa, veja alguns do principais atributos desta tag.
DISABLE: Desativa uma categoria da lista.
LABEL: Especifica itens da mesma categoria.
Ex.: <select>
<optgroup label="Carnes">
<option value="picanha">Picanha</option>
<option value="coxao">Coxão Duro</option>
</optgroup>
<optgroup label="Molhos" disabled>
<option value="rose">Roseé</option>
<option value="madeira">Madeira</option>
</optgroup>
</select>
TEXTAREA
A tag <textarea> define um controle de campo de digitação de texto multi-linhas. Essa tag pode ser composta por um numero ilimitado de caracteres, e renderiza o texto para o usuário em um campo com o tamanho inicial definido pelo desenvolvedor, sendo especificados por números de colunas e linhas ou por altura e largura, mais isso é geralmente feito por CSS, mais isso veremos outra hora, vejamos agora alguns atributos da tag <textarea>.
ID: Esse atributo é usado para identificar o conteúdo da tag.
TABINDEX: Define uma ordem quando o sistema de navegação é feito por abas.
ACCESSKEY: Define uma tecla de atalho para o campo.
COLS: Define um numero de colunas padrão para a área.
ROWS: Define um numero de linhas padrão para a área.
READONLY: Define que a área é apenas para leitura do conteúdo.
Ex.: <textarea id="nome_do_campo" accesskey="tecla_de_atalho" cols="tamanho_em_colunas" rows="tamanho_em_linhas" >
</textarea>
BUTTON
A tag <button> define um botão clicável, dentro dessa tag você só pode colocar textos ou imagens, diferente do que você pode fazer com a tag <input>, sempre especificando o tipo e atributo para essa tag.
ID: Esse atributo é usado para identificar o conteúdo da tag.
ACCESSKEY: Define uma tecla de atalho para o campo.
DISABLE: Desativa um elemento button.
TABINDEX: Define uma ordem quando o sistema de navegação é feito por abas.
TYPE: Especifica o tipo do botão, SUBMIT, RESET ou BUTTON.
VALUE: Define o conteúdo do botão.
Ex.: <button type="tipo_do_botao" accesskey="tecla_de_atalho" value="valor_do_botão">CLIQUE AQUI!</button>
FIELDSET
A tag <fieldset> é usada para agrupar uma relação de elementos em um determinado formulário, essa tag renderiza um quadro ao redor dos itens colocados entre as tags <fieldset> </fieldset>.
Nenhum comentário:
Postar um comentário