AlvaroRuizGomez
8/16/2019 - 5:33 PM

Formulario Entrada HTML5/CSS

Formulario de entrada con codigo en HTML y CSS

FormularioHTML-CSS.html
content_copyfile_download
<!--------------------------------->
<!-- Formulario de entrada HTML---->
<!--------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Metadatos Web -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- HTML Meta Tags -->
    <title>Formulario</title>
    <meta name="description" content="">

    <!-- Google / Search Engine Tags -->
    <meta itemprop="name" content="">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="http://">

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="http://">
    <meta property="og:type" content="website">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="http://">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="http://">

<!-- archivos externos -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

    <h4 class="titulo">formulario de contacto</h4>
    <form action="enviar.html" method="post">
        <input type="text" name="nombre" id="nombre" placeholder="* nombre">    
        <input type="text" name="apellidos" id="apellidos" placeholder="* apellidos">
        <input type="text" name="movil" id="movil" placeholder="móvil">
        <input type="email" name="email" id="email" placeholder="* email">
        <textarea name="comentario" id="comentario" rows="10">* comentario</textarea>
        <button type="submit">enviar</button>
    </form>

</body>
</html>

/********************************
    Formulario de entrada CSS ***
*********************************/

/* Estilos Básicos */
/* *************** */
*{
    box-sizing: border-box;
}
/* Tipografía */
html{
    font-family: arial, sans-serif;
    font-size: 16px;
}
::placeholder, textarea{
    font-size: 1.2rem;
}

/* Colores */
body{
    background-color: #F5F5F5;
}
input, textarea{
    border: 0;
}
.titulo{
    color: #a2a2a2;
}
::placeholder, #comentario{
    color: #a0a0a0;
}
#comentario{
    color: #d0d0d0;
}


/* Enlaces */


/* Botones */
button{
    background-color: #C7C7C7;
    border: 0;
    padding: 0.5rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #fff;
    border-radius: 1.3rem;
}

/* Margenes */
body{
    padding: 1rem 2rem 3rem 2rem;
    height: 100vh;
}

/* Tamaños */
.titulo{
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: bold;
}
input{
    height: 50px;
    padding: 0.5rem;
}
textarea{
    padding: 0.5rem;
    flex-grow: 0.7;
}

/* Maquetación del contenido */
/* ************************ */
.titulo{
    text-align: center;
    margin-bottom: 2rem;
}
form{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 2rem);
}