HTML - Atributos de Formulário

action

O atributo action especifica a URL ou script do lado do servidor que irá lidar com o envio do formulário. Quando você envia o formulário, os dados do formulário são enviados para a URL ou script especificado para processamento. O valor do atributo action pode ser uma URL absoluta ou relativa.

<form action="/submit-form.php">
  <!-- elementos do formulário -->
</form>

Quando você envia o formulário, os dados serão enviados para o script "/submit-form.php" no servidor para processamento.

method

O atributo method define o método HTTP usado para o envio do formulário. Os dois valores mais comuns são GET e POST.

<form action="/submit-form.php" method="POST">
  <!-- elementos do formulário -->
</form>

Os dados do formulário serão enviados usando o método POST quando você enviar o formulário.

target

O atributo target especifica onde exibir a resposta após o envio do formulário. Ele determina a janela ou frame alvo onde a resposta do servidor será carregada. Os valores possíveis são:

<form action="/submit-form.php" target="_blank">
  <!-- elementos do formulário -->
</form>

Quando você enviar o formulário, a resposta do servidor será aberta em uma nova janela ou aba.

enctype

O atributo enctype especifica o tipo de codificação para os dados do formulário ao usar o método POST. É usado para indicar como os dados do formulário devem ser codificados antes de serem enviados ao servidor. Os valores comuns são:

<form action="/submit-form.php" method="POST" enctype="multipart/form-data">
  <!-- elementos do formulário -->
</form>

Os dados do formulário serão codificados usando o tipo de codificação "multipart/form-data", permitindo que uploads de arquivos sejam incluídos no envio do formulário.

required

O atributo required indica que um campo do formulário deve ser preenchido antes que o formulário possa ser enviado. Quando você adiciona o atributo required a um campo de entrada, o navegador verificará se o campo tem um valor antes de permitir o envio do formulário. Se o campo estiver vazio, o navegador mostrará uma mensagem de erro e impedirá o envio do formulário.

<form>
  <label for="name">Nome:</label>
  <input type="text" id="name" name="name" required>
  <input type="submit" value="Enviar">
</form>

O campo "Nome" está marcado como obrigatório. Se você tentar enviar o formulário sem inserir um valor no campo "Nome", o navegador mostrará uma mensagem de erro e impedirá o envio do formulário.

min e max

Os atributos min e max definem os valores mínimos e máximos para campos de entrada numéricos, como os tipos number, range e date. Esses atributos ajudam você a estabelecer limites para os valores permitidos nesses campos.

<form>
  <label for="quantity">Quantidade:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10">
  <input type="submit" value="Enviar">
</form>

O campo "Quantidade" tem um valor mínimo de 1 e um valor máximo de 10. Se você tentar inserir um valor fora desse intervalo, o navegador mostrará uma mensagem de erro quando você enviar o formulário.

minlength e maxlength

Os atributos minlength e maxlength definem o número mínimo e máximo de caracteres permitidos em um campo de entrada de texto. Esses atributos ajudam você a controlar o comprimento da entrada do usuário.

<form>
  <label for="username">Nome de usuário:</label>
  <input type="text" id="username" name="username" minlength="4" maxlength="10">
  <input type="submit" value="Enviar">
</form>

O campo "Nome de usuário" deve ter no mínimo 4 caracteres e no máximo 10 caracteres. Se o valor inserido não atender a esses requisitos, o navegador mostrará uma mensagem de erro quando você enviar o formulário.

pattern

O atributo pattern define um padrão de expressão regular que o valor de entrada deve corresponder. Ele permite que você estabeleça um formato ou padrão que a entrada do usuário deve seguir. Se o valor inserido não corresponder ao padrão, o navegador mostrará uma mensagem de erro.

<form>
  <label for="phone">Número de telefone:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
  <input type="submit" value="Enviar">
</form>

O campo "Número de telefone" tem um padrão que exige que a entrada esteja no formato de três dígitos, seguidos por um hífen, mais três dígitos, outro hífen e quatro dígitos (por exemplo, 123-456-7890). Se o número de telefone inserido não corresponder a esse padrão, o navegador mostrará uma mensagem de erro quando você enviar o formulário.

autocomplete

O atributo autocomplete indica se um campo de formulário deve ter o preenchimento automático ativado ou desativado. O preenchimento automático sugere possíveis valores com base em valores inseridos anteriormente para o mesmo campo. Por padrão, o preenchimento automático está ativado para a maioria dos campos de formulário. No entanto, você pode controlar esse comportamento usando o atributo autocomplete.

Os valores possíveis para o atributo autocomplete são:

<form>
  <label for="username">Nome de usuário:</label>
  <input type="text" id="username" name="username" autocomplete="off">
  <input type="submit" value="Enviar">
</form>

O campo "Nome de usuário" tem o preenchimento automático desativado. O navegador não sugerirá valores inseridos anteriormente para este campo.

readonly

O atributo readonly especifica que um campo de formulário é somente leitura e não pode ser alterado pelo usuário. Quando você adiciona o atributo readonly a um campo de entrada, o usuário ainda pode ver o valor do campo, mas não pode alterá-lo. O valor do campo será enviado quando o formulário for submetido.

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

O campo "E-mail" está marcado como somente leitura. O usuário não pode alterar o valor do campo, mas ele será incluído no envio do formulário.

disabled

O atributo disabled indica que um campo de formulário está desativado e não pode ser usado pelo usuário. Quando você adiciona o atributo disabled a um campo de entrada, o campo fica acinzentado e não clicável. O valor do campo não será enviado quando o formulário for submetido.

<form>
  <label for="country">País:</label>
  <select id="country" name="country" disabled>
    <option value="US">Estados Unidos</option>
    <option value="CA">Canadá</option>
    <option value="UK">Reino Unido</option>
  </select>
  <input type="submit" value="Enviar">
</form>

A lista suspensa "País" está desativada. O usuário não pode selecionar um valor e o valor do campo não será incluído no envio do formulário.

O uso dos atributos readonly e disabled pode ajudar a melhorar a acessibilidade, fornecendo dicas visuais aos usuários sobre a interatividade dos campos do formulário. É importante usar esses atributos corretamente com base nos requisitos específicos do seu formulário.

accept-charset

O atributo accept-charset especifica as codificações de caracteres que o servidor aceita para envio do formulário. Ele informa ao navegador quais codificações de caracteres o servidor pode processar. Por padrão, os dados do formulário são enviados usando a codificação de caracteres da página que contém o formulário.

<form action="/submit-form.php" accept-charset="UTF-8">
  <!-- elementos do formulário -->
</form>

Os dados do formulário serão enviados usando a codificação de caracteres UTF-8, conforme especificado pelo atributo accept-charset. Se o servidor não suportar a codificação de caracteres especificada, ele pode não processar corretamente os dados do formulário.

É importante observar que o atributo accept-charset é raramente usado hoje em dia, pois a maioria dos servidores é configurada para lidar com a codificação de caracteres da página por padrão. No entanto, se você precisar especificar uma codificação de caracteres diferente para o envio do formulário, você pode usar este atributo.

novalidate

O atributo novalidate indica que o formulário não deve ser validado quando for enviado. Por padrão, os formulários HTML5 realizam validação do lado do cliente antes de enviar os dados do formulário para o servidor. O atributo novalidate ignora esta etapa de validação.

<form action="/submit-form.php" novalidate>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Enviar">
</form>

Quando você enviar o formulário, o navegador não realizará a validação do lado do cliente nos campos do formulário. Os dados do formulário serão enviados para o servidor sem verificar se a entrada é válida.

O atributo novalidate é útil em situações onde você deseja lidar com a validação do formulário apenas no lado do servidor, ou quando você tem sua própria lógica de validação personalizada implementada usando JavaScript.

Lembre-se que usar o atributo novalidate não significa que você deve pular completamente a validação do formulário. Ainda é importante realizar a validação do lado do servidor para garantir que os dados enviados sejam válidos e seguros para processamento. A validação do lado do cliente é uma camada extra de validação que ajuda a detectar erros de entrada antecipadamente e economizar recursos do servidor.

Ao usar os atributos accept-charset e novalidate de forma apropriada, você pode controlar a codificação de caracteres e o comportamento de validação de seus formulários HTML para atender às necessidades da sua aplicação.