Introducción

  • 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

Formulario

Atributos de Form

Atributo

Valor

Descripción

accept-charset

character_set

Especifica la codificación de caracteres que se van a utilizar para el envío del formulario

action

URL

Especifica dónde enviar el formulario de datos cuando se envía un formulario

autocomplete

on
off

Especifica si un formulario debe tener autocompletar o desactivar

enctype

application/x-www-form-urlencoded
multipart/form-data
text/plain

indicar el formato de codificación de los datos que estamos remitiendo

method

get
post

Especifica el método de envío de los datos

name

text

Especifica el nombre de un formulario

novalidate

novalidate

Especifica que el formulario no debe ser validados

target

_blank
_self
_parent
_top

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

Tipos de Input Tipos de Input (II)
 

 

Saber másPara 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.

También puedes realizar una consulta en google "envio gratuito de formularios", para encontrar distintos servidores. Escoge alguno de ellos para realizar las actividades.

 

ActividadEjercicio Guiado

 

Formulario1)  Crea un formulario que envíe datos a tu dirección de correo electrónico.

Llámalo formulario1.html

  1. Utiliza como codificación  multipart/form-data o text/plain
  2. Añade campos de texto para recoger el nombre, apellidos y dirección de quien cumplimenta el formulario.
  3. Añadir el código necesario para que se pueda acceder a esos campos con una tecla rápida.
  4. 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.
  1. Añade una selección mediante botones de opción con un par de valores.
  2. Añade una tercera opción y especifica que esté marcada inicialmente. Guarda y comprueba el resultado.
  3. Añade una selección mediante casillas de verificación con dos o tres valores posibles sin que ninguno de ellos esté seleccionado.
  4. Añade otra opción y especifica que esté marcada inicialmente. Guarda y comprueba el resultado.
  5. 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)
  6.  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.