HTML - Controle de Formulário

Campos de Entrada

Campos de entrada são o tipo mais comum de controle de formulário. Eles permitem que os usuários insiram vários tipos de dados, como texto, números e datas. Aqui estão alguns campos de entrada comumente usados:

Caixas de Seleção e Botões de Opção

Caixas de seleção e botões de opção são usados quando os usuários precisam selecionar uma ou mais opções de um grupo de escolhas.

Listas Suspensas e Caixas de Seleção

Listas suspensas e caixas de seleção fornecem uma maneira para os usuários escolherem uma ou mais opções de uma lista predefinida.

Botões

Botões são usados para acionar ações ou enviar formulários.

Áreas de Texto

Áreas de texto são usadas para inserir entrada de texto de várias linhas.

Os atributos rows e cols podem ser usados para definir as dimensões iniciais da área de texto. O atributo rows define o número de linhas de texto visíveis, enquanto o atributo cols define a largura média dos caracteres. As áreas de texto são redimensionáveis por padrão, permitindo que os usuários ajustem o tamanho da área de entrada. O comportamento de redimensionamento pode ser controlado usando propriedades CSS como resize.

Elementos Label

O elemento <label> é usado para criar um rótulo para um controle de formulário. Ele fornece uma descrição textual associada a um controle de formulário específico, como um campo de entrada, caixa de seleção ou botão de opção. O texto do rótulo ajuda você a entender o propósito do controle de formulário e qual informação deve ser inserida ou selecionada.

<label for="name">Nome:</label>
<input type="text" id="name" name="name">

Associando Rótulos aos Controles de Formulário

Para associar um rótulo a um controle de formulário, você pode usar o atributo for do elemento <label>. O valor do atributo for deve corresponder ao atributo id do controle de formulário correspondente. Isso cria uma conexão lógica entre o rótulo e o controle de formulário, permitindo que você clique no rótulo para focar no controle associado.

<input type="checkbox" id="terms" name="terms">
<label for="terms">Eu concordo com os termos e condições</label>

Importância da Rotulagem para Acessibilidade

Rotular controles de formulário é importante para a acessibilidade. Isso ajuda você a entender o propósito e o contexto de cada controle de formulário ao usar tecnologias assistivas, como leitores de tela. Quando um rótulo está corretamente associado a um controle de formulário, as tecnologias assistivas podem transmitir o texto do rótulo para você, facilitando a navegação e interação com o formulário.

Além do atributo for, você também pode aninhar o controle de formulário dentro do elemento <label>. Isso associa implicitamente o rótulo ao controle aninhado, mesmo sem usar o atributo for. No entanto, usar o atributo for ainda é considerado uma boa prática para associação explícita.

<label>
  <input type="radio" name="gender" value="male"> Masculino
</label>
<label>
  <input type="radio" name="gender" value="female"> Feminino
</label>

Ao rotular corretamente os controles de formulário, você torna seus formulários mais acessíveis e amigáveis para todos os usuários, incluindo aqueles que dependem de tecnologias assistivas.

Elementos Fieldset

O elemento <fieldset> agrupa controles de formulário relacionados dentro de um formulário. Ele cria um agrupamento visual e lógico dos controles, tornando o formulário mais estruturado e fácil de entender. O elemento <fieldset> contém os controles agrupados e também pode incluir uma legenda ou rótulo para o grupo usando o elemento <legend>.

<form>
  <fieldset>
    <legend>Informações de Contato</legend>
    <label for="name">Nome:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
    <label for="phone">Telefone:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

Elementos Legend

O elemento <legend> fornece uma legenda ou rótulo para um <fieldset>. Ele aparece como um cabeçalho dentro do fieldset e descreve os controles de formulário agrupados. O elemento <legend> deve ser o primeiro filho do elemento <fieldset>.

<fieldset>
  <legend>Endereço de Entrega</legend>
  <label for="address">Endereço:</label>
  <input type="text" id="address" name="address"><br>
  <label for="city">Cidade:</label>
  <input type="text" id="city" name="city"><br>
  <label for="zip">CEP:</label>
  <input type="text" id="zip" name="zip">
</fieldset>

Agrupando Controles de Formulário Relacionados

Ao agrupar controles de formulário usando <fieldset>, considere a relação lógica entre os controles. Agrupe os controles que estão intimamente relacionados ou pertencem à mesma categoria. Isso ajuda a organizar o formulário e facilita o entendimento e preenchimento pelos usuários.

Alguns exemplos comuns de agrupamento de controles de formulário relacionados incluem:

Ao agrupar controles de formulário relacionados com <fieldset> e fornecer rótulos claros com <legend>, você melhora a usabilidade e legibilidade dos seus formulários. Isso orienta os usuários pelo formulário e facilita a compreensão das informações necessárias.

Lembre-se de usar rótulos apropriados para cada controle de formulário dentro do fieldset para manter a acessibilidade e usabilidade.

Atributo Required

O atributo required é usado para indicar que um controle de formulário deve ser preenchido antes que o formulário possa ser enviado. Quando um controle de formulário tem o atributo required, o navegador impedirá o envio do formulário se o controle for deixado vazio ou não atender aos critérios de validação especificados.

<label for="name">Nome:</label>
<input type="text" id="name" name="name" required>

Atributo Disabled

O atributo disabled é usado para desativar um controle de formulário, tornando-o não interativo e não editável. Controles de formulário desativados geralmente ficam acinzentados e não podem ser focados, clicados ou alterados por você.

<label for="username">Nome de usuário:</label>
<input type="text" id="username" name="username" disabled>

Controles de formulário desativados não são enviados como parte dos dados do formulário quando este é submetido. Eles são ignorados durante o processamento do formulário.

Atributo Readonly

O atributo readonly é usado para tornar um controle de formulário somente leitura, o que significa que você pode ver seu valor, mas não pode alterá-lo. Controles de formulário somente leitura ainda podem receber foco e ser incluídos no envio do formulário.

<label for="email">E-mail:</label>
<input type="email" id="email" name="email" value="usuario@exemplo.com" readonly>

Controles de formulário somente leitura são úteis quando você deseja mostrar valores pré-preenchidos ou calculados que não devem ser alterados por você.

Atributo Placeholder

O atributo placeholder é usado para fornecer um texto de dica ou exemplo dentro de um controle de formulário quando ele está vazio. O texto do placeholder desaparece quando você começa a digitar ou quando o controle de formulário recebe foco.

<label for="search">Pesquisar:</label>
<input type="text" id="search" name="search" placeholder="Digite o termo de pesquisa...">

Placeholders devem ser usados como uma dica suplementar e não devem substituir a rotulagem adequada dos controles de formulário. Eles são úteis para fornecer orientações ou exemplos adicionais, mas não devem ser considerados como a única forma de transmitir o propósito de um controle de formulário.

Aplicando CSS aos Controles de Formulário

Para aplicar estilos CSS aos controles de formulário, você pode usar seletores CSS para direcionar elementos específicos do formulário. Você pode selecionar controles de formulário com base em seu tipo, classe, ID ou outros atributos. Aqui estão alguns exemplos de seletores CSS para controles de formulário:

/* Selecionando todos os elementos input */
input {
  /* Estilos CSS */
}

/* Selecionando um tipo específico de input */
input[type="text"] {
  /* Estilos CSS */
}

/* Selecionando um controle de formulário com uma classe específica */
.form-control {
  /* Estilos CSS */
}

/* Selecionando um controle de formulário com um ID específico */
#username {
  /* Estilos CSS */
}

Depois de selecionar os controles de formulário, você pode aplicar várias propriedades CSS para estilizá-los. Algumas propriedades CSS comuns usadas para estilização de controles de formulário incluem:

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

Pseudo-classes para Estados de Controles de Formulário

O CSS fornece pseudo-classes que permitem estilizar controles de formulário com base em seus estados. Pseudo-classes são palavras-chave adicionadas aos seletores para especificar um estado especial de um elemento. Algumas pseudo-classes comumente usadas para controles de formulário são:

input[type="text"]:focus {
  outline: none;
  border-color: blue;
}

input[type="email"]:valid {
  border-color: green;
}

input[type="number"]:invalid {
  border-color: red;
}

input[type="text"]:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

Personalizando a Aparência dos Controles de Formulário

O CSS permite que você altere a aparência dos controles de formulário além dos estilos padrão do navegador. Você pode usar propriedades e técnicas CSS para criar controles de formulário visualmente atraentes e únicos que combinem com o design do seu site.

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  transition: background-color 0.3s;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

select {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  appearance: none;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

select:focus {
  outline: none;
  border-color: blue;
}