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