Elementos e Atributos de Formulário HTML

• Elemento form: usado para criar um formulário HTML para entrada do usuário.
• Atributo action: usado para especificar a URL para onde os dados do formulário devem ser enviados.
• Atributo method: usado para especificar o método HTTP a ser usado ao enviar os dados do formulário. Os métodos mais comuns são GET e POST.

<form method="value-goes-here" action="url-goes-here">
  <!-- inputs go inside here -->
</form>

• Elemento input: usado para criar um campo de entrada para entrada do usuário.
• Atributo type: usado para especificar o tipo do campo de entrada. Ex. text, email, number, radio, checkbox, etc.
• Atributo placeholder: usado para mostrar uma dica ao usuário para indicar o que deve ser inserido no campo de entrada.
• Atributo value: usado para especificar o valor do input. Se o input for do tipo button, o atributo value pode ser usado para definir o texto do botão.
• Atributo name: usado para atribuir um nome a um campo de entrada, que serve como chave quando os dados do formulário são enviados. Para botões de opção, atribuir o mesmo name os agrupa, permitindo que apenas uma opção do grupo seja selecionada por vez.
• Atributo size: usado para definir o número de caracteres que devem estar visíveis enquanto o usuário digita no input.
• Atributo min: pode ser usado com tipos de entrada como number para especificar o valor mínimo permitido no campo de entrada.
• Atributo max: pode ser usado com tipos de entrada como number para especificar o valor máximo permitido no campo de entrada.
• Atributo minlength: usado para especificar o número mínimo de caracteres exigidos em um campo de entrada.
• Atributo maxlength: usado para especificar o número máximo de caracteres permitidos em um campo de entrada.
• Atributo required: usado para especificar que um campo de entrada deve ser preenchido antes de enviar o formulário.
• Atributo disabled: usado para especificar que um campo de entrada deve estar desabilitado.
• Atributo readonly: usado para especificar que um campo de entrada é somente leitura.

<!-- Text input -->
<input 
  type="text"
  id="name"
  name="name"
  placeholder="e.g. Quincy Larson" 
  size="20"
  minlength="5"
  maxlength="30"
  required
/>

<!-- Number input -->
<input 
  type="number"
  id="quantity"
  name="quantity"
  min="2"
  max="10"
  disabled
/>

<!-- Button -->
<input type="button" value="Show Alert" />

• Elemento label: usado para criar um rótulo para um campo de entrada.
• Atributo for: usado para especificar para qual campo de entrada o rótulo é.
• Associação implícita de formulário: os inputs podem ser associados a labels envolvendo o campo de input dentro do elemento label.

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

• Associação explícita de formulário: os inputs podem ser associados a labels usando o atributo for no elemento label.

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

• Elemento button: usado para criar um botão clicável. Um botão também pode ter um atributo type, que é usado para controlar o comportamento do botão quando ele é ativado. Ex. submit, reset e button.

<button type="button">Show Form</button>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>

• Elemento fieldset: usado para agrupar entradas relacionadas.
• Elemento legend: usado para adicionar uma legenda para descrever o grupo de entradas.

<!-- Radio group -->
<fieldset>
  <legend>Was this your first time at our hotel?</legend>

  <label for="yes-option">Yes</label>
  <input id="yes-option" type="radio" name="hotel-stay" value="yes" />

  <label for="no-option">No</label>
  <input id="no-option" type="radio" name="hotel-stay" value="no" />
</fieldset>

<!-- Checkbox group -->
<fieldset>
  <legend>
    Why did you choose to stay at our hotel? (Check all that apply)
  </legend>

  <label for="location">Location</label>
  <input type="checkbox" id="location" name="location" value="location" />

  <label for="price">Price</label>
  <input type="checkbox" id="price" name="price" value="price" />
</fieldset>

• Estado focado: este é o estado de um campo de entrada quando ele está selecionado pelo usuário.

Trabalhando com Elementos e Atributos de Tabela HTML

• Elemento de tabela: usado para criar uma tabela HTML.
• Elemento de Cabeçalho de Tabela (thead): usado para agrupar o conteúdo do cabeçalho em uma tabela HTML.
• Elemento de linha de tabela (tr): usado para criar uma linha em uma tabela HTML.
• Elemento de cabeçalho de tabela (th): usado para criar uma célula de cabeçalho em uma tabela HTML.
• Elemento do corpo da tabela (tbody): usado para agrupar o conteúdo do corpo em uma tabela HTML.
• Elemento de célula de dados da tabela (td): usado para criar uma célula de dados em uma tabela HTML.
• Elemento Table Foot (tfoot): usado para agrupar o conteúdo do rodapé em uma tabela HTML.
• Elemento caption: usado para adicionar um título a uma tabela HTML.
• Atributo colspan: usado para especificar o número de colunas que uma célula da tabela deve abranger.

<table>
  <caption>Exam Grades</caption>

  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Grade</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Davis</td>
      <td>Alex</td>
      <td>54</td>
    </tr>

    <tr>
      <td>Doe</td>
      <td>Samantha</td>
      <td>92</td>
    </tr>

    <tr>
      <td>Rodriguez</td>
      <td>Marcus</td>
      <td>88</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Average Grade</td>
      <td>78</td>
    </tr>
  </tfoot>
</table>

Trabalhando com Ferramentas HTML

• Validador HTML: uma ferramenta que verifica a sintaxe do código HTML para garantir que ele seja válido.
• Inspetor DOM: uma ferramenta que permite inspecionar e modificar a estrutura HTML de uma página web.
• Devtools: um conjunto de ferramentas para desenvolvedores web integradas diretamente no navegador que ajudam você a depurar, analisar desempenho e analisar páginas web.