O elemento form em HTML é usado para coletar informações do usuário, como nomes e endereços de email. Aqui está um exemplo de um elemento form:

<form action="url-goes-here">
  <!-- input elements go here -->
</form>

O atributo action especifica para onde os dados do formulário serão enviados após o envio. Para coletar informações específicas, como nomes e endereços de email, você usaria o elemento input. Here is an example of using an input element. Ative o editor interativo e interaja com o elemento input na janela de visualização digitando seu nome no campo.

<form action="">
  <input type="text" />
</form>

Elementos input são elementos void e não possuem tags de fechamento. O atributo type define o tipo de dado esperado do usuário. Neste caso, os dados seriam plaintext. Para adicionar um rótulo para a entrada, você usaria um elemento label. Here is an example of using a label element with the text of Full Name:. Clique no texto Full Name: na janela de visualização e você verá o campo de entrada receber o foco. Para interagir com o exemplo, você precisará ativar o editor interativo.

<form action="">
  <label>
    Full Name:
    <input type="text" />
  </label>
</form>

Ao aninhar um input dentro de um elemento label, você cria uma associação implícita entre o label e o campo input. O termo "implícito" refere-se a algo que é entendido ou inferido sem a necessidade de ser declarado explicitamente ou definido com atributos ou elementos adicionais. Para associar explicitamente um label a um input, você pode usar o atributo for. Here is an example of using the for attribute for an email address label. Interaja com o elemento input na janela de visualização digitando um endereço de email falso como jane@example.com. Para interagir com o exemplo, você precisará ativar o editor interativo.

<form action="">
  <label for="email"> Email Address: </label>
  <input type="email" id="email" />
</form>

Ao usar uma associação explícita, os valores do atributo for e do id precisam ser os mesmos. Neste caso, os valores são ambos definidos como email. O tipo email no input fornece uma validação básica para endereços de email formatados corretamente. Se você quiser mostrar dicas adicionais aos usuários sobre a entrada esperada, pode usar o atributo placeholder. Here is an example using the placeholder attribute inside the email input. Habilite o editor interativo, clique no campo de email e comece a digitar um email e você verá o texto do placeholder desaparecer.

<form action="">
  <label for="email"> Email Address: </label>
  <input type="email" id="email" placeholder="example@email.com" />
</form>

Para o texto do placeholder, você quer fornecer um texto curto útil para mostrar o formato e o tipo de dado que espera dos seus usuários. Neste caso, o texto do placeholder, example@email.com, mostra ao usuário que ele deve inserir um endereço de email com formato correto.