Formulários HTML
Formulários HTML
1. Elementos básicos para construção de formulários:
O elemento <form> (o "container" para os elementos a seguir);
Input type: text
Definindo dois campos de linha única de texto que um usuário pode digitar texto:
Nome: <input type="text" name="nname"> <br>
Sobrenome: <input type="text" name="sname"> <br>
Input type: password
Definindo um campo de senha com caracteres mascarados
<input type="password" name="pwd">
Input type: email
Definindo um campo de um endereço de e-mail (será validada automaticamente quando submetido):
E-mail: <input type="email" name="usremail">
Input type: search
Definindo um campo de busca (como um site de pesquisa Google):
Pesquisa Google: <input type="search" name="googlesearch">
Input type: url
Definindo um campo para digitar uma URL:
Adicione a sua página inicial: <input type="url" name="homepage">
Input type: hidden
Definindo um campo oculto (não é visível para o usuário). Um campo oculto costuma
armazenar um valor padrão, ou pode ter seu valor alterado por um JavaScript:
<input type="hidden" name="country" value="Norway">
Input type: number
Definindo um campo para digitar um número (Você também pode definir restrições sobre o que os números são aceitos):
Quantidade (entre 1 e 5): <input type="number" name="quantity" min="1" max="5">
Usar os seguintes atributos para especificar restrições:
• max - especifica o valor máximo permitido
• min - especifica o valor mínimo permitido
• step - especifica os intervalos de um número
• value - Especifica o valor padrão
Input type: range
Definindo um controle para entrar em um número cujo valor exato não é importante (como um controle deslizante). Você também pode definir restrições sobre quais os números são aceitos:
<input type="range" name="points" min="1" max="10">
Usar os seguintes atributos para especificar restrições:
• max - especifica o valor máximo permitido
• min - especifica o valor mínimo permitido
• step - especifica os intervalos de um número
• value - Especifica o valor padrão
Input type: tel
Definindo um campo para digitar um número de telefone:
Telefone: <input type="tel" name="usrtel">
Input type: date
Define um controle de data:
Aniversário: <input type="date" name="bday">
Input type: datetime
Define uma data e hora de controle (com fuso horário):
Aniversário (data e hora): <input type="datetime" name="bdaytime">
Input type: datetime-local
Define um controle de data e hora (sem fuso horário):
Aniversário (data e hora): <input type="datetime-local" name="bdaytime">
Input type: time
Definir um controle para entrar em um tempo (não fuso horário):
Selecione um tempo: <input type="time" name="usr_time">
Input type: month
Definir um mês e ano controle (sem fuso horário):
Aniversário (mês e ano): <input type="month" name="bdaymonth">
Input type: week
Definir uma semana e controle de ano (sem fuso horário):
Escolha uma semana: <input type="week" name="week_year">
Input type: checkbox
Checkboxes permitir que um usuário selecione uma ou mais opções de um número limitado de opções.
<input type="checkbox" name="vehicle" value="Bike"> Eu tenho uma bicicleta<br>
<input type="checkbox" name="vehicle" value="Car"> Eu tenho um carro
Input type: radio
Botões de rádio que um usuário pode selecionar apenas um número limitado de opções:
<input type="radio" name="gender" value="male"> Masculino<br>
<input type="radio" name="gender" value="female"> Feminino
Input type: file
Definir um campo de arquivo-seleção e um "Procurar ..." botão (para upload de arquivos):
Selecione um arquivo: <input type="file" name="img">
Input type: color
Escolha uma cor de um seletor de cores:
Escolha sua cor favorita: <input type="color" name="favcolor">
Input type: button
Um botão, que ativa um JavaScript quando é clicado:
<input type="button" value="Click me" onclick="msg()">
Input type: image
Definir uma imagem como um botão de envio:
<input type="image" src="img_submit.gif" alt="Submit">
Input type: reset
Definir um botão de reset (reseta todos os valores do formulário para os valores padrão):
<input type="reset">
Input type: submit
Definir um botão de envio:
<input type="submit">
Tag < Textarea>
<form>
< textarea name="relatorio" rows=12 cols=50>
Aqui você digita o que desejar.
</textarea>
</form>
Tag <select> + <option>
Criar um drop-down list com quatro opções:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Tag <datelist> + <option>
Um elemento <input> com valores predefinidos em uma <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Tag <keygen>
O elemento keygen de HTML existe para facilitar a geração de chaves, e enviar a chave pública, como parte de um formulário HTML. Este mecanismo foi projetado para uso com sistemas de gestão certificados, baseada na web.Espera-se que o elemento keygen é utilizado em um formulário HTML, juntamente com as outras informações necessárias para a construção de um pedido de certificado, e que o resultado do processo será um certificado assinado.
Atributos:
autofocus
Este atributo booleano especifica que o controle deve ter o foco de entrada quando a página é carregada, a menos que o usuário cancelou, por exemplo, escrevendo em um controle diferente. Apenas um elemento de formulário em um documento pode ter o atributo autofocus que é um valor booleano.
challenge
A seqüência de desafio que se apresenta juntamente com a chave pública. O padrão é uma string vazia se não especificado.
disabled
Este atributo booleano indica que o controle de formulário não está disponível para a interação.
form
O elemento de forma a que este elemento está associado (o proprietário da forma). O valor do atributo deve ser um ID de um elemento no <form> mesmo documento. Se este atributo não for especificado, este elemento deve ser um descendente de um <form> elemento. Este atributo permite que você coloque elementos <keygen> em qualquer lugar dentro de um documento, não apenas como descendentes do formulário.
KeyType
O tipo de chave gerada. O padrão é o RSA.
name
O nome do controlo, que é enviada com os dados do formulário.
Uso
O elemento é escrito da seguinte forma:
<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">
Tag <output>
Realizar um cálculo e mostrar o resultado em um elemento <output>:
<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>
Tag <button>
Elemento <button> é usado para confirmar uma ação do usuário. O elemento de comando requer abertura e fechamento de uma tag.
<html>
<head>
<title> elemento botão </ title>
</ head>
<body>
<button> clique em mim botão </>
</ body>
</ html>
2. Estrutura de elementos de formulários – Boas Práticas IHC
A área de IHC surgiu no inicio dos anos 80 apoiada principalmente pela expansão de sistemas de software interativos. A IHC envolve uma área da computação responsável por estudos com objetivos de proporcionar aos usuários sistemas fáceis de aprender, utilizar e memorizar e, como consequência, satisfatórios a necessidade do usuário. As atividades envolvem a identificação da necessidade e característica do usuário, a elaboração do projeto, a implementação e a avaliação da interface do aplicativo .
Esta área da computação tem ganhado cada vez mais espaço dentro de ambientes de pesquisa e desenvolvimento. Isso se deve, principalmente, ao fato de que as empresas de software estão compreendendo a necessidade de prover sistemas amigáveis para o usuário. Tal característica também é interesse da equipe de projeto e desenvolvimento dos sistemas, bem como das organizações que adquirem sistemas computacionais com objetivo de apoiar suas tarefas operacionais, gerenciais e estratégicas.
A qualidade da interação é um atributo perceptível ao usuário e permite ao mesmo mensurar a qualidade da aplicação utilizada. Com isto, as organizações estão optando por sistemas com interfaces amigáveis e fáceis de utilizar. Sistemas que agreguem estas características tem usabilidade que, segundo a ISO9 241 se trata da qualidade que um sistema interativo oferece a seu usuário de realizar suas tarefas com eficácia, eficiência e satisfação. Aplicativos que apresentam esta característica de qualidade, além do aspecto de interface são agradáveis para o usuário evitando que o mesmo venha a ter stress, sensação de inferioridade, dificuldade de trabalho, atraso na entrega de tarefas dentre outro problemas técnicos e fisiológicos provocados por sistemas mal projetados.
O elemento 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"/>
Os elementos 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:
<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>
O elemento 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:
<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>
Teclas de atalho (Accesskeys)
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: tecla de atalho para a busca
<input type="text" name="txtbusca" accesskey="s" />
No exemplo, se o usuário pressionar as teclas “alt” e “S” ele irá diretamente para o campo de busca.
No entanto, deve-se tomar cuidado com a escolha das teclas de atalho, pois diversos navegadores utilizam-se delas para sua própria navegação, variando do navegador, versão e língua. Em caso de conflito, a preferência é do navegador.
Navegando pelos campos
Como links, campos de formulário (e grupos de campos) precisam ser navegáveis
sem o uso de um dispositivo apontador, como o mouse. Os mesmos métodos usados em links para facilitar essa tarefa podem ser usados em elementos de formulário – tabulação e teclas de acesso.
Os atributos accesskey e tabindex podem ser adicionados nas tags individuais do formulário, como input, e também em tags legend.
<input type="text" name="nome" accesskey="n" tabindex="1" />
Campos obrigatórios
Repare que o formulário acima indica os campos obrigatórios apenas através da
mudança de cor. Um usuário que não pode ver, não saberá quais campos são de
preenchimento obrigatório. Uma solução para o caso de campos obrigatórios em
formulários seria inserir um asterisco em forma de imagem ao lado de cada campo
obrigatório, fornecendo uma descrição no atributo alt para esta imagem, que
poderia ser “campo obrigatório” ou, simplesmente, “obrigatório”.
<label for="nome">Nome:
<img src="images/icon_asterisk.gif" alt="obrigatório"/>
</label>
<input type=text name="nome" id="nome" />
Exemplo 2
<label for="nome">Nome:
<span>Obrigatório<span/>
</label>
<input type=text name="nome" id="nome" />
Outra solução é utilizar uma tagspan contendo a informação “obrigatório”, que será ocultada por CSSe, em seu lugar, inserimos a imagem de um asterisco.
O único cuidado é ocultar o elemento através de técnicas que preservem a acessibilidade, ou seja, de
forma que o conteúdo fique oculto visualmente, mas que continue sendo acessado pelos leitores de
tela. Repare nos mecanismos para ocultar elementos e seus efeitos na acessibilidade:
CAPCHA
O CAPCHA é um teste interativo humano, completamente automatizado para diferenciar computadores de seres humanos. Os CAPTCHAS comuns fazem uso de imagens que expressam símbolos e caracteres. Esse tipo de CAPTCHA não é interpretado e lido pelos softwares leitores de tela. Logo, esse recurso somente deverá ser utilizado em casos de extrema necessidade, e, quando utilizado, deverá ser disponibilizada em forma alternativa, podendo ser de perguntas de interpretação ou testes matemáticos que só poderão ser respondidas por seres humanos. Essas perguntas devem ser simples, permitindo que possam ser respondidas por variados tipos de usuários, de diferentes culturas e níveis de instrução.
<form action="action.php" method="post">
<fieldset>
<legend>CAPTCHA</legend>
<label for="pergunta">Escreva por extenso quanto é dois mais três.</label>
<input type="text" id="pergunta" name="pergunta" />
<input type="submit" name="enviar" value="Enviar!" />
</fieldset>
</form>
Outros exepmlos de captcha acessiveis
Alterações automáticas
Quando campos ou elementos de um formulário receberem foco, não devem ser iniciadas alterações automáticas na página que confundam ou desorientem os usuários. Logo, as mudanças devem ocorrer através do acionamento de botões, permitindo que os usuários tenham total controle do formulário.
Exemplo Correto
<select id="cidade" name="cidade">
<option value="POA">Porto Alegre</option>
<option value="BH">Belo Horizonte</option>
<option value="RJ">Rio de Janeiro</option>
<option value="SP">São Paulo</option> </select>
<input type="submit" id="submit" value="Enviar" />
ExemploIncorreto
<select name="cidade" id="cidade" onchange="location = this.options[this.selectedInd
ex].value;">
<option value="POA">Porto Alegre</option>
<option value="BH">Belo Horizonte</option>
<option value="RJ">Rio de Janeiro</option>
<option value="SP">São Paulo</option>
</select>
Botões de imagem
Os botões de imagem são elementos input do tipo image (input type=”image”). Para os
botões de imagem que servem para o mesmo propósito do botão do tipo submit, deve ser
fornecida uma descrição textual para o botão através do atributo alt, conforme o exemplo a
seguir.
<inputtype="image"name="entrar"src="entrar.jpg"alt="entrar" />
Já para outros tipos de botões (reset e button), é preciso substituir o botão pela imagem
que se deseja utilizar através do CSS, já que o comportamento dos leitores de tela quanto ao
atributo alt nesses tipos de botões é bastante variável. Nesse caso, para que o botão seja
acessível, ele deve possuir um value descritivo, conforme o exemplo a seguir.
HTML
<inputtype="reset"name="limpar"value="Limpar"class="btLimpar"/>
CSS
input.btLimpar{
background:transparenturl(btLimpar.jpg) no-repeat left top;
width:100px;
height:47px;
text-indent:-20000px;
border:0; }
Aviso de erro
Quando um erro de entrada de dados for automaticamente detectado, seja pelo não preenchimento de campos obrigatórios, ou pelo preenchimento incorreto de algum campo, o item que apresenta erro deve ser identificado e o usuário deve ser informado sobre o erro por meio de texto. Após o envio das informações, caso exista algum campo incorreto, o mesmo deve receber o foco, e nele deverá conter uma mensagem informando claramente ao usuário o real motivo do problema, para que esse possa ser resolvido, permitindo o envio dos dados.
Exemplo:
O usuário envia o formulário e deixa de preencher campos obrigatórios ou preenche algum campo de maneira incorreta. O foco retorna ao início do formulário contendo o aviso de erro e links (âncoras) para os campos do formulário que apresentaramerro.Abaixo dos avisos, encontram-se os campos de formulário que contiveram erro de preenchimento e, também, um link que permite ao usuário expandir os demais campos do formulário.
Referencias :
https://cirofeitosa.com.br/
https://www.dicionarioinformal.com.br
https://acessibilidade.bento.ifrs.edu.br
https://librosweb.es
https://maujor.com
https://codando.wordpress.com/
https://www.jsites.com.br
https://www.w3c.br/https://www.webstandards.org/learn/tutorials/accessible-‐forms/