Cómo crear un formulario con HTML y CSS

299

En este tutorial aprenderás a crear un formulario para tu blog o sitio web, con el cual podrás crear tu propia base de datos de los usuarios que visitan tu web para ver tu contenido, productos o servicios.

Pasos para crear un formulario:

Crea un documento html.
Dentro de la etiqueta <body> crea un <div> con la clase: form-container.
Crea una etiqueta <h1> para el título de tu formulario.
Ahora crea la etiqueta <section> con la clase: form.
Crea una etiqueta <form>.
Coloca las etiquetas que contendran tu formulario. (<label>,<input> con un id="", y una etiqueta <button>)
Dentro de la etiqueta <head> ingresa la etiqueta <style>.
Debajo de <style> comienza a darle estilo al body de tu formulario. Luego continua con los demás estilos (Ver código de ejemplo).
Puedes crearle los estilos que desees a tu formulario.

Espero que te sirva este tutorial.

<code>

<!DOCTYPE html>
<html lang=“en”>

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}

    .form-container {
        background: papayawhip;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 300px;
        text-align: center;
    }

    .h1 {
        background: papayawhip;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 20px;
        font-size: 1.2em;
    }

    .form {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    input {
        background: palevioletred;
        width: calc(100% - 20px);
        padding: 10px;
        margin: 10px 0;
        border: none;
        border-radius: 5px;
        color: white;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    label {
        color: black;
        margin: 10px 0 5px;
        display: block;
        text-align: left;
    }

    button {
        margin-top: 20px;
        border-radius: 10px;
        background-color: rgb(51, 107, 236);
        height: 40px;
        width: 100%;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 16px;
    }

    button:hover {
        background-color: rgb(41, 87, 186);
    }
</style>

</head>

<body>
<div class=“form-container”>
<h1 class=“h1”>Regístrate para recibir ofertas y promociones</h1>
<section class=“form”>
<form action="">
<label for=“Name”>Name</label>
<input type=“text” id=“Name”>
<label for=“Email”>Email</label>
<input type=“text” id=“Email”>
<button>Registrarme</button>
</form>
</section>
</div>
</body>

</html>

hace 5 meses