Jump to content

Como criar um formulário HTML com inputs variados e estilizar com CSS?

peroba

Por peroba
em HTML & CSS

 Compartilhar

Postagens Recomendadas

peroba

peroba

Postado
Postado

Coloque aqui o CÓDIGO de um formulário HTML no qual o usuário possa inserir os seguintes dados:

Nome

E-mail

CPF

Senha (Usar o input type="password")

Relacionamento (Usar o input type="radio" => Solteiro; Relacionamento Sério; Casado)

Disciplinas com Afinidade (Usar o input type="checkbox" => Colocar as 6 disciplinas cursadas no Módulo I do nosso Curso Técnico em Informática EaD)

Botão para Resetar os Dados

Botão para Envio do Formulário

Css estilizar código. 

Boa noite tenho pouco dias de curso é não estou conseguindo fazer esse código 

frankhosaka

frankhosaka

Postado
Postado

Peça o dinheiro de volta! Um curso que pede uma coisa que você não sabe fazer é uma roubada! Sai mais barato você estudar com o copilot.microsoft.com, aqui a listagem que ele fez:

  

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Formulário de Inscrição</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            max-width: 500px;
            width: 100%;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group input[type="password"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ced4da;
            border-radius: 4px;
        }
        .form-group input[type="radio"],
        .form-group input[type="checkbox"] {
            margin-right: 5px;
        }
        .form-group input[type="submit"],
        .form-group input[type="reset"] {
            background-color: #007bff;
            color: #ffffff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        .form-group input[type="reset"] {
            background-color: #dc3545;
        }
        .form-group input[type="submit"]:hover,
        .form-group input[type="reset"]:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Formulário de Inscrição</h2>
        <form>
            <div class="form-group">
                <label for="nome">Nome</label>
                <input type="text" id="nome" name="nome" required>
            </div>
            <div class="form-group">
                <label for="email">E-mail</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="cpf">CPF</label>
                <input type="text" id="cpf" name="cpf" required>
            </div>
            <div class="form-group">
                <label for="senha">Senha</label>
                <input type="password" id="senha" name="senha" required>
            </div>
            <div class="form-group">
                <label>Relacionamento</label>
                <input type="radio" id="solteiro" name="relacionamento" value="Solteiro">
                <label for="solteiro">Solteiro</label>
                <input type="radio" id="relacionamento_serio" name="relacionamento" value="Relacionamento Sério">
                <label for="relacionamento_serio">Relacionamento Sério</label>
                <input type="radio" id="casado" name="relacionamento" value="Casado">
                <label for="casado">Casado</label>
            </div>
            <div class="form-group">
                <label>Disciplinas com Afinidade</label>
                <input type="checkbox" id="disciplina1" name="disciplinas" value="Disciplina 1">
                <label for="disciplina1">Disciplina 1</label>
                <input type="checkbox" id="disciplina2" name="disciplinas" value="Disciplina 2">
                <label for="disciplina2">Disciplina 2</label>
                <input type="checkbox" id="disciplina3" name="disciplinas" value="Disciplina 3">
                <label for="disciplina3">Disciplina 3</label>
                <input type="checkbox" id="disciplina4" name="disciplinas" value="Disciplina 4">
                <label for="disciplina4">Disciplina 4</label>
                <input type="checkbox" id="disciplina5" name="disciplinas" value="Disciplina 5">
                <label for="disciplina5">Disciplina 5</label>
                <input type="checkbox" id="disciplina6" name="disciplinas" value="Disciplina 6">
                <label for="disciplina6">Disciplina 6</label>
            </div>
            <div class="form-group">
                <input type="reset" value="Resetar">
                <input type="submit" value="Enviar">
            </div>
        </form>
    </div>
</body>
</html>

 

  • Curtir 1
  • Casa do Desenvolvedor mudou o título para Como criar um formulário HTML com inputs variados e estilizar com CSS?
peroba

peroba

Postado
  • Autor(a)
Postado

Agradeço muito me ajudou eu estou começando a apreender e a escola me apresenta um PDF de 5 páginas e procurei o lugar certo tem cursos aqui e fui bem recebido isso é ótimo muito obrigado. 

  • Curtir 1

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...