Introducción
- Los formularios son páginas webs que nos permiten recoger información del usuario mediante usa serie de campos. (debe existir una aplicación en el servidor)
- Los campos deben estar integrados en un contenedor <form> </form>
Ejemplos
Estiquetas y atributos para un formulario básico
|
<form enctype="text/plain" method="post" action=Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. name=“Datosalumnos"> <!-- Campos del formulario --> </form> |
Ejemplo gráfico de las posibilidades que nos ofrece HTML5 para crear formularios
Atributos de Form
|
Atributo |
Valor |
Descripción |
|
character_set |
Especifica la codificación de caracteres que se van a utilizar para el envío del formulario |
|
|
URL |
Especifica dónde enviar el formulario de datos cuando se envía un formulario |
|
|
on |
Especifica si un formulario debe tener autocompletar o desactivar |
|
|
application/x-www-form-urlencoded |
indicar el formato de codificación de los datos que estamos remitiendo |
|
|
get |
Especifica el método de envío de los datos |
|
|
text |
Especifica el nombre de un formulario |
|
|
novalidate |
Especifica que el formulario no debe ser validados |
|
|
_blank |
Especifica dónde se debe mostrar la respuesta que se recibe después de enviar el formulari |
Tipos de campos
- Entradas de texto de una línea
<input maxlength="50" size="25" tabindex="1" accesskey="a" name="apellidos">
- Áreas de texto de varias líneas
<textarea wrap="virtual" cols="75" rows="4" tabindex="2" name="Aportaciones"></textarea>
- Botones de opción
<input type="radio" name="entrevista" value="mañana“ value=“tarde”>
- Casillas de verificación <input type=“checkbox” …….
- Cuadros de menú y listas de selección <select
- Botones de acción <button>
Tipos de Input
 |
 |
Para saber más
Consulta este enlace para ampliar sobre los tipos de campos Input
Creando Formularios
Vamos a aprender a crear formularios utilizando la herramienta que nos ofrece Dreamweaver:
- Sigue las orientaciones de tu profesor
- También puedes ver el siguiente vídeo de aulaclic
- consultar la ayuda de dreamweaver cs6 sobre formularios
- o consultar aulclic
Formularios: Servicios gratuitos
- Necesitamos un programa en el servidor que se encargue de procesar los datos de los formularios.
- Google Forms, Zoho, https://chechesa.net/formularios-gratis (hay que darse de alta)
- Es posible que alguno de los servicios no admita la ejecución con la página en modo local y requiera que esté alojada en un servidor en Internet
También puedes realizar una consulta en google "envio gratuito de formularios", para encontrar distintos servidores. Escoge alguno de ellos para realizar las actividades.
Ejercicio Guiado
Formulario1) Crea un formulario que envíe datos a tu dirección de correo electrónico.
Llámalo formulario1.html
- Utiliza como codificación multipart/form-data o text/plain
- Añade campos de texto para recoger el nombre, apellidos y dirección de quien cumplimenta el formulario.
- Añadir el código necesario para que se pueda acceder a esos campos con una tecla rápida.
- Añade un área de texto para recoger las observaciones que quiera realizar el usuario
- Especifica que el ajuste sea virtual.
- Indica una tecla de acceso rápido desde el panel de creación del campo.
- Añade una selección mediante botones de opción con un par de valores.
- Añade una tercera opción y especifica que esté marcada inicialmente. Guarda y comprueba el resultado.
- Añade una selección mediante casillas de verificación con dos o tres valores posibles sin que ninguno de ellos esté seleccionado.
- Añade otra opción y especifica que esté marcada inicialmente. Guarda y comprueba el resultado.
- Añade una lista de selección con valores relacionados con la recogida de datos del usuario (tipo de deporte, tipo de fruta, lugar de descanso, etc)
- Añade botones de envío y restablecimiento, especificando en el campo value el rótulo que quieres que aparezca en cada uno de ellos.
En este momento no podrás comprobar el funcionamiento completo del formulario ya que no dispones de un servidor que procese el envio del formulario. Para ello, tendrás que realizar a continuación las actividades Formulario2, Formulario3 y Formulario4
