Menu
Coddy logo textTech

Recapitulação - Formulários #2

Parte da seção Fundamentals do Journey de HTML da Coddy — lição 47 de 60.

challenge icon

Desafio

Fácil

Vamos construir um formulário de registro simples, exatamente como o da imagem abaixo!

Exemplo de formulário de registro

Aqui está o que deve ser incluído:

  1. Uma tag <form> para envolver tudo.
  2. Um campo de Nome de Usuário com um rótulo (label) e uma entrada de texto. O rótulo deve dizer "Username:" e usar for="username". A entrada deve ter id="username", name="username", type="text" e o placeholder "Enter your username".
  3. Um campo de E-mail com um rótulo e uma entrada de e-mail. O rótulo deve dizer "Email:" e usar for="email". A entrada deve ter id="email", name="email", type="email" e o placeholder "Enter your email".
  4. Um campo de Senha com um rótulo e uma entrada de senha. O rótulo deve dizer "Password:" e usar for="userpassword". A entrada deve ter id="userpassword", name="userpassword", type="password" e o placeholder "Enter your password".
  5. Um grupo de botões de rádio para permitir que os usuários selecionem seu tipo: "Student" ou "Teacher". Adicione um parágrafo ou título que diga "User Type:" acima dos botões de rádio. O botão de rádio "Student" deve ter id="student", name="usertype", value="student" e um rótulo que diga "Student". O botão de rádio "Teacher" deve ter id="teacher", name="usertype", value="teacher" e um rótulo que diga "Teacher". Lembre-se: ambos os botões de rádio devem ter o mesmo atributo name ("usertype") para que apenas um possa ser selecionado por vez.
  6. Um grupo de caixas de seleção (checkboxes) para permitir que os usuários escolham seus interesses: "Sports", "Music" e "Technology". Adicione um parágrafo ou título que diga "Interests:" acima das caixas de seleção. A caixa de seleção "Sports" deve ter id="sports", name="interests", value="sports" e um rótulo que diga "Sports". A caixa de seleção "Music" deve ter id="music", name="interests", value="music" e um rótulo que diga "Music". A caixa de seleção "Technology" deve ter id="technology", name="interests", value="technology" e um rótulo que diga "Technology". Lembre-se: todas as caixas de seleção devem ter o mesmo atributo name ("interests"), pois estão no mesmo grupo.
  7. Um botão de Sign Up e um botão de Clear ao final do formulário. O botão Sign Up deve ter type="submit" e o botão Clear deve ter type="reset". O botão Sign Up deve exibir o texto "Sign Up" e o botão Clear deve exibir o texto “Clear”.

Certifique-se de incluir rótulos e títulos adequados para uma experiência amigável ao usuário!

Lembre-se, as entradas devem incluir estes atributos importantes: type, id, name e value.

Experimente você mesmo

<!DOCTYPE html>
<html>
    <body>
        <!-- Escreva o código aqui -->
    </body>
</html>

Todas as lições de Fundamentals