Descripción de los elementos para la creación de formularios. Incluye las novedades de la nueva versión de HTML

1. HTML 5
FORMULARIOS

2. Formularios para la Web
 De forma similar a como se recogen
datos en un formulario de papel, es
posible generar documentos HTML
que realicen la misma función.
 Utilizando el elemento <form> y los
controles incluidos en un formulario
se puede recoger información desde
el browser.

3. Los formularios web
tradicionales
 El patrón tradicional para el tratamiento
de un formulario es el siguiente:
1. El usuario solicita el documento que contiene el
formulario.
2. Tras alguna acción realizada por el usuario, el
formulario llega al servidor
3. Los datos son procesados en el servidor.
4. Se le proporciona una respuesta adecuada al usuario.

4. El elemento <form>
 Entre sus etiqueta contiene los controles
de un formulario.
 El atributo action contiene normalmente la
url del «programa del servidor» que
tratará el formulario.
 El atributo method (valores posibles get o
post) especifica el método HTTP que se
utilizará para enviar el formulario.

5. Atributos del elemento form I
 Enctype especifica, si se utiliza el método
post, como codificará los datos el browser
antes de enviarlos al servidor.
 El valor por defecto es «application/x-
www-form-urlencode» si el formulario
permite upload el método a elegir sería
«multipart/form-data», se indica de esta
forma que los datos pueden ser enviados
por partes.

6. Atributos del elemento form II
 accept-charset, permite indicar la codificación de
los caracteres que se aceptan.
 novalidate, este atributo booleano, si se
encuentra presente indica que el formulario no
sea validado antes de enviarlo.
 autocomplete, si su valor es off, el browser no
completará campos
 target, permite especificar que el formulario sea
procesado en una ventana independiente del
browser.

7. CONTROLES PARA CREAR
FORMULARIOS

8. Atributos para todos los
controles
 Nomalmente, el tratamiento de los
controles que se realiza tanto en la parte
cliente como en la parte del servidor
necesitan que el atributo name e id se
encuentren instanciados.
 Es un buen hábito, disponer de una
estrategia para nombrar los diferentes
controles de un formulario.

9. Cajas de texto I
 En las versiones anteriores de HTML
únicamente había tres tipos de cajas
de texto que se utilizaran en
formularios: texto de una línea, cajas
de texto multilínea y cajas de texto
para contener contraseñas.

10. Cajas de texto II
 En HTML5 existen nuevos tipos de
cajas de texto:
Color Datetime-local range time
Date email search url
datetime month tel week
 El propio nombre de los tipos da ida
de su uso

11. Atributos para controles de
texto
 name, identifica el control (utilizado para
procesarlo en el servidor)
 value, permite asignar un valor inicial al control
 size, permite limitar el número de caracteres que
se mostrarán de una sola vez en el control
 maxlength, especifica el número máximo de
caracteres que el usuario podrá introducir en el
control.
 placeholder, se trata de una sugerencia para
indicar el valor que se espera sea introducido por
el usuario.

12. El elemento textarea
 Este elemento permite al formulario
recoger un texto formado por varias
líneas.
 Los atributos mas importantes son:
• rows, número de filas del texto
• cols, número de caracteres de ancho
• maxlength, máximo número de caracteres que admite
• readonly, indica si el usuario puede editarlo
• disable, atributo que desactiva la edición del control

13. Ejemplo I
<input type="text" name="txtNombre"
size="50" placeholder="Introduzca su
nombre y apellidos">
<input type="color" name="txtCalendar"
placeholder="Seleccione una fecha">
<textarea name="txtOpinión" rows="20"
cols="50">
Introduzca su opini&oacute;n
</textarea>
No todos los navegadores muestran los nuevos
controles de la misma forma.
Chrome muestra el elemento de texto «date»
en forma de calendario, lo que permite generar
una interfaz mas fácil de usar.

14. Botones I
 Se utilizan para:
• Enviar los datos de un formulario
• Reiniciar un formulario
• Capturar un evento y lanzar un script
que se ejecutará en el cliente.

15. Botones II
 Se pueden crear botones de tres
maneras distintas:
• Utilizando un elemento <input> con el
tipo reset, submit o button
• Utilizar un elemento <input> con el tipo
image
• Utilizando un elemento <button>

16. Botones, el elemento <input>
 Con el elemento input es posible
crear un botón indicando los
siguientes valores en el atributo
type:
• submit, enviará el formulario
• reset, reiniciará los controles a su valor
inicial
• button, creará un botón para se usado
por un script del lado del navegador.

17. Atributos asociados a un botón
 type, indica el tipo de botón a crear
 name, denominación del botón
 value, texto asignado al botón
 disabled, permite desactivar el
botón(valor booleano)
 autofocus, permite indicar si el botón
tendrá el «foco» cuando se cargue la
página

18. Imágenes y botones
 Es posible que una imagen se
comporte como un botón.
<input type="image" src="enviar.jpg" alt="Enviar"
name="btn_enviar">
 En este caso el atributo type es
image y la imagen a mostrar se
especifica en el atributo src.

19. Ejemplo: botón elemento input
<input type="submit" name="btn_enviar" value="Enviar">
<input type="reset" name="btn_iniciar" value="Borrar todo">
<input type="image" name="btn_img" src="vector-thumb-up-
277x250.jpg" width="75" alt="Ok">

20. El elemento button
 Este elemento, posterior al elemento
input, se puede utilizar de forma
análoga a como se utiliza el
elemento input.
 Entre sus etiquetas se incluirá el
contenido del botón, ya sea una
imagen o texto.

21. Ejemplo: botón elemento button
<button type="submit" name="btn_enviar">Enviar</button>
<button type="reset" name="btn_limpiar">Reiniciar</button>
<button name="btn_img"><img src="vector-thumb-up-
277x250.jpg" width="75" alt="Ok"></button>

22. Casillas de verificación I
 Permiten seleccionar elementos
 Con un único control permite aceptar
o no una opción
 Con varios controles permite
seleccionar 0, 1 o varias opciones.
 El elemento a utilizar es input con el
valor checkbox en el atributo type

23. Casillas de verificación II
 Para que varios elementos pertenezcan al
mismo control dispondrán del mismo valor
en el atributo name y distintos valores en
el atributo value.
 Al servidor se enviará una lista de pares
compuesta por el valor y el nombre de los
elementos seleccionados.
 El atributo checked se puede utilizar si se
desea marcar por defecto alguna opción.

24. Ejemplo (casillas de verificación)
Seleccione los idiomas que conozca
<p>
<input type="checkbox" name="chk_idioma" value="Fr">Franc&eacute;s<br>
<input type="checkbox" name="chk_idioma" value="Sp">Espa&ntilde;ol<br>
<input type="checkbox" name="chk_idioma" value="Ru">Ruso<br>
</p>
<p><input type="checkbox" name="chk_infor" value="Si" checked>Marque la
casilla si desea recibir informaci&oacute;n
</p>

25. Botones de radio
 Son similares a las casillas de
verificación, pero únicamente es
posible seleccionar un único
elemento.
 Aunque es posible utilizar un único
botón de radio, es desaconsejable,
pues una vez seleccionado no vuelve
a su estado original

26. Ejemplo (botones de radio)
<input type="radio" name="rad_destino" value="Fr">Francia<br>
<input type="radio" name="rad_destino"
value="Sp">Espa&ntilde;a<br>
<input type="radio" name="rad_destino" value="Ru">Rusia<br>

27. Listas desplegables
 Una lista desplegable permite
seleccionar uno o varios de los
elementos que contiene.
 La selección múltiple se permitirá si
se utiliza el atributo multiple.
 El elemento select permite crear la
lista, las opciones de la lista se
indicarán con el elemento option

28. Atributos de una lista desplegable
 name, permite asignar un nombre a
la lista.
 size, número de elementos que se
mostrarán simultaneamente.
 multiple, atributo booleano que
permite al usuario seleccionar mas
de un elemento de la lista.

29. Ejemplo lista deplegable
<select name="sel_idioma">
<option value="" selected="selected">
Seleccione un idioma
</option>
<option value="En">Ingl&eacute;s</option>
<option value="Sp">Espa&ntilde;ol</option>
<option value="Ru">Ruso</option>
<option value="Fr">Franc&eacute;s</option>
</select>

30. Controles ocultos
 Permiten pasar información entre el
documento html y el servidor sin la
intervención del usuario.
 Para crear un control oculto se utilizará el
elemento input con el atributo valor
hidden en el atributo type.
 Se utilizarán el atributo name y value para
comunicar el valor al servidor.

31. NUEVOS ELEMENTOS DE
FORMULARIO

32. El elemento progress
 Diseñado para representar el
progreso de una tarea.
 Los atributos mas importes a tener
en cuenta son:
• max, que indica el valor máximo del
elemento.
• value, que indica la cantidad
completada.

33. El elemento meter
 Este elemento muestra una medida
respecto de un total.
 Los atributos mas importantes son:
• high y low indican los límites superior e inferior
del rango.
• max y min, representan el máximo y el
mínimo del elemento que representa el
progreso.
• value, representa que parte de la tarea ha sido
completada.

34. Ejemplo (elemento progress)
<p>
Progreso de carga de archivo
</p>
<progress max="50" value="20">

35. El elemento datalist
 Este elemento trabaja junto con el
nuevo atributo list para los
elementos de entrada de
información.
 Permite especificar un conjunto de
opciones con las que autocompletar
un control de entrada de texto, a
modo de sugerencia.

36. Ejemplo
Navegador: <input type="text" name="txtNav" value=""
size="30" list="dlLstNav">
<datalist id="dlLstNav">
<option value="Internet Explorer">
<option value="Mozilla Firefox">
<option value="Chrome">
<option value="Opera">
</datalist>

37. ELEMENTOS PARA
ESTRUCTURAR UN FORMULARIO

38. El elemento label
 Este elemento sirve como etiqueta de
texto asociada a un control de un
formulario.
 Para asociar la etiqueta al control se
utilizará el atributo for que debe contener
el valor del atributo id del control al que
denomina.
 También es posible que la etiqueta label
contenga al control que denomina.

39. Los elementos fieldset y legend
 El elemento fieldset crea un borde
alrededor de un grupo de controles
que se encuentran relacionados.
 El elemento legend permite asignar
un título al grupo de elementos que
ha relacionado el elemento fieldset.

40. Ejemplo
<fieldset>
<legend><em>Datos de contacto</em></legend>
<label>
Primer apellido <input type="text" name="txtPriApellido" size="30">
</label>
<label>
Segundo apellido <input type="text" name="txtSegApellido" size="30">
</label>
<label>
Nombre <input type="text" name="txtNombre" size="30">
</label>
<label>
<br>Direcci&oacute;n de correo: <input type="mail"
name="txtSegApellido" size="30"><br/>
</label>
</fieldset>

41. Control activo
 En cada instante, únicamente un control
de un formulario o cualquier elemento con
el que el usuario pueda interactuar puede
estar activo.
 El usuario puede moverse a través de
estos elementos utilizando el ratón,
pulsando la tecla «Tab» o incluso una
combinación de teclas que dependen del
navegador y del sistema operativo
utilizado

42. El atributo tabindex
 Para establecer el orden en que serán
accedidos los elementos con los que el
usuario pueda interactuar se puede utilizar
el atributo tabindex.
 El valor será un número que indicará el
orden de acceso.
 El atributo autofocus indicará el elemento
que tomará el control cuando se cargue la
página.

43. El atributo accesskey
 Permite establecer un atajo de
teclado para acceder a los controles
de un formulario.
 Aplicado sobre un elemento legend,
provocará que el atajo se sitúe sobre
el grupo de controles, tomando el
foco el primer control del grupo.