Para esta entrada he creado un pequeño formulario que es una encuesta sencilla que solo te pide el nombre, el sexo, y luego te hace dos preguntas, en una de ellas te da las opciones de respuesta en forma de radio botones y en la segunda están las respuestas posibles en una caja desplegable.
Los datos de la encuesta en este caso como lo observamos dentro de la etiqueta form van dirigidos a una dirección de correo, pero también podríamos mandarlos a un script que los guarde en alguna base de datos.
Y también le he añadido un CSS para darnos cuenta que también es posible aplicar un estilo diferente al predeterminado, a las cajas de texto y los botones.
La siguiente imagen muestra como se ve el formulario desde un navegador web, en mi caso use Google Chrome para mostrarles el ejemplo.
Espero sea de ayuda a aquellos que empiezan a crear este tipo de páginas web con formularios.
<html>
<head>
<title>Formulario</title>
<link href="estilo-form.css" rel="stylesheet" type="text/css"/>
</head>
<body onload = "document.forms[0][\'foco\'].focus()">
<div id="entrada">
<h2>Encuesta</h2>
<form name="acceso" action="mailto:cuenta@dominio.com" method="post">
<p>
Nombre:
<input class="box" type="text" name="nombre" maxlength="20" id="foco"/><br/>
<input type="radio" name="sexo" value="Hombre"/>Hombre
<input type="radio" name="sexo" value="Mujer"/>Mujer
<br /><br/>
<b>¿Qué fruta te gusta más?</b><br />
<input type="radio" name="fruta" value="Mango"/>Mango<br/>
<input type="radio" name="fruta" value="Naranja"/>Naranja<br/>
<input type="radio" name="fruta" value="Manzana"/>Manzana<br/>
<br />
<b>¿Cuál es tu color preferido?</b><br />
<select name="color">
<option>Selecciona</option>
<option value="Azul">Azul</option>
<option value="Verde">Verde</option>
<option value="Amarillo">Amarillo</option>
<option value="Rosa">Rosa</option>
</select><br />
<br />
<input class="boton" type="submit" value="Enviar"/>
</p>
</form>
</div>
</body>
</html>
Los datos de la encuesta en este caso como lo observamos dentro de la etiqueta form van dirigidos a una dirección de correo, pero también podríamos mandarlos a un script que los guarde en alguna base de datos.
Y también le he añadido un CSS para darnos cuenta que también es posible aplicar un estilo diferente al predeterminado, a las cajas de texto y los botones.
#entrada {
margin: 0px auto;
width: 300px;
border: 1px solid #336699;
font-size: 12px;
}
#entrada h2 {
height: 30px;
margin: 0px;
background: #116855;
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.8em;
}
#entrada p {
margin: 0px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #787878;
}
.box {
border: 1px solid #E9851D;
font-family: Arial;
font-size: 15px;
}
.boton {
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
background: #DF7401;
width: 100;
height: 25px;
border: 1px #003399 solid;
}
La siguiente imagen muestra como se ve el formulario desde un navegador web, en mi caso use Google Chrome para mostrarles el ejemplo.
Espero sea de ayuda a aquellos que empiezan a crear este tipo de páginas web con formularios.
No hay comentarios:
Publicar un comentario