25 Abr Estilizar un formulario html con css
Posted at 07:30h in Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web., Ejercicios CSS 6 Comments
En este ejercicio vamos a crear un formulario html sencillo y a estilizarlo.
Para ello es necesario dominar algunos conceptos importantes:
- Elementos bloque, en línea y en línea bloque.
- Como crear formularios html.
- Algunas propiedades útiles como
resize: vertical | horizontal | none | both;
Vayamos al enunciado.
Enunciado
Genera un formulario html según la imagen adjunta y que cumpla las siguientes especificaciones:
- El formulario web debe pedir por los datos nombre, apellidos, email, asunto y mensaje.
- El destino de los datos rellenados en el formulario una vez enviados debe ser la propia página.
- No contiene php ni otros lenguajes distintos a html o css (no es funcional).
- El campo email es de obligado relleno.
- El formulario es usable. Cuando un usuario haga click en el texto que acompaña cada campo, el cajetín correspondiente debe seleccionarse.
- El cajetín de mensaje puede contener como máximo 300 caracteres.
- Cuando se pase el cursor por encima del botón de enviar, el cursor debe cambiar de icono.
- El color de fondo es el #ccc y el color de los cajetines el #f6f6f6;
Solución del ejercicio
En primer lugar se indica el html.
En segundo lugar se indica el css.
Como curiosidad, la propiedad resize de css sirve para indicar si <textarea> se puede expandir verticalmente, horizontalmente o en ningún sentido. Esta propiedad en realidad también podría usarse con otras etiquetas como <div>.
¿Como queda el documento html?
<!DOCTYPE html>
<html>
<head>
<title>Introducción formularios web</title>
<meta charset="utf-8"/>
<meta name="description" content="Un formulario sirve para enviar datos a otra página que los recoge para usarlos o almacenarlos."/>
<style>
</style>
</head>
<body>
<form action="#" target="" method="get" name="formDatosPersonales">
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" placeholder="Escribe tu nombre"/>
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" placeholder="1r Apellido"/>
<label for="email" />Email</label>
<input type="email" name="email" id="email" placeholder="email" required />
<label for="asunto">Asunto</label>
<input type ="text" name="asunto" id="asunto" placeholder="titular de la consulta"/>
<label for="mensaje">Mensaje</label>
<textarea name="mensaje" for="mensaje" placeholder="describe brevemente en menos de 300 carácteres" maxlength="300"></textarea>
<input type="submit" name="enviar" value="enviar datos"/>
</form>
</body>
</html>¿Como queda el css?
*{box-sizing:border-box;}
form{
width:300px;
padding:16px;
border-radius:10px;
margin:auto;
background-color:#ccc;
}
form label{
width:72px;
font-weight:bold;
display:inline-block;
}
form input[type="text"],
form input[type="email"]{
width:180px;
padding:3px 10px;
border:1px solid #f6f6f6;
border-radius:3px;
background-color:#f6f6f6;
margin:8px 0;
display:inline-block;
}
form input[type="submit"]{
width:100%;
padding:8px 16px;
margin-top:32px;
border:1px solid #000;
border-radius:5px;
display:block;
color:#fff;
background-color:#000;
}
form input[type="submit"]:hover{
cursor:pointer;
}
textarea{
width:100%;
height:100px;
border:1px solid #f6f6f6;
border-radius:3px;
background-color:#f6f6f6;
margin:8px 0;
/*resize: vertical | horizontal | none | both*/
resize:none;
display:block;
}Si juntamos todas las piezas resolvemos el ejercicio.
¡Hola!
Querido lector,
¿Como podríamos hacer para que este formulario fuera además responsive?
Es un buen ejercicio que te invito a practicar.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Ejemplo de como generar y crear un sprite css para mejorar la carga web
El sprite permite mejorar el tiempo de carga de una web. Creamos un sprite y mostramos un ejemplo de código html y css para usarlo
El sprite permite mejorar el tiempo de carga de una web. Creamos un sprite y mostramos un ejemplo de código html y css para usarlo
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Creación de una página web en mantenimiento con html y css
Creación de una landing page de página en mantenimiento con html y css. Incluye solución.
Creación de una landing page de página en mantenimiento con html y css. Incluye solución.
Ejercicio css. Separar el css de un html
Ejercicio CSS en el que a partir de una hoja html dada se pide separar al máximo html y css en hojas separadas. Incluye solución.
Ejercicio CSS en el que a partir de una hoja html dada se pide separar al máximo html y css en hojas separadas. Incluye solución.
Estilos css para enlaces. :link, :visited:, :hover, :active
Las propiedades que controlan los estados de un enlace son :link, :visited, :hover, :active en este orden. Se muestra un ejemplo de uso para hacer un botón.
Las propiedades que controlan los estados de un enlace son :link, :visited, :hover, :active en este orden. Se muestra un ejemplo de uso para hacer un botón.
Centrado vertical de un contenido web con css
Centrar un contenido horizontalmente es relativamente fácil. ¿Sin embargo cuando lo queremos hacer verticalmente que alternativas tenemos? En esta publicación se plantean 3.
Centrar un contenido horizontalmente es relativamente fácil. ¿Sin embargo cuando lo queremos hacer verticalmente que alternativas tenemos? En esta publicación se plantean 3.
Haile
Posted at 20:22h, 19 diciembrecomo se puede insertar un imagen dentro de label en el formulario en html y css?
Francesc Ricart
Posted at 23:25h, 19 diciembrehola haile,
no sé si termino de entender a que te refieres.
¿y en todo caso luego le aplicas estilos?
o te refieres a algo del tipo:
dónde la imagen es la que tu necesites…
diego moretti
Posted at 04:16h, 10 juniolo haces con style background-image y url
Francesc Ricart
Posted at 00:59h, 11 junioHola Diego,
Gracias por tu comentario.
Entonces quedaría como fondo por detrás del texto.
Saludos,
Irwin Concha
Posted at 17:34h, 09 diciembreMuchas gracias me faltaba / en la siguiente declaración
Francesc Ricart
Posted at 23:01h, 09 diciembreCreo que el sistema de comentarios automático de wordpress no ha aceptado el html.
En cualquier caso gracias. ¡A otras personas les puede ayudar!
Saludos,