-Form:
O elemento <form> (o "container"
para os elementos a seguir). Ele cria uma área para a entrada de dados podendo
conter campos de texto, checkboxes, radio-buttons etc.
Atributos do Form:
Id: Identificador único e exclusivo utilizado num documento;
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.
Ex:
<form action="teste.php"
method="post" enctype="multipart/form-data">
<form action="teste.php"
method="post" enctype="multipart/form-data">
Oninput: A tag <output> representa o resultado de um cálculo
(como um realizado por um script).
Ex:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
Autocomplete: O atributo autocomplete especifica se um campo de entrada deve ou não ter habilitado o completamento automático. Ele também permite que o navegador preveja o valor quando um usuário começa a digitar em um campo, o navegador deve exibir opções para preencher o campo, com base em valores anteriormente digitados.
Ex:
<form action="teste.php" autocomplete="on">
Novalidate: Ele especifica que os dados do formulário
(de entrada) não devem ser validados quando submetidos.
Ex:
<form novalidate>
- Input – vários types:
Text
<input type="text"> Define um campo de
entrada de uma linha que um usuário pode digitar texto:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Como o código HTML acima aparece no navegador:
Password
<input type="password"> Define um campo de
senha:
<form>
Password: <input type="password" name="pwd">
</form>
Password: <input type="password" name="pwd">
</form>
Como o código HTML acima aparece no navegador:
E-mail
O tipo de e-mail é usado para campos de entrada que devem
conter um endereço de e-mail.
E-mail: <input type="email"
name="email">
Search
O tipo de pesquisa é usado para campos de pesquisa (um campo
de pesquisa se comporta como um campo de texto normal).
Search
Google: <input type="search" name="googlesearch">
URL
O tipo de url é usado para campos de entrada que devem
conter um endereço URL.
O valor do campo url é validada automaticamente quando o
formulário é enviado.
<input type="url"
name="homepage">
Hidden
Um parágrafo oculto:
<p hidden>This paragraph should be hidden.</p>
Number
O tipo de número é usado para campos de entrada que devem
conter um valor numérico.
Você também pode definir restrições sobre o que os números
são aceitos:
Quantity (between 1 and 5): <input
type="number" name="quantity" min="1"
max="5">
Ranger
O tipo gama é utilizada para campos de entrada que deve
conter um valor a partir de uma gama de números. Você também pode definir restrições sobre o que os números
são aceitos.
<input type="range" name="points"
min="1" max="10">
Tel
Defini um campo para digitar um número de telefone:
Telephone: <input type="tel"
name="usrtel">
Data
O tipo de data permite que o usuário selecione uma data.
Birthday: <input type="date"
name="bday">
Datetime
O tipo datetime permite que o usuário selecione uma data e
hora (com fuso horário).
Birthday
(date and time): <input type="datetime"
name="bdaytime">
Datetime-local
O tipo datetime-local permite que o usuário selecione uma
data e hora (sem fuso horário).
Birthday (date and time): <input
type="datetime-local" name="bdaytime">
Month
O tipo de mês permite que o usuário selecione um mês e ano.
Birthday (month and year): <input type="month"
name="bdaymonth">
Week
O tipo semana permite que o
usuário selecione uma semana e ano.
Select a week: <input type="week" name="week_year">
Checkbox
O objeto Checkbox representa uma caixa de seleção em um
formulário HTML.
Checkboxes permitir que um usuário selecione uma ou mais
opções de um número limitado de opções.
Radio
O objeto Rádio representa um botão de opção em um formulário
HTML.
Botões de rádio permitem que o usuário selecione apenas uma
de um conjunto pré-definido de opções. Você define grupos com a
propriedade de nome (botões de rádio com o mesmo nome pertencem ao mesmo
grupo).
Color
O tipo de cor é utilizada para campos de entrada que deve
conter uma cor.
Select your favorite color: <input type="color"
name="favcolor">
Button
Um botão clicável
<button type="button">Click
Me!</button>
Image
O estado do botão imagem representa ou uma imagem a partir do qual um usuário pode selecionar uma coordenada e enviar o formulário, ou, alternativamente, um botão a partir do qual o usuário pode enviar o formulário. O elemento é um botão, especificamente um botão de envio.
Reset
O estado do botão de reset representa um botão que, quando ativado, redefine a forma.
Submit
O estado submit representa um botão que, quando ativado, envia o formulário.
Textarea
A tag <textarea> define um multi-linha de controle de entrada de texto.
O elemento <select> é usado para criar uma lista drop-down.
Os <option> marcas dentro do elemento <select> definir as opções disponíveis na lista.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
A tag <datalist> especifica uma lista de opções pré-definidas para um elemento <input>.
A tag <datalist> é usado para fornecer um recurso "autocompletar" em elementos <input>. Os usuários verão uma lista suspensa de opções pré-definidas como entrada de dados.
Use o atributo do elemento <input> da lista para vinculá-lo em conjunto com um elemento <datalist>.
Keygen
A tag <keygen> especifica um campo gerador de par de chaves utilizado para formulários.
Quando o formulário é enviado, a chave privada é armazenada localmente, ea chave pública é enviada para o servidor.
A tag <output> representa o resultado de um cálculo (como uma realizada por um script).
Button
A tag <button> define um botão clicável
Dentro de um elemento <button> você pode colocar conteúdo, como texto ou imagens. Esta é a diferença entre este elemento e os botões criada com o elemento <input>.
Dica: Sempre especificar o tipo de atributo para um elemento <button>. Navegadores diferentes usam diferentes tipos padrões para o elemento <button>.
Estrutura de elementos de formulários–Boas Práticas IHC
Input type="text"
o Estrutura: Rótulo - Elemento
o Exemplo:
Input type="password"
o Estrutura: Rótulo - Elemento
o Exemplo:
Input
type="button"
o Estrutura: Não se aplica
o Exemplo:
Input type="submit"
o Estrutura: Não se aplica
o Exemplo: <input type="submit" name="cmdSend" value="Envia" />
Input
type="radio"
o Estrutura: Elemento - Rótulo
o Exemplo:
<input type="radio" name="radsim" value="Yes" />Sim<br />
<input type="radio" name="radnao" value="No" />Não<br />
Input type="checkbox"
o Estrutura: Elemento - Rótulo
o Exemplo:
Nome: <input type="text"
name="nome" />
Senha: <input
type="password" name="senha" />
<input
type="button" name="cmdSend" value="Envia" />
<input
type="submit" name="cmdSend" value="Envia" />
<input
type="radio" name="radsim" value="Yes"
/>Sim<br />
<input
type="radio" name="radnao" value="No" />Não<br
/>
< input
type="checkbox" name="chkSubscribe"
value="Subscribe" /> Assinar Boletim
Textarea
o Estrutura: Rótulo - Elemento
o Exemplo:
Select
o Estrutura: Rótulo - Elemento
o Exemplo:
<option>AL - Alagoas</option>
...
Button
o Estrutura: Não se aplica
o Exemplo:
Formulários Acessíveis
A criação de uma estrutura que respeite as boas práticas de IHC é o primeiro passo para a
criação de formulários acessíveis. O próximo passo é a adição de elementos que garantam
a acessibilidade dos formulários. Esses elementos são: LABEL, FIELDSET, LEGEND e
OPTGROUP.
Label
O
elemento LABEL é utilizado, em conjunto com o atributo “id” para relacionar de
forma clara o elemento ao seu rótulo.
O
elemento LABEL pode ser usado em conjunto com todos os elementos de formulário,
exceto o elemento BUTTON.
Ex:
<label
for="nome">Nome:</label>
<input type="text" name="nome"
id="nome"/>
Fieldset e Legend
O elemento FIELDSET é utilizado para agrupar os itens de
formulários com características
em comum. Por exemplo, um formulário para inscrição em
boletim pode ter seus
elementos agrupados da seguinte forma:
_ Dados de identificação: Nome, sobrenome, endereço físico,
endereço de email;
_ Preferências de recebimento: periodicidade (diária,
semanal, mensal) e tipo de
boletim (html, texto plano);
_ Artigos de seu interesse: Lista de itens que podem constar
no boletim.
O elemento FIELDSET é utilizado em conjunto com o elemento
LEGEND, que melhora a
acessibilidade do elemento FIELDSET quando este não é
visível em navegadores gráficos.
Ex:
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome"/>
<fieldset>
<legend>Quais suas cores preferidas?</legend>
<input type="checkbox" name="chk0" id="chk0_0" value="vermelho">
<label for="chk0_0">vermelho</label><br />
<input type="checkbox" name="chk1" id="chk1_1" value="verde">
<label for="chk1_1">verde</label><br />
<input type="checkbox" name="chk2" id="chk2_2" value=" azul">
<label for="chk2_2">azul</label><br />
<input type="checkbox" name="chk3" id="chk3_3" value="amarelo">
<label for="chk3_3">amarelo</label>
</fieldset>
Optgroup
O elemento OPTGROUP trabalha de forma semelhante ao FIELDSET, agrupando itens do
elemento SELECT quando necessário. Cada elemento OPTGROUP recebe um atributo
“label” que é o nome do grupo criado.
Ex:
tecla de atalho para a busca
<select
name="Lista de mercado">
<optgroup label="Laticínios">
<option>leite desnatado</option>
<option>queijo ralado</option>
<option>queijo prato</option>
<option>requeijão</option>
</optgroup>
<optgroup label="Vegetais">
<option>alface</option>
<option>alho</option>
<option>Beringela</option>
<option>Cenoura</option>
<option>Pimentão</option>
</optgroup>
<optgroup label="Frutas">
<option>Abacaxi</option>
<option>Banana</option>
<option>Manga</option>
</optgroup>
</select>
Accesskey
O uso de teclas de atalho através do atributo “accesskey”, permite escolher um atalho de
teclado para cada um dos campos do formulário, possibilitando o acesso rápido. O
atributo pode ser aplicado tanto ao elemento LABEL como ao elemento INPUT.
Ex:
<input type="text" name="txtbusca" accesskey="s" />
Referências:
Nenhum comentário:
Postar um comentário