Ignacia Lastra Tarea3

Hojas de estilo CSS
María Ignacia Lastra Tapia
Programación HTML II
Instituto IACC
1 Mayo 2020
Introducción:
A continuación se presenta el formulario con una hoja de estilo en CSS, pudiendo enlazar esta
con el archivo HTML de modo que el formulario realizado logre una interfaz didáctica e
interactiva para el usuario.
Desarrollo:
1.- Para comenzar a trabajar con la hoja de estilos de CSS, es necesario crear una carpeta dentro
de la carpeta raíz del formulario, y dentro de esta carpeta (que nombraré "estilo CSS") estará el
contenido de la hoja de estilos. Con el programa, NotePad++ se creará la hoja de estilo con la
extención .css.
Es importante realizar una vinculación con el formulario.html, y dicha vinculación debe estar
dentro de la etiqueta <head> y crear otra etiqueta nombrada <link>, la cual permitirá enlazar el
documento con la hoja de estilo. Dicha etiqueta, hará referencia (href) a la ruta donde se
encuentra guardada la hoja de estilo. Junto al atributo "rel", permitirá relacionar el documento
con el enlace de la referencia, este atributo irá seguido por el valor "stylesheet" y otro atributo
llamado "type" para indicar el tipo de hoja de estilo con el que se trabajará que en este caso es
"text/css".
<!DOCTYPE html>
<html>
<head>
-->Para enlazar la hoja de estilo con el archivo html, y así poder visualizarlo en la página<--
<link href="estilo.css" rel="stylesheet">
<title>Formulario de Encuesta Online</title>
</head>
<body>
<form action="mailto:alguien@ejemplo.com" method="post" enctype="text/plain">

<label for="rut_">Rut:</label>
<input type="text" name="rut" id="rut_" maxlength="12"
title="Ingresar el rut tipo 12.345.678-9" placeholder="12.345.678-9" pattern="[0-9]{2}.[0-9]
{3}.[0-9]{3}-[0-9kK]" accesskey="r"/>
<br><br>
<label for="edad_">Edad:</label>
<input type="number" min="10" max="120" id="edad_" name="edad" accesskey="e">
<br><br>
<label>Género: </label>
<input type="radio" id="gm" value="male" name="genero">
<label for="gm">Hombre</label>
<input type="radio" id="gf" value="female" name="genero">
<label for="gf">Mujer</label>
<br><br>
<label for="frec_">Frecuencia con la que usa servicio: </label> <select id="frec_"

name="frecuencia">
<option value="nn">Nunca</option>
<option value="pf">Con poca frecuencia</option>
<option value="rg">Regularmente</option>
<option value="tt">Todo el tiempo</option>
</select>
<br><br>
<label for="hor_">Horario en el que usa el servicio normalmente:</label> <select id="hor_"
name="horario">
<option value="hp">Horario Punta</option>
<option value="hm">Horario Medio</option>
<option value="hv">Horario Valle</option>
</select>
<br><br>
<label>Líneas del Metro que utiliza normalmente: </label>
<br><br>
<input type="checkbox" id="Linea1" tabindex=1 value="Linea1" name="linea"> <label
for="Linea1">Linea1</label>
<br><br>
<label for="cs_">Calidad del servicio: </label> <select id="cs_" name="calidad">
<option value="ml">Malo</option>
<option value="df">Deficiente</option>
<option value="reg">Regular</option>
<option value="bn">Bueno</option>
<option value="ex">Excelente</option>
</select>
<br><br>
<label for="obs_"> Observaciones Personales: </label>
<br><br>
<textarea name="observaciones" id="obs_" maxlength="200" rows="5" accesskey="o">
</textarea>
<br><br>
<label for="hr_"hidden>Hora:</label>
<input type="hidden" id="hr_" name="hora" disabled value="23:45" />
<br>
<label for="fecha_"hidden>Fecha: </label>
<input type="datetime" id="fecha_" name="fecha" disabled value="16/04/2020" />
<p id="usuario"></p>
--> Se agrega un atributo de clase para el color del botón "Enviar Formulario" <--
<input type="submit" class="btn btn-blue" value="Enviar Formulario" accesskey="s"/>
<input type="reset" value="Limpiar" accesskey="l"/>
<br><br>
<p>Para acceder a los atajos de este formulario utilice:</p>
<br>
<p>Rut= ctrl+r, Edad= ctrl+e , Observaciones= ctrl+o , Enviar= ctrl+s , Limpiar formulario=
ctrl+l</p>
</form>
</body>
</html>
Código en php para ser conectado con phpMyAdmin:
<?php
$servidor="localhost";
$usuario="root";
$clave="";
$baseDeDatos="usuarios";
$enlace= mysqli_connect('$servidor', '$usuario', '$clave','$baseDeDatos');

if (!$enlace){
echo ("Error de conexión con el servidor");
if (isset($_POST['enviar'])){
$rut = $_POST['rut'];
$edad = $_POST['edad'];
$genero = $_POST['genero'];
$frecuencia = $_POST['frecuencia'];
$horario = $_POST['horario'];
$linea = $_POST['linea'];
$calidad = $_POST['calidad'];
$observaciones = $_POST['observaciones'];
$fecha = $_POST['fecha'];
$insertarDatos = "INSERT INTO usuario VALUES('$rut', '$edad', '$genero', '$frecuencia',

'$linea',
'$calidad', '$observaciones', '$fecha')";
$ejecutarInsertar = mysqli_query($enlace, $insertarDatos) or die ('Datos enviados de forma

correcta');
if (!$ejecutarInsertar){
echo ("Error de sintaxis");
}
?>
Código CSS para el diseño del formulario en la web:
/*Para darle estilo al formulario en general, ancho del fondo, margen interior, esquinas
redondeadas, margen, color del fondo y el tipo de letra*/
form{
width: 300px;
padding: 16px;
border-radius: 20px;
margin: auto;
background-color: #ccc;
font-family: colibri;
}
/*Para dar estilo a los controles del formulario, con un ancho específico y un grosor para la
fuente, es decir un tipo de negrita (bold)*/
form label{
width:100px;
font-weight: bold;
}
/*Para dar estilo al input de tipo texto, es decir, a la casilla del Rut*/
form input[type="text"]{
width: 100px;
padding: 2px 10px;
border: 1px solid #f6f6f6;
border-radius:6px;
background-color: #f6f6f6;
margin:16px 6;
display:inline-block;
}
*/Para dar estilo al input de tipo "number", es decir, la casilla de la edad*/
form input [type="number"]{
width: 100px;
padding: 2px 10px;
border-radius: 6px;
margin: 8px 0;
display: inline-block;
}
/*Para dar estilo a las casillas de seleccionar (género)*/
form select{
width: 200px;
padding: 2px 10px;
border:1 px solid #f6f6f6;
border-radius: 6px;
margin: 8px 0;
}
/*Para estilizar el input de tipo texto plano*/
form input[enctype="text/plain"]{
width: 100px;
padding: 2px 10px;
border-radius: 6px;
margin: 8px 0;
}
*/Para dar estilo a las casillas de chechbox de "lineas del metro"*/
form input[type="checkbox"]{
width: 100px;
padding: 2px 10px;
border-radius: 6px;
margin: 8px 0;
}
*/Estilo para los botones de "Enviar y Limpiar" con un extra para que el puntero cambie al
pasar el mouse sobre el botón, esto se realiza con la propiedad "cursor" */
form input[type="submit"]{
width: 100%;
padding: 8px 6px;
margin-top: 17px;
border: 1px solid #890;
border-radius: 10px;
display: block;
color: #fff;
background-color: #190;
}
form input[type="submit"]:hover {
cursor:pointer;
}
/*Estilo para la casilla de observaciones personales*/
textarea{
width: 100%;
height: 100px;
border-radius: 6px;
margin: 20px 10;
resize: none;
display: block;
}
/*Estilo para el párrafo final*/
form p{
height: 1px;
font-size: 15px;
font-weight: bold;
}
Captura de pantalla:
Conclusión:
Con la hoja de estilo de CSS, se puede dar forma y una interfaz mucho más amigable para el
usuario, de modo que pueda interactuar con el formulario de forma didáctica, sin embargo, es
necesario conocer cada propiedad de CSS y para qué sirven las distintas funciones, ya que son
muchas y con conocimientos suficientes, se puede lograr una interfaz muy amigable e
interactiva.
Bibliografía:
- Bartolomé, M. (2018). Lista de propiedades CSS estables. Recuperado el 2 de Mayo 2020 de:
https://www.mclibre.org/consultar/htmlcss/css/css-propiedades.html
- IACC (2015).Hoja de estilo CSS I. Programación HTML II. Contenido Semana 4 .
- Perez, P. (2016). [Clase en vivo]. Realización de un Formulario en HTML y CSS.
Recuperado el 1 Mayo 2020 de: https://www.youtube.com/watch?v=AAhFZ8ugXvA&t=866s

Ignacia Lastra Tarea3

Cargado por

Información del documento

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

Ignacia Lastra Tarea3

Cargado por

Copyright:

Formatos disponibles

Hojas de estilo CSS

María Ignacia Lastra Tapia

interactiva para el usuario.

<form action="mailto:alguien@ejemplo.com" method="post" enctype="text/plain">

<input type="radio" id="gm" value="male" name="genero">

<input type="radio" id="gf" value="female" name="genero">

<label for="frec_">Frecuencia con la que usa servicio: </label> <select id="frec_"

<label for="obs_"> Observaciones Personales: </label>

<textarea name="observaciones" id="obs_" maxlength="200" rows="5" accesskey="o">

$enlace= mysqli_connect('$servidor', '$usuario', '$clave','$baseDeDatos');

$insertarDatos = "INSERT INTO usuario VALUES('$rut', '$edad', '$genero', '$frecuencia',

$ejecutarInsertar = mysqli_query($enlace, $insertarDatos) or die ('Datos enviados de forma

Código CSS para el diseño del formulario en la web:

- IACC (2015).Hoja de estilo CSS I. Programación HTML II. Contenido Semana 4 .

- Perez, P. (2016). [Clase en vivo]. Realización de un Formulario en HTML y CSS.

Recuperado el 1 Mayo 2020 de: https://www.youtube.com/watch?v=AAhFZ8ugXvA&t=866s

También podría gustarte