A construção de formulários em HTML é uma habilidade essencial para os programadores e designers que trabalham na criação de websites e aplicações web. Os formulários são utilizados para recolher informações dos utilizadores, como nome, email, morada, data de nascimento, entre outras informações.
Neste artigo, vamos explorar como construir formulários em HTML e abordar algumas boas práticas para garantir que os formulários sejam fáceis de usar e acessíveis para todos os utilizadores.
Criar o formulário em HTML
Para começar a construir um formulário em HTML, é necessário criar uma tag “form”. A tag “form” é utilizada para agrupar os elementos do formulário e definir o método de envio de dados do formulário.
Por exemplo, se quiser que os dados do formulário sejam enviados para um servidor web, pode utilizar o método “POST”. Se preferir que os dados sejam enviados como parâmetros de URL, pode utilizar o método “GET”.
<form method="POST" action="submit-form.php">
<!-- elementos do formulário aqui -->
</form>
Adicionar elementos ao formulário
Após criar a tag “form”, pode começar a adicionar elementos ao formulário, como “input”, “select”, “textarea” e “button”. Cada elemento do formulário deve ter um atributo “name” que identifica o campo e um tipo específico de acordo com o tipo de informação que está a ser recolhido.
Por exemplo, para criar um campo de nome, pode utilizar o elemento “input” com o atributo “type” definido como “text”:
<label for="name">Nome:</label>
<input type="text" id="name" name="name">
Para criar uma lista suspensa, pode utilizar o elemento “select” com opções dentro do elemento:
<label for="gender">Género:</label>
<select id="gender" name="gender">
<option value="male">Masculino</option>
<option value="female">Feminino</option>
<option value="other">Outro</option>
</select>
Para criar um campo de texto, pode utilizar o elemento “textarea”:
<label for="message">Mensagem:</label>
<textarea id="message" name="message"></textarea>
E para criar um botão de envio, pode utilizar o elemento “button” com o atributo “type” definido como “submit”:
<button type="submit">Enviar</button>
Validar o formulário em HTML
Para garantir que os utilizadores preenchem o formulário corretamente, é necessário validar o formulário em HTML. A validação em HTML pode ser feita utilizando os atributos “required” e “pattern” em cada elemento do formulário.
Por exemplo, para garantir que o campo de email é preenchido corretamente, pode utilizar o atributo “pattern” com uma expressão regular que verifica se o endereço de email é válido:
<label for="email">Email:</label>
<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
Adicionar acessibilidade ao formulário em HTML
A acessibilidade é uma preocupação importante na construção de formulários em HTML. Os formulários devem ser projectados para serem usados por todos, independentemente de suas habilidades ou limitações físicas. A seguir, são apresentadas algumas dicas para tornar o seu formulário mais acessível.
Etiquetas descritivas
Cada elemento do formulário deve ter uma etiqueta descritiva, que informa aos utilizadores o propósito do campo. As etiquetas podem ser criadas com a tag “label”. A etiqueta deve ser associada ao campo utilizando o atributo “for” com o valor do atributo “id” do campo correspondente.
Por exemplo:
<label for="name">Nome:</label>
<input type="text" id="name" name="name">
Títulos significativos
O título da página onde o formulário está inserido deve ser significativo e descritivo. Isso ajuda os utilizadores a entenderem o propósito do formulário e a sua relação com o restante do conteúdo da página.
Texto alternativo para imagens
Se houver imagens no formulário, como botões de envio ou de reset, é importante adicionar um texto alternativo descritivo. Isso permite que os utilizadores com deficiência visual entendam o propósito da imagem.
O texto alternativo pode ser adicionado utilizando o atributo “alt” no elemento “img”.
Por exemplo:
<button type="submit"><img src="enviar.png" alt="Botão de envio"></button>
Instruções claras
Instruções claras devem ser fornecidas aos utilizadores para preencher o formulário correctamente. Essas instruções podem ser adicionadas com etiquetas “label” ou como texto explicativo antes ou depois dos campos do formulário.
Tamanho e cor do texto
O tamanho e a cor do texto devem ser cuidadosamente escolhidos para garantir que o formulário seja legível para todos os utilizadores. As cores de fundo e de texto devem ter um contraste suficiente para que o texto seja legível para pessoas com daltonismo.
Teclado acessível
Os formulários devem ser projectados para que os utilizadores possam preenchê-los apenas com o teclado, sem precisar usar o rato. Para isso, é necessário garantir que os campos do formulário possam ser seleccionados com a tecla “tab”. Além disso, os botões “Enviar” e “Reset” devem poder ser accionados com a tecla “Enter”.
Testes de acessibilidade
Por fim, é importante testar o formulário em um ambiente de testes de acessibilidade, que pode ser uma ferramenta de verificação de acessibilidade ou a realização de testes com utilizadores com deficiências. Isso garante que o formulário seja acessível e usável para todos os utilizadores.
Conclusão
Com a informação presente neste artigo, pensamos que os utilizadores terão uma boa base de apoio para começarem a construir os seus formulários HTML.