Beatriz Torres - WD

Tag e atributos (para formulários):

<form> </form>: Tag de abertura de um formulário.

- Atributos da tag form:

*id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).

*action: Indica onde os dados informados serão guardados após sua submissão (ou seja, o local onde as informações preenchidas serão guardadas [por ex: um banco de dados]).

*method: Método de envio dos dados, existem apenas 2, que são:

                - Get: Os dados são conduzidos através da URL do navegador. Esse método não é aconselhável, pois informações importantes (como de variáveis, por exemplo) aparecem na barra de endereço e a quantidade de caracteres é extremamente limitada.

                - Post: O método de envio mais seguro, devido ao fato de os dados serem transmitidos diretamente no corpo da página. Outra vantagem é que não há uma quantidade definida de caracteres que possam ser enviados de uma única vez.

*enctype: Determina a maneira como serão codificados os dados do formulário (geralmente o formato texto é o escolhido).

<label>: Dá um rótulo para o campo. Sua importância semântica é facilitar a leitura por intermédio de sintetizadores de voz. A leitura da label é importante para sinalização dos campos em casos de pessoas que não enxergam.

- Atributos da tag label:

*accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida.

*for: Usa-se para criar uma ligação entre a label e o campo à qual se refere.

<input>: Define um campo de entrada de dados no formulário.

- Atributos da tag input:

*type: O tipo de entrada de dado, que tem como principais valores:

                - Text: Cria um campo que receberá texto (letras, números, caracteres especiais);

                - Date: Cria um minicalendário, onde o usuário escolhe uma data;

                - E-mail: Cria um campo validado para receber um endereço de e-mail (se preencher sem @ e . o endereço de e-mail não é aceito);

                - Number: Cria um campo de tipo numérico;

                - Range: Cria um controle numérico (uma espécie de regulador), onde o desenvolvedor define qual será o intervalo entre um número e outro (o intervalo sempre será o mesmo);

                - Password: Campo de senha, aceita números, letras e alguns caracteres especiais. Sua máscara de entrada é a •;

                - Hidden: Cria um elemento invisível ao usuário, entretanto ele contém informações que geralmente são importantes ao desenvolvedor (última vez que o usuário fez alteração dos seus dados, por exemplo);

                - File: Cria um botão que, quando clicado abre uma caixa de seleção de arquivo na máquina do usuário;

                - Checkbox: Cria uma caixinha que funciona como seletor de opções;

                - Radio: Lembra um checkbox, entretanto sua forma é circular e somente uma opção pode ser selecionada no radio. Muito utilizado para questões onde a informação é fixa, por exemplo, sexo feminino ou masculino;

                - Button: Simplesmente cria um botão. Deve-se inserir um script que especifique a utilidade do mesmo;

                - Image: Inclui uma imagem como botão de envio “submit”;

                - Submit: Botão de envio dos dados preenchidos no formulário para o local indicado no atributo action do form;

                - Reset: Botão que devolve aos campos do formulário seus valores originais.

Obs: Muito parecido com o botão ‘limpar’, já que aparentemente os campos ficam em branco quando clicamos sobre ele, a diferença está no caso de algum campo já ter algum valor específico e esse valor for alterado pelo usuário, quando resetado, o valor original torna a aparecer.

*id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).

*name: Permite-nos dar um nome ao elemento.

*accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida.

*alt: Texto alternativo somente para imagens.

Motivos: se a imagem não carrega, ao passar o mouse acima do espaço onde ela ficaria, o texto - geralmente descritivo - aparece. Também utilizado por sintetizadores de voz;

*checked: Determina que uma opção no radio ou checkbox estará pré-selecionada;

*disabled: Desabilita a utilidade do campo;

*maxlenght: Usado em campos tipo text e password, delimita uma quantidade máxima de caracteres permitidos;

*readonly: Indica que o campo é somente de leitura, ou seja, o usuário não consegue digitar nele;

*size: Especifica uma a largura (calculada por quantidade de caracteres) que um campo terá;

*src: Usado sempre que o tipo for ‘img’ (imagem), indicará o caminho de onde a tal imagem está guardada;

*tabindex: Apontará qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla tab for pressionada;

*value: Especifica o valor que será enviado ao banco de dados;

--- Abaixo atributos que são utilizados exclusivamente para tipos number e range ---

*max: Valor máximo;

*min: Valor mínimo;

*step: Define os intervalos entre os números.

<select>: O select expõe uma série de opções que podem ser escolhidas, essas opções são apresentadas em forma de lista.

*id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).

*multiple: Permite que mais de uma opção possa ser selecionada (por intermédio da tecla ctrl);

*disabled: Desabilita a utilidade do campo;

*size: Especifica uma a largura (calculada por quantidade de caracteres) que um campo terá;

*tabindex: Apontará qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla tab for pressionada;

<option>: Define uma opção em algum tipo de lista de seleção.

*value: Especifica o valor que será enviado ao banco de dados;

*selected: Deixa uma das opções pré-selecionada;

*label: Rotula a opção;

*disabled: Desabilita a utilidade do campo;

<optgroup>: Agrupa as opções relacionadas, dando assim uma maior organização ao select.

<textarea>: É uma área onde textos maiores podem ser digitados, aceita qualquer tipo de caracter e quebras de linha também.

*id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).

*tabindex: Apontará qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla tab for pressionada;

*accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida;

*cols: Define a largura da área de texto;

*rows: Define a altura da área de texto;

*readonly: Indica que o campo é somente de leitura, ou seja, o usuário não consegue digitar nele;

<button>: Essa tag define um botão, dependendo da utilidade que esse botão terá, um script precisa ser criado para dar ao botão tal competência. Também podemos adicionar uma imagem ao botão, adequando-o assim ao design do site.

<fieldset>: Cria uma borda em volta dos elementos do formulário. Bastante útil para agrupar informações semelhantes dentro do formulário.

<legend>: Define um título para o fieldset.