Buscar

Formulario en HTML

Christian Perez
23 nov 2023
1 Min. de lectura

Actualizado: 18 jun 2024

En esta oportunidad les daré un diseño para realizarlo en algún proyecto el cuál requiera de un formulario de ingreso de datos.

Primero vamos a crear el proyecto "index.html"

luego, crearemos el archivos "styles.css"

y copia y pega el código a continuación:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form action="">
        <div class="input-field">
            <input type="text" id="name" required/>
            <label for="name">NOMBRE:</label>
        </div>

        <div class="input-field" id="section">
            <input type="text" id="location" min="1" required/>
            <label for="location">SEDE:</label>
        </div>

        <div class="input-field" id="section">
            <input type="email" id="email" required>
            <label for="email">EMAIL:</label>
        </div>

        <div class="input-field" id="section">
            <input type="password" id="password" required/>
            <label for="password">CONTRASEÑA:</label>
        </div>

        <div id="boton">
            <button type="submit" id="sub">Aceptar</button>
            
        </div>
    </form>
    
</body>
</html>

css

body{
    display: flex;
    justify-content:center;
    background-color: black;
}
form{
    margin: 100px;
}
.input-field{
    position: relative;
    width: 250px;
    height: 44px;
    line-height: 44px;
}
label{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #d3d3d3;
    transition: 0.2s all;
    cursor: text;
}
input{
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0.5rem 0;
    border-bottom: 2px solid #d3d3d3;
    font-family: 'Poppins', sans-serif;
    box-shadow: none;
    color: white;
    background-color: transparent;
    font-size: 1rem;
}
#section{
    margin-top: 30%;
}
#boton{
    padding-top: 50px;
    
}
#sub{
    position: relative;
    width: 100%;
    font-family: '',sans-serif;
    box-shadow: none;
    color: black;
    background-color: #00dd22;
    font-size: 1rem;
}
input:invalid{
    outline: 0;
}
input:focus,
input:valid{
    border-color: #00dd22;
}
input:focus~label,
input:valid~label{
    font-size: 14px;
    top: -24px;
    color: #00dd22;
}



Resultado:


Modifica cada campo para

1) Nombre
2) Apellido
3) Sexo
4) Sección
5) Contraseña
6) fotografía DPI
7) Subir un Archivo que compruebe la identidad
8) Ciudad
9) Sitio web
10) Ministerio (ej. Alabanza, Pastafari

Realizar una guia para iniciarte en la religion Pastafari