Formulários

Componentes

Campo de texto em linha única

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

Atributo required

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

Atributo placeholder 

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

Atributo value

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

Tag label

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

Campo tipo password

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

Botão de rádio (radio button)

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

Agrupamento de botões de rádio

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>

Campo de seleção múltipla (checkbox)

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

Agrupamento de checkbox

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>

Campo range

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

Botão de ação

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

Campo de data (date)

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

Campo de email

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

Campo de arquivo (file)

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

<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>

Campo texto multi-linha (textfield)


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

Formulário simples

simple-form/index.html

<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="ADS">Análise e Desenvolvimento de Sistemas</option>
          <option value="LC">Licenciatura em Computação</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>

Saída:

Contato

*
Sexo

Referências