Curso IT Fundamentos HTML 013_Formulários e entrada do usuário

Formulários

Os formulários HTML (Form) são uma parte muito importante do HTML, permitindo que os usuários insiram informações em uma página da web e enviem essas informações para o servidor.

Exemplo:

1
<form action="/submit" method="post">
2
  <!-- Elementos do formulário vão aqui -->
3
</form>

O elemento <form> define a área para entrada de dados do usuário e pode conter diferentes tipos de elementos de entrada, como área de texto <textarea>, lista suspensa <select>, botão de opção <radio>, caixa de seleção <checkbox> e botão <button>, entre outros.

Atributos do formulário:

• action: Define a URL do arquivo de processamento no servidor após o envio dos dados do formulário.
• method: Define o método HTTP usado para enviar dados ao servidor, valores comuns são “get” e “post”.
• name: Usado para especificar o nome do formulário. O nome do formulário é usado para identificar o formulário e é usado no processamento de dados do formulário no lado do servidor.
• enctype: Usado para especificar a forma de codificação dos dados do formulário. Os dados do formulário podem usar codificação application/x-www-form-urlencoded ou multipart/form-data.
• autocomplete: Usado para especificar se a função de preenchimento automático do formulário está habilitada. Se definido como on, o navegador preencherá automaticamente os dados inseridos anteriormente no formulário.
• novalidate: Usado para especificar se os dados do formulário devem ser validados. Se definido como on, os dados do formulário não serão validados antes do envio.

[!Resumo]

• O formulário form em si não é visível.

Campo de texto

Nos formulários, frequentemente precisamos que os usuários insiram conteúdo de texto como letras, números, etc. Isso pode ser feito através do elemento <input>, com seu atributo type definido como “text”.

Exemplo:

1
<form>
2
Nome: <input type="text" name="name"><br>
3
Idade: <input type="text" name="age">
4
</form>

Efeito:

[!Resumo]

• Na maioria dos navegadores, a largura padrão do campo de texto é de 20 caracteres.

Campo de senha

Se você precisar que o usuário insira uma senha, pode definir o atributo type do elemento <input> como “password”, e o conteúdo inserido será ocultado.

Exemplo:

1
<form>
2
Senha: <input type="password" name="pwd">
3
</form>

Efeito:

[!Resumo]

• Os caracteres do campo de senha não são exibidos em texto simples, mas são substituídos por asteriscos * ou pontos .

Botões de opção (Radio Buttons)

Botões de opção e caixas de seleção permitem que os usuários escolham uma ou várias opções entre múltiplas escolhas. O valor do atributo type do botão de opção é “radio”.

Exemplo:

1
<form action="">
2
Sexo:
3
<input type="radio" name="sex" value="male" checked>Masculino
4
<input type="radio" name="sex" value="female">Feminino
5
</form>

Efeito:

[!Resumo]

• O valor do atributo name dos botões de opção deve ser o mesmo, caso contrário, eles não pertencerão ao mesmo grupo.
• O atributo checked é usado para especificar se o botão de opção está selecionado por padrão.

Caixas de seleção (Checkboxes)

As caixas de seleção podem selecionar uma ou mais opções, definidas usando <input type="checkbox">

Exemplo:

1
<form>
2
  APPs que você já usou:
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">Douyin
7
</form>

Efeito:

[!Resumo]

• O atributo checked é usado para especificar se a caixa de seleção está marcada por padrão.

Lista suspensa (select)

A lista suspensa permite que os usuários escolham uma opção entre várias. Ela é criada com o elemento <select> e usa o elemento <option> para definir as opções.

Exemplo:

1
<form action="">
2
  Selecione seu país:
3
  <select name="country">
4
    <option value="china">China</option>
5
    <option value="us">Estados Unidos</option>
6
    <option value="japan">Japão</option>
7
  </select>
8
</form>

Efeito:

[!Resumo]

• O atributo selected é usado para especificar a opção padrão da lista suspensa.
• O atributo disabled é usado para especificar se a lista suspensa está disponível.
• Você pode usar o atributo size para especificar o número de opções visíveis na lista suspensa.

Botões de envio (Submit, Reset, Button)

Os formulários geralmente precisam de um botão para enviar ou confirmar a entrada do usuário. submit, reset e button são todos elementos de botão de formulário em HTML.

Exemplo:

1
<form action="/submit" method="post">
2
  <input type="submit" value="Botão de envio">
3
  <input type="reset" value="Botão de redefinir">
4
  <button type="button" value="Botão de confirmação">Botão de confirmação</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="Botão de imagem" width="50" height="50">
6
</form>

Efeito:

[!Resumo]

• post: Refere-se ao método HTTP POST, os dados do formulário serão incluídos no corpo do formulário e depois enviados ao servidor, usado para enviar dados sensíveis, como nome de usuário e senha.
• get: Valor padrão, refere-se ao método HTTP GET, os dados do formulário serão anexados à URL do atributo action, com ? como separador, geralmente usado para informações não sensíveis, como paginação. Por exemplo: https://www.zhaojian.net/?page=1, aqui page=1 são os dados enviados pelo método get.

Elementos e atributos do formulário