Aplicando CSS A Un Formulario

Continuamos aprendiendo a hacer uso de CSS, en esta ocasión vamos a crear un formulario en HTML
y le daremos forma utilizando propiedades de CSS.

Recordemos que los formularios se crean utilizando las etiquetas form e input de HTML, pero estas no
disponen de atributos, así que para hacer el formulario mas atractivo vamos a utilizar las propiedades
de CSS. Enlazándolas al formulario a través de la etiqueta <link href="propiedades.css"
rel="stylesheet" type="text/css">
Código para crear el formulario:

<!DOCTYPE html>
<html>
<head>
<title>Formulario HTML y CSS</title>
<meta charset="utf-8"/>
<meta name="description" content="Creando mi primer formulario con HTML y CSS"/>
<link href="propiedades.css" rel="stylesheet" type="text/css">
</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>
Este es el código que analizamos y creamos en el modulo de HTML, ahora vamos a sazonarlo
agregándole CSS. Para esto vamos a utilizar las siguientes propiedades:
Box-sizing: es una propiedad CSS para cambiar el modelo de caja por defecto de los navegadores.
Border :Establece algunas o todas las propiedades de todos los bordes de los elementos.
Alguno o todos los siguientes valores y en cualquier orden: anchura Estilo de borde color
Padding: establece el espacio de relleno requerido por todos los lados de un elemento. El área de
padding es el espacio entre el contenido del elemento y su borde (border). No se permiten valores
negativos. La propiedad padding es un atajo para evitar la asignación de cada lado por separado
(padding-top, padding-right, padding-bottom, padding-left).
Display: especifica si un elemento es tratado como block or inline element y el diseño usado por sus
hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible). Formalmente la propiedad
display establece los tipos de visualización interna y externa de un elemento.
Margin: establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer
cada lado por separado con las otras propiedades de margen: margin-top, margin-right, margin-bottom
y margin-left.
Font: permite establecer de una sola vez los valores para todas las propiedades: font-style, font-variant,
font-weight, font-size, line-height y font-family en una hoja de estilo.
Background: es un atajo para definir los valores individuales del fondo en una única regla CSS. Se
puede usar background para definir los valores de una o de todas las propiedades siguientes:
background-attachment, color, image, position, repeat.
Como vimos en la semana anterior, el uso de css es simple, solo basta con aplicar las propiedades a las
etiquetas que deseamos sean afectadas, por ejemplo si deseamos aplicar un ancho especifico al
formulario basta con definirlo de la siguiente manera:
form{
width:300px;
}
Si quisiéramos agregarle color al fondo:

form{
background-color:#3b83bd;
}
Y así funciona para todas las etiquetas de HTML.
Vamos a ponerlo en practica creando un formulario y aplicándole el diseño deseado, yo les voy a
proveer los códigos básicos y ustedes le van aplicar las modificaciones necesarias para adaptarlos a su
gusto, como son el color, tamaño, ancho, alto, etc.
Código para crear el formulario:

<!DOCTYPE html>
<html>
<head>
<title>Formulario HTML y CSS</title>
<meta charset="utf-8"/>
<meta name="description" content="Creando mi primer formulario con HTML y CSS"/>
<link href="propiedades.css" rel="stylesheet" type="text/css">
</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="Escribe tu 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>
Código CSS:
box-sizing:border-box;}
form{
width:300px;
padding:16px;
border-radius:10px;
margin:auto;
background-color:#3b83bd;
}
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;
}
Que se les pide?

1. Crear un carpeta con el nombre formulario
2. Abrir el bloc de notas y copiar y pegar el código para el formulario y guardar el documento con
el nombre formulario.html
3. Abrir el bloc de notas y copiar y el pegar las propiedades de CSS, editar el color, tamaño, ancho
y alto del formulario y los input, a su gusto, luego guardarlo con el nombre propiedades.css
4. Visualizar los resultados abriendo el documento formulario.html
5. Comprimir y subir la carpeta a la plataforma
Nota: deben de tener presente que las propiedades CSS se aplican al documento HTML a traves del
enlace: <link href="propiedades.css" rel="stylesheet" type="text/css">, si guarda el documento css con
un nombre distinto, deben de colocarlo en este codigo, reemplazando el nombre propiedades.css por el
que han colocado a su archivo.
Valor 20 puntos
Exito!

Aplicando CSS A Un Formulario

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Aplicando CSS A Un Formulario

Cargado por

Copyright:

Formatos disponibles

Continuamos aprendiendo a hacer uso de CSS, en esta ocasión vamos a crear un formulario en HTML

y le daremos forma utilizando propiedades de CSS.

Código para crear el formulario:

<link href="propiedades.css" rel="stylesheet" type="text/css">

<form action="#" target="" method="get" name="formDatosPersonales">

<label for="email" />Email</label>

<input type="submit" name="enviar" value="enviar datos"/>

Si quisiéramos agregarle color al fondo:

Y así funciona para todas las etiquetas de HTML.

Código para crear el formulario:

<link href="propiedades.css" rel="stylesheet" type="text/css">

<form action="#" target="" method="get" name="formDatosPersonales">

<label for="email" />Email</label>

<input type="submit" name="enviar" value="enviar datos"/>

Que se les pide?

También podría gustarte