Formulários HTML: Crie Formulários Interativos com Tipos de Entrada

Introdução

Neste laboratório, os alunos aprenderão a criar elementos de formulário HTML abrangentes usando vários tipos de entrada. O laboratório oferece uma abordagem estruturada para entender os atributos da tag de formulário, implementar diferentes elementos de entrada e explorar técnicas de design de formulários. Os participantes obterão experiência prática com entradas de texto, botões de rádio, caixas de seleção, uploads de arquivos e botões de envio, desenvolvendo habilidades essenciais de desenvolvimento web para criar formulários web interativos e fáceis de usar.

O laboratório cobre conceitos-chave como configuração da tag de formulário, variações de tipo de entrada e estratégias de implementação prática. Ao trabalhar em exercícios passo a passo, os alunos entenderão como estruturar formulários, definir atributos de entrada e criar elementos de interação dinâmica do usuário que são cruciais para coletar e processar dados do usuário em aplicações web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 95%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Entenda a Tag de Formulário e seus Atributos Básicos

Nesta etapa, você aprenderá sobre as tags de formulário HTML e seus atributos básicos. Os formulários são essenciais para coletar dados de entrada do usuário em páginas web, permitindo a interação entre usuários e websites.

Vamos começar criando um formulário HTML básico no WebIDE. Abra um novo arquivo no diretório ~/project e nomeie-o form_basics.html.

touch ~/project/form_basics.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Form Basics</title>
  </head>
  <body>
    <form action="/submit" method="post">
      <!-- Form elements will be added here -->
    </form>
  </body>
</html>

A tag <form> possui dois atributos-chave:

action: Especifica para onde os dados do formulário serão enviados quando submetidos
method: Define como os dados são enviados (tipicamente "get" ou "post")

Vamos detalhar os atributos do formulário:

action="/submit": Este seria tipicamente um endpoint do lado do servidor que processa os dados do formulário
method="post": Envia os dados do formulário no corpo da requisição, mais seguro para informações sensíveis

Exemplo de saída de uma estrutura de formulário básica:

<form action="/submit" method="post">
  <!-- Form will look like this when rendered -->
</form>

Atributos comuns de formulário incluem:

name: Identifica o formulário
id: Identificador único para o formulário
target: Especifica onde exibir a resposta
enctype: Especifica como os dados do formulário devem ser codificados

Se você renderizar o formulário em um navegador, ele ainda não exibirá nenhum conteúdo visível. A estrutura do formulário é a base para adicionar elementos interativos como entradas de texto, botões de rádio e muito mais.

Implementar Elementos de Entrada de Texto

Nesta etapa, você aprenderá sobre diferentes tipos de elementos de entrada de texto em formulários HTML. Continuaremos trabalhando com o arquivo form_basics.html criado na etapa anterior.

As entradas de texto são elementos de formulário fundamentais que permitem aos usuários inserir vários tipos de informações baseadas em texto. Vamos explorar diferentes tipos de entrada:

Abra seu arquivo ~/project/form_basics.html e atualize o formulário com vários elementos de entrada de texto:

<form action="/submit" method="post">
  <!-- Single-line text input -->
  <label for="username">Username:</label>
  <input
    type="text"
    id="username"
    name="username"
    placeholder="Enter your username"
  />

  <!-- Email input -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email" />

  <!-- Password input -->
  <label for="password">Password:</label>
  <input
    type="password"
    id="password"
    name="password"
    placeholder="Enter your password"
  />

  <!-- Number input -->
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="0" max="120" />

  <!-- Multiline text input -->
  <label for="comments">Comments:</label>
  <textarea
    id="comments"
    name="comments"
    rows="4"
    cols="50"
    placeholder="Enter your comments"
  ></textarea>
</form>

Atributos-chave para entradas de texto:

type: Define o tipo de entrada (text, email, password, number)
id: Identificador único para a entrada
name: Nome usado ao enviar os dados do formulário
placeholder: Texto de dica exibido antes da entrada do usuário
min e max: Limites para entradas numéricas
rows e cols: Dimensões para textarea

Exemplo de saída quando renderizado em um navegador:

Notas: Saiba mais sobre Como visualizar arquivos HTML no WebIDE.

Criar Elementos de Seleção Radio e Checkbox

Nesta etapa, você aprenderá como criar botões de rádio e caixas de seleção (checkboxes) em formulários HTML. Esses tipos de entrada são cruciais para permitir que os usuários façam seleções a partir de opções predefinidas.

Abra seu arquivo ~/project/form_basics.html e adicione os seguintes elementos de rádio e checkbox:

<form action="/submit" method="post">
  <!-- Radio Button Group -->
  <fieldset>
    <legend>Select Your Favorite Programming Language:</legend>
    <input type="radio" id="python" name="language" value="python" />
    <label for="python">Python</label>

    <input type="radio" id="javascript" name="language" value="javascript" />
    <label for="javascript">JavaScript</label>

    <input type="radio" id="java" name="language" value="java" />
    <label for="java">Java</label>
  </fieldset>

  <!-- Checkbox Group -->
  <fieldset>
    <legend>Select Your Skills:</legend>
    <input type="checkbox" id="html" name="skills" value="html" />
    <label for="html">HTML</label>

    <input type="checkbox" id="css" name="skills" value="css" />
    <label for="css">CSS</label>

    <input type="checkbox" id="javascript" name="skills" value="javascript" />
    <label for="javascript">JavaScript</label>
  </fieldset>
</form>

Pontos-chave sobre botões de rádio e checkboxes:

Botões de rádio (type="radio") permitem apenas uma seleção em um grupo
Checkboxes (type="checkbox") permitem múltiplas seleções
O atributo name agrupa entradas relacionadas
O atributo value define o valor submetido
<fieldset> e <legend> ajudam a organizar e rotular grupos de entrada

Exemplo de saída quando renderizado em um navegador:

HTML form with radio buttons and checkboxes

Adicionar Upload de Arquivos e Botões de Envio

Nesta etapa, você aprenderá como adicionar entradas de upload de arquivos e botões de envio ao seu formulário HTML. Esses elementos são essenciais para permitir que os usuários carreguem arquivos e enviem dados do formulário.

Abra seu arquivo ~/project/form_basics.html e adicione os seguintes elementos:

<form action="/submit" method="post" enctype="multipart/form-data">
  <!-- Previous form elements from previous steps -->

  <!-- File Upload Input -->
  <fieldset>
    <legend>Upload Your Profile Picture:</legend>
    <input type="file" id="profile-pic" name="profile-pic" accept="image/*" />
  </fieldset>

  <!-- Submit and Reset Buttons -->
  <div>
    <input type="submit" value="Submit Form" />
    <input type="reset" value="Clear Form" />
  </div>
</form>

Pontos-chave sobre upload de arquivos e botões de envio:

type="file" cria uma entrada de upload de arquivo
accept="image/*" limita a seleção de arquivos a imagens
enctype="multipart/form-data" é necessário para uploads de arquivos
type="submit" cria um botão para enviar dados do formulário
type="reset" limpa todas as entradas do formulário

Exemplo de saída quando renderizado em um navegador:

Atributos importantes:

accept: Especifica os tipos de arquivo permitidos
value: Define o texto nos botões
name: Identifica a entrada quando enviada

Praticar Combinações de Elementos de Formulário

Nesta etapa final, você criará um formulário de registro abrangente que combina todos os elementos de formulário HTML que você aprendeu. Projetaremos um formulário de registro de usuário que demonstra a aplicação prática de vários tipos de entrada.

Crie um novo arquivo ~/project/registration_form.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>User Registration Form</title>
  </head>
  <body>
    <form action="/register" method="post" enctype="multipart/form-data">
      <h2>User Registration</h2>

      <!-- Personal Information -->
      <fieldset>
        <legend>Personal Details</legend>
        <label for="fullname">Full Name:</label>
        <input type="text" id="fullname" name="fullname" required />

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required />

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="18" max="100" />
      </fieldset>

      <!-- Account Preferences -->
      <fieldset>
        <legend>Account Preferences</legend>
        <label>Preferred Programming Language:</label>
        <input type="radio" id="python" name="language" value="python" />
        <label for="python">Python</label>

        <input
          type="radio"
          id="javascript"
          name="language"
          value="javascript"
        />
        <label for="javascript">JavaScript</label>

        <label>Skills:</label>
        <input type="checkbox" id="web" name="skills" value="web" />
        <label for="web">Web Development</label>

        <input type="checkbox" id="data" name="skills" value="data" />
        <label for="data">Data Science</label>
      </fieldset>

      <!-- Profile Picture -->
      <fieldset>
        <legend>Profile Picture</legend>
        <input type="file" id="profile" name="profile" accept="image/*" />
      </fieldset>

      <!-- Additional Comments -->
      <fieldset>
        <legend>Additional Information</legend>
        <label for="comments">Comments:</label>
        <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
      </fieldset>

      <!-- Form Submission -->
      <div>
        <input type="submit" value="Register" />
        <input type="reset" value="Clear Form" />
      </div>
    </form>
  </body>
</html>

Principais características deste formulário combinado:

Múltiplos tipos de entrada (texto, email, número, rádio, checkbox)
Upload de arquivo
Textarea para comentários adicionais
Botões de envio e reset
Fieldsets para organizar seções do formulário
Campos obrigatórios e opcionais

Exemplo de saída quando renderizado em um navegador:

Resumo

Neste laboratório, os participantes aprenderam os fundamentos da criação de formulários HTML, explorando elementos e atributos essenciais de formulários. O laboratório guiou os alunos através da compreensão das estruturas de tags de formulário, com foco em atributos-chave como action e method, que definem como os dados do formulário são processados e transmitidos. Os participantes praticaram a criação de layouts de formulários básicos e a implementação de vários tipos de entrada, incluindo entradas de texto, botões de rádio, caixas de seleção e elementos de upload de arquivos.

A abordagem prática permitiu que os alunos desenvolvessem habilidades práticas no design de formulários web interativos, cobrindo aspectos críticos como configuração de elementos de entrada, métodos de envio de formulários e design de interação do usuário. Ao construir progressivamente componentes de formulário, os alunos obtiveram insights sobre como estruturar interfaces web funcionais e fáceis de usar, utilizando técnicas padrão de formulários HTML.

Criar Elementos de Formulário HTML com Tipos de Entrada

Introdução

Entenda a Tag de Formulário e seus Atributos Básicos

Implementar Elementos de Entrada de Texto

Criar Elementos de Seleção Radio e Checkbox

Adicionar Upload de Arquivos e Botões de Envio

Praticar Combinações de Elementos de Formulário

Resumo