Forms

Components

single-line text field

<input type="text" name="cpf">

required attribute

* 
<input type="text" name="cpf" required>*

placeholder attribute

<input type="text" name="cpf" placeholder="000.000.000-00">

value attribute

<input type="text" name="cpf" value="000.000.000-00">

label field

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

password field

<input type="password" name="password">

radio button field

<input type="radio" name="sex" value="male" id="male">
<label for="male">masculino</label>

radio group

Sexo: 
Sexo:
<input type="radio" name="sexo" value="masculino" id="masculino" checked>
<label for="masculino">masculino</label>
<input type="radio" name="sexo" value="feminino" id="feminino">
<label for="feminino">feminino</label>

checkbox field

<input type="checkbox" name="aceitaCondicoes" value="ok" id="condicoes">
<label for="condicoes">Você concorda com os termos...</label>

checkbox group

Linguagens: 
Linguagens:
<input type="checkbox" name="linguagens" value="javascript" id="javascript">
<label for="javascript">Javascript</label>
<input type="checkbox" name="linguagens" value="c" id="c">
<label for="c">C</label>
<input type="checkbox" name="linguagens" value="java" id="java">
<label for="java">Java</label>
<input type="checkbox" name="linguagens" value="python" id="python">
<label for="python">Python</label>

button field

<input type="button" name="submit" value="Create">
<input type="submit" name="submit" value="Create">
<button>Create</button>

file field

<input type="file" name="file">

range field

<input type="range" name="number" min="1" max="100" step="1">
<input type="text" name="number-value" value="20" size="3">

number field

<input type="number" name="number">

date field

<input type="date" name="date">

email field

<input type="email" name="email">

multi-line text field


<label for="message">Mensagem:</label><br>
<textarea name="message" id="message" rows="3" cols="60">digite uma mensagem</textarea>

combobox field

<label for="place">Estado: </label>
<select name="place" id="place">
  <option value=""></option>
  <option value="PB">Paraíba</option>
  <option value="PE">Pernambuco</option>
</select>

Simple Form

simple-form/index.html (<form>)

<main>
  <h1 style="color: #606c71">Contato</h1>
  <form action="sucesso.html" method="post">
    <fieldset>
      <div>
        <label for="nome">Nome</label>
        <input type="text" id="nome" name="nome" required> *
      </div>
      <div>
        Sexo
        <input type="radio" name="sexo" id="masculino" value="m" checked>
        <label for="masculino">Masculino</label>
        <input type="radio" name="sexo" id="feminino" value="f">
        <label for="feminino">Feminino</label>
      </div>
      <div>
        <label for="curso">Curso</label>
        <select name="curso" id="curso">
          <option value="" selected>escolha um curso</option>
          <option value="TSI">Sistemas para Internet</option>
          <option value="RC">Redes de Computadores</option>
        </select>
      </div>
      <div>
        <label for="email">Email</label>
        <input type="text" id="email" name="email">
      </div>
      <div>
        <label for="titulo">Título</label>
        <input type="text" id="titulo" name="titulo">
      </div>
      <div>
        <label for="mensagem">Mensagem</label>
        <textarea id="mensagem" name="mensagem"></textarea>
      </div>
    </fieldset>
    <input type="submit" value="Enviar">
  </form>
</main>

Output:

Contato

*
Sexo

References