Atributos do Formulário HTML

Neste artigo, discutiremos atributos de formulário HTML. Especificamente, examinaremos os atributos do elemento < form > do HTML .

O elemento HTML <form> especifica uma parte do documento que inclui recursos interativos do usuário para inserir dados.

Índice-

Atributo de ação:

Quando o formulário é enviado, o atributo action determina o que acontecerá.

O usuário normalmente envia os dados do formulário para um arquivo no servidor quando o botão enviar é clicado.

Abaixo está um exemplo de envio de dados de formulário para “action-attibute-page.php”. Há um script do lado do servidor neste arquivo que manipula os dados do formulário.

Abaixo está um exemplo de atributos de formulários HTML:
Após o envio do formulário, envie os dados para a página “action-attibute-page”:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form action="/action-attibute-page">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname" value="Colin"><br>
<label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" value="Smith"><br><br><input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Observação: se uma ação for esquecida, a página atual será a ação padrão nos atributos de formulários HTML .

Atributo alvo:

O atributo de destino de um formulário determina onde mostrar sua resposta após o envio.

Um dos seguintes valores pode ser definido para o atributo de destino :

Valor Visão geral
_em branco Você verá a resposta em uma nova janela ou guia.
_auto A resposta aparecerá na mesma janela.
nome da moldura A resposta será retratada em um iframe nomeado
_pai O quadro pai mostra a resposta.
_principal As respostas ocorrerão em todo o corpo da janela.

Uma resposta será aberta na janela existente por padrão, pois o valor padrão é _self . Abaixo estão alguns exemplos de atributos de formulários HTML :
Neste caso, uma nova aba do navegador será aberta para exibir o resultado enviado:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><h2>The form target attribute</h2><br><br><p>When submitting this form, the result will be opened in a new browser tab:</p><br><br><form action="/action_page.php" target="_blank"><br> <label for="fname">First name:</label><br><br> <input type="text" id="fname" name="fname" value="John"><br><br> <label for="lname">Last name:</label><br><br> <input type="text" id="lname" name="lname" value="Doe"><br><br><br> <input type="submit" value="Submit"><br></form> <br><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um exemplo de _self-alvo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>Target _self attribute</title>
<style>
h2 {
color: blue;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h2>HTML Form target Attribute</h2>
<form action="#" target="_self">
First name:
<input type="text" name="fname">
<br>
Last name:
<input type="text" name="lname">
<br>
Address:
<input type="text" name="Address">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo do método:

Um atributo de método determina qual metodologia HTTP deve ser usada quando os dados do formulário são enviados.

Você pode enviar dados de formulário por meio de variáveis ​​de URL (com method=”get” ) ou por meio de transações de postagem HTTP (com method=”post” ).

Os dados do formulário são enviados usando o método GET HTTP por padrão .
O exemplo a seguir utiliza o método GET para enviar dados de formulário:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<form action="/action-attibute-page.php" method="get">
</form></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os dados do formulário são enviados utilizando o método POST neste exemplo:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<form action="/action-attibute-page.php" method="post">
</form></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui estão algumas recomendações para GET:

  1. Adiciona pares de nome/valor ao URL como dados de formulário
  2. GET nunca deve ser usado para enviar informações confidenciais! – A URL contém os dados do formulário enviado!
  3. URLs não podem exceder 2.048 caracteres.
  4. Um usuário pode marcar os resultados dos envios de formulários.
  5. GET é uma boa opção para dados não seguros, como strings de consulta no Google .

Aqui estão algumas recomendações para o POST:

  1. O POST anexa os dados do formulário ao corpo da solicitação HTTP. (A URL não inclui os dados do formulário enviado)
  2. Não há restrições de tamanho no POST, portanto, grandes quantidades de informações podem ser enviadas.
  3. Não é possível marcar envios de formulário com POST.

Dica: A primeira dica é sempre usar POST ao discutir atributos de formulário HTML, especificamente se os dados do formulário contêm informações confidenciais ou sensíveis .

Atributo de preenchimento automático:

Utilizando o atributo de preenchimento automático , pode-se determinar se o preenchimento automático deve ser permitido ou proibido para um formulário.

O preenchimento automático conduz valores com base nas últimas entradas do usuário quando o preenchimento automático está ativado. O que permite que os navegadores da Web preencham os valores do usuário automaticamente
Usando o preenchimento automático em um formulário:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<form action="/action-attibute-page.php" autocomplete="on">
</form></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo enctype HTML:

No caso de envio do formulário ao servidor, este atributo indica que os dados incluídos no formulário devem ser codificados. Um atributo deste tipo só pode ser utilizado se o método for “POST”.

Sintaxe:

<form enctype = “valor”>

Os três valores a seguir estão incluídos neste atributo:

application/x-www-form-urlencoded: Este é o tipo padrão .Antes de enviar os caracteres para o servidor, ele os codifica. Os espaços são convertidos em símbolos + e os caracteres especiais em seus valores hexadecimais.

multipart/form-data: Nenhum caractere é codificado neste valor.

text/plain: Este valor transforma espaços em símbolos de mais, exceto para caracteres especiais.

Aqui está um exemplo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>enctype attribute</title>
<style>
h2 {
color: blue;
}
</style>
</head>
<body>
<p></p><h2>HTML Attribute enctype</h2>
<form action="#" method="post" enctype="multipart/form-data">
<p>First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br></p>
<p><input type="submit" value="Submit">
</p></form>
<p></p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo Novalidado:

Em HTML, o atributo novalidate é um valor booleano.

Isso define que nenhuma validação deve ser realizada quando os dados do formulário são enviados.

Abaixo estão alguns exemplos de atributos de formulários HTML :
Um atributo novalidate em um formulário:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<form action="/action-attibute-page.php" novalidate>
</form></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Lista de todos os atributos <form>

Atributo Visão geral
método Ao transmitir dados de formulário, define o método HTTP a ser usado.
nome Dá um nome ao formulário
novalidar Quando enviado, o formulário não é validado
rele Indica como o documento atual está relacionado a um recurso vinculado
aceitar conjunto de caracteres Define a codificação de caracteres para envios de formulário.
Ação Se um formulário for enviado, ele identifica para onde enviar os dados.
alvo Quando o formulário é enviado, indica onde a resposta será exibida
autocompletar Indica se o preenchimento automático deve ser habilitado ou desabilitado para um formulário.
enctype Apenas para method=”post”. Defina como os dados do formulário devem ser codificados antes de serem enviados ao servidor.

Importância dos atributos de formulário HTML

Os atributos de formulário HTML são críticos no desenvolvimento de páginas da Web interativas e fáceis de usar. Abaixo estão algumas razões pelas quais eles são importantes:

  • Acessibilidade: para usuários que dependem de leitores de tela ou outras tecnologias assistivas para acessar a Web, atributos como rótulo, título e texto alternativo fornecem informações vitais.
  • Validação: O uso de atributos como obrigatório e padrão nos formulários garante que os usuários insiram dados válidos nos campos do formulário, diminuindo erros e melhorando a experiência do usuário.
  • Funcionalidade: atributos como ação, método e enctype determinam como os dados do formulário são processados ​​e enviados a um servidor, o que permite que os desenvolvedores da Web criem aplicativos responsivos que reagem à entrada do usuário.
  • Estilo: os atributos de formulário de classe e id permitem que os desenvolvedores apliquem estilo CSS aos elementos de formulário, tornando-os visualmente atraentes e consistentes com o design geral da página da web.
  • Segurança: ao controlar como os dados do formulário são manipulados e transmitidos, atributos como autocomplete e novalidate ajudam a evitar vulnerabilidades de segurança, como ataques de cross-site scripting (XSS).
Para se conectar com as informações técnicas deste site, assine nossa Newsletter abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.