Formulários são a base da interação do usuário em páginas web. Eles permitem que os usuários compartilhem informações, interajam com o conteúdo e realizem ações essenciais, como compras ou pesquisas, transformando sites estáticos em experiências dinâmicas.

Este curso terá foco na marcação de formulários. Ao final, será possível criar formulários funcionais que aprimoram a interação do usuário.

Veja um exemplo rápido de um formulário simples em ação:

<html lang="en">
  <head>
    <style>
      .border-container {
        border-radius: 10px;
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }

      .form1 {
        width: 400px;
        background-color: #fff;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .title1 {
        font-size: 24px;
        color: #333;
        margin-bottom: 20px;
        border-bottom: 2px solid #ff8a00;
        padding-bottom: 5px;
      }

      .label1 {
        font-size: 16px;
        color: #666;
        display: block;
        margin-top: 20px;
      }

      .input1 {
        width: 340px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .input1:focus,
      .input1:hover {
        outline: none;
        border-color: #ff8a00;
        box-shadow: 0 0 5px rgba(255, 138, 0, 0.5);
      }

      .input1[type="submit"] {
        background-color: #ff8a00;
        color: #fff;
        border: none;
        cursor: pointer;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 4px;
        transition: background-color 0.3s ease;
        width: 100px;
        display: block;
        margin: 30px auto 0 auto;
      }

      .input1[type="submit"]:hover {
        background-color: #d27204;
      }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Play:wght@400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu+Mono&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 18px;
        font-weight: 400;
        box-sizing: border-box;
        vertical-align: baseline;
      }
      body {
        font-family: "Hind Siliguri", sans-serif;
        line-height: 1;
        height: 100%;
        overflow: hidden;
      }
      img {
        display: block;
        width: 100%;
        max-width: 550px;
        margin: 0 auto;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body class="body1" style="padding: 1.5px 0">
    <div class="border-container">
      <form class="form1" onsubmit="return false">
        <h3 class="title1">Contato principal</h3>
        <label class="label1" for="name">Nome</label>
        <input class="input1" type="text">
        <label class="label1" for="sirname">Sobrenome</label>
        <input class="input1" type="text" id="sirname">
        <label class="label1" for="phone">Número de telefone</label>
        <input class="input1" type="tel" id="phone">
        <label class="label1" for="mail">E-mail</label>
        <input class="input1" type="email" id="mail">
        <input class="input1" type="submit" value="Submit">
      </form>
    </div>
  </body>
</html>


Formulários como este permitem que os usuários se conectem e interajam com seu site. Vamos explorar formulários funcionais!

> Nota
>
> Este curso aborda a criação de marcação e a formatação de elementos de formulário. Ao final, será possível habilitar a interação e o engajamento do usuário.
>
> No entanto, o processamento dos dados enviados pelos formulários - como armazená-los em um banco de dados ou utilizar linguagens de servidor como JavaScript (Node.js), Python, PHP ou Go - não é abordado neste curso.

Qual é o principal objetivo dos formulários em páginas da web?

Aprenda os conceitos essenciais de HTML (HyperText Markup Language), a base do desenvolvimento web. Este curso para iniciantes aborda tags, atributos, elementos e a estruturação de páginas web. Adquira habilidades práticas na criação de títulos, parágrafos, listas, imagens, links, formulários e tabelas. Explore boas práticas, otimização e acessibilidade na web. Inicie sua jornada no desenvolvimento web com HTML.

Explore o funcionamento interno da web. Entenda como os dados trafegam pelas redes, descubra o papel dos protocolos e desvende os mistérios dos endereços IP e nomes de domínio. Obtenha uma compreensão geral de como navegadores e servidores se comunicam para entregar conteúdo web.

Descubra o poder das tags para estruturar o conteúdo, desde títulos e parágrafos até listas e tabelas. Aprenda como aprimorar os elementos com atributos.

O núcleo da estrutura de documentos HTML. Aprenda os componentes de um documento HTML, incluindo a declaração do doctype, head e body. Compreenda o propósito de cada elemento e como eles contribuem para a estrutura geral de uma página web.

Torne uma página web mais atraente com o uso de mídias como imagens, áudio e vídeo. Trabalhe com dados tabulares estruturados na forma de tabelas.

Explore a versatilidade dos formulários HTML. Aprenda a projetar formulários intuitivos e fáceis de usar aproveitando conceitos e técnicas essenciais. Descubra como os formulários possibilitam a interação do usuário e o envio de dados em sites.

HTML Definitivo

Introdução aos Formulários HTML