formularios html5
TRANSCRIPT
FORMULARIOS
•Los formularios permiten que el usuario introduzca determinados datos en una página. Su estructura debe ser definida en HTML5, su aspecto puede ser modificado con CSS y su funcionamiento está definido por códigos de programación, por ejemplo JavaScript. (MEDIAactive, 2014, p.50)
•Etiqueta <form>
•Atributos
•name: disponible p ara tos elementos de gran importancia en el elemento form.
•method: define el método para enviar al formulario la servidor y acepta el valor get y el post
•Get: para la información pública limitada.
•Post: para información privada ilimitada.
•Un form es un componente de una página Web que tiene controles de formulario, como campos
de texto, botones, casillas de verificación, controles de rangos, o selectores de color. Un usuario puede interactuar con una formulario para proporcionar datos que puede ser enviado al servidor para su procesamiento posterior (por ejemplo, la devolución de los resultados de una búsqueda o cálculo). No es necesario ningún script del lado del cliente, en muchos casos, aunque una API está disponible para que los scripts pueden aumentar la experiencia del usuario o utilizar formas para fines distintos de la presentación de datos a un servidor.
Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a one-line text field. To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements. (W3C Recommendation , 2014, Párr.5)
Cualquier form comienza con un elemento de formulario, en cuyo interior se colocan los
controles. La mayoría de los controles están representados por el elemento input, que por defecto ofrece un campo de texto de una línea. Para etiquetar un control, se utiliza el
elemento label el texto de la etiqueta y el propio control de ir en el interior del elemento LABEL. Cada parte de una forma se considera un párrafo, y típicamente se separa de otras piezas usando el elemento p. (W3C Recommendation , 2014, Párr.5)
Ejemplo de un formulario en html5 Paso 1. Definir el formulario
El evento onSubmit ejecuta un determinado código JavaScript cuando se envía un
formulario. Se utiliza principalmente para evitar que un formulario sea enviado si no se
verifican determinadas condiciones. (Rodríguez, 2014)
The name attribute is used to reference elements in a JavaScript, or to reference form
data after a form is submitted. (w3schools, s.f.)
Ejemplo de un formulario en html5 Paso 2. incluir los elementos del formulario
<label>: representa una etiqueta para un
elemento en una interfaz de usuario. Este
puede estar asociado con un control ya sea
mediante la utilización del atributo for, o
ubicando el control dentro del
elemento label.
<for>: El atributo especifica qué elemento
form está enlazado a la etiqueta label
Ejemplo de un formulario en html5
Paso 2. incluir los elementos del formulario
<input>: define la mayoría de los
diferentes elementos que va a contener el
formulario.
Type=‘text’
• sirve para introducir una caja de texto simple.
Name:
• asigna de forma unívoca un nombre identificador a la variable que se introduzca en la caja de texto.
Id
• define un identificador único (ID) el cual no debe repetirse en todo el documento.
Value
• establece el valor por defecto del texto que aparecerá en inicialmente en la caja de texto.
Size
• establece el tamaño de la caja de texto en pantalla.
Placeholder
• Se muestra un valor por defecto en gris que se elimina cuando el usuario introduce algún valor.
Required
• Indica que el campo es obligatorio.
Ejemplo de un formulario en html5 Paso 2. incluir los elementos del formulario
Ejemplo de un formulario en html5 Paso 2. incluir los elementos del formulario
<select> representa un control que
muestra un menú de opciones. Las
opciones contenidas en el menú son
representadas por elementos
<option>, los cuales pueden ser
agrupados por elementos
<optgroup>.
Ejemplo de un formulario en html5 Paso 2. incluir los elementos del formulario
<checkbox> define una o mas
casillas de verificación, pudiendo
marcar el usuario las que desee del
conjunto total
Ejemplo de un formulario en html5
Paso 2. incluir los elementos del formulario
tabindex especifica el orden de
tabulación de un elemento.
<textarea> Define un control de entrada de
texto de varias líneas
Recuperado de http://www.w3schools.com/tags/att_textarea_autofocus.asp
<button> define un botón que se pulse. Dentro de un elemento <button>
se puede poner el contenido, como texto o
imágenes. Esta es la diferencia entre este elemento y botones
creados con el elemento <input>.
<fieldset> se utiliza para los elementos relacionados con el
grupo en un formulario. Dibuja una
caja alrededor de los elementos relacionados.
VALIDACIÓN DEL FORMULARIO
Pelayo, C. (2016). Diseño de sitios usando Web 2.0. Tema 3. Evolución de la Web. Material de estudio.
UNIR
w3school. (2016). HTML <fieldset> Tag. [online] Available at: http://www.w3schools.com/tags/tag_fieldset.asp
[Accessed 30 Oct. 2016].