Formularios en HTML5
Temario:
- Código de Formulario No.1
- Etiquetas
- <form>
- <fieldset>
- <legend>
- <label>
- Entradas de Texto "Text Inputs"
- Atributo type = " "
- Código para crear Entrada de Texto
- Pasos para crear nuestra entrada de Texto
- Crear un Campo de Password
- Código para crear el Campo de Password
- Consideraciones para el campo de contraseña
- Crear una Caja de texto Multilinea
- Código para crear una Caja de texto Multilinea
- Pasos para crear una Caja de Texto Multilinea
- Crear una Lista Desplegable
- Consideraciones para crear una lista desplegable
- Código para crear una lista desplegable
- Crear una Caja de Verificación
- Código para crear una Casilla de Verificación
- Pasos para crear la casilla de Verificación
- Crear un Campo de Opción "Botón de Radio"
- Código para crear Campo de Opción
- Pasos para crear un Campo de Opción
- Botones de Acción
Desde sus inicios las páginas web han tenido la capacidad de recopilar datos de los usuarios. HTML5 tiene un conjunto estándar bastante útiles para esta tarea. No se puede hacer nada con los datos en HTML plano, pero de esto nos ocuparemos después con JavaScript y PHP
Código de formulario No.1
<!DOCTYPE HTML><html lang = "es"><head><title>Formulario</title><meta charset = "utf-8" /></head><body><h1>Ejemplo de Formulario</h1><form><fieldset><legend>Introducir Texto</legend><p><label>Caja de Texto</label><input type = "text" id = "myText" value = "text here" /></p><p><label>Password</label><input type = "password" id = "myPwd" value = "secret" /></p><p><label>Área de Texto</label><textarea id = "myTextArea" rows = "3" cols = "80">Introduce tu texto aquí...</textarea></p></fieldset><fieldset><legend>Selectores</legend><p><label>Lista de Opciones</label><select id = "myList"><option value = "1">uno</option><option value = "2">dos</option><option value = "3">tres</option><option value = "4">cuatro</option></select></p><p><label>Casillas de verificación</label><input type = "checkbox" id = "chksi" value = "si" /><label for = "chksi">SI</label><input type = "checkbox" id = "chkno" value = "no" /><label for = "chkno">NO</label></p><p><label>Botones en Radio</label><input type = "radio" name = "btn_1" id = "opn_si" value = "Si" checked = "checked" /><label for = "sizeSmall">Si</label><input type = "radio" name = "btn_1" id = "opn_talvez" value = "Tal vez" /><label for = "sizeMed">Tal vez</label><input type = "radio" name = "btn_1" id = "opn_no" value = "No" /><label for = "sizeLarge">No</label></p></fieldset><fieldset><legend>Botones</legend><p><button type = "button">Boton Estandar</button><input type = "button" value = "Boton-X" /><input type = "reset" /><input type = "submit" /></p></fieldset></form></body></html>
Como puede ver, los elementos de formulario siguen muchas de las mismas reglas que las etiquetas que hemos visto hasta ahora, pero para las etiquetas de los formularios hay algunas diferencias
Veamos las etiquetas que se emplean generalmente para la construcción de formularios.
<form>: La etiqueta <form> es la etiqueta que contiene el formulario. La etiqueta <form> también debe incluir el atributo (action = ""), esto le indica al navegador que no va a llamar a un script del lado del servidor cuando se envía el formulario. Este atributo lo veremos específicamente mas adelante.
<fieldset>: Esta es una etiqueta especial que le permite agrupar una serie de elementos de un formulario. No es necesario, pero puede hacer que las formas mas complejas de formularios sean más fáciles de navegar. Por defecto, un fieldset tiene un solo borde a su alrededor, pero usted puede cambiar esto con CSS.
<legend>: Sirve para colocar una leyenda en nuestro capo de <fieldset>. Esto le permite dar información extra sobre el formulario.
<label>:La etiqueta <label> define una etiqueta para un elemento <input>.
El fieldset, legend, y label no son necesarios, y francamente, no se utilizaron mucho en las formas anteriores de HTML. Estas etiquetas se utilizan con mayor frecuencia en XHTML y HTML 5, donde el uso de tablas para organizar la distribución física de la página no se recomienda.
Estas etiquetas ayudan a organizar la página de modo que es más fácil para diseñar con CSS.
El uso adecuado de estas etiquetas y CSS a menudo hace que sus formularios sean mucho más fácil de trabajar que los hacks basados en tablas.
Entradas de Texto "Text Inputs"
Muchos de los elementos del formulario se basan en la etiqueta de entrada.
- Atributo (type = " "): El atributo (type) se utiliza para determinar qué tipo de elemento se creara en la página. Por el momento, el elemento de entrada"<input>" más común es el cuadro de texto básico. Su código es el siguiente:
<input id="myText" type="text" value="text here" />
Pasos para construir la entrada de Texto "Text Inputs"
1. Crear un elemento de entrada "<input>". La etiqueta <input> crea la estructura general del elemento.
2. Ajuste el tipo de "texto" (type). Esto indica que usted está construyendo un elemento de texto estándar, no algo más elaborado.
3. Añadir un atributo id. El atributo id le permite nombrar el elemento. Esto será muy importante a la hora de agregar JavaScript a la página, ya el código JavaScript utiliza el ID para extraer los datos del formulario.
4. Añadir los datos por defecto. Usted puede agregar los datos por defecto si lo desea, utilizando el atributo (value). Cualquier texto que se coloca en el valor se convertirá en el valor predeterminado del formulario.
El elemento de texto coloca una pequeña caja en la pantalla. Cuando el usuario selecciona la caja de texto, permite que introduzca texto al formulario
Por supuesto, si usted quiere hacer algo con este texto, tendrá que escribir algún código con JS que posteriormente veamos. Recuerde que HTML solo da la estructura y el funcionamiento se lo daremos con JS.
Crear un Campo de Password
Para crear nuestro campo de Password debemos emplear el siguiente código:
<input type = "password" id = "myPwd" value = "secret" />
El elemento de entrada "<input>" estándar tiene una prima que se utiliza a veces - contraseña.
El código de la contraseña se parece mucho al código de una entrada estándar
elemento.
El campo de la contraseña es muy similar al campo de texto normal, pero tiene una diferencia primaria. Cuando el usuario escribe datos en el campo de texto, el contenido del campo se sustituye por asteriscos.
Esto evita que los secuaces del mal, al mirar sobre sus hombros pueda descubrir su contraseña.
El campo de contraseña no proporciona ninguna seguridad real. Cuando se utiliza para enviar una petición a un servidor web, esa solicitud se envía normalmente en la URL, donde los secuaces del mal estarán seguros de encontrarla. Para fines de seguridad y de mantener nuestros secretos guardados emplearemos unos trucos diferentes que posteriormente veremos.
Crear una caja de texto Multilinea
A veces tendrás la posibilidad de introducir varias líneas de texto. El área de texto es perfecto para esta situación. Su sintaxis es un poco diferente del elemento de entrada que has visto hasta ahora:
<textarea id = "miTextArea" rows = "4" cols = "100">Tu texto Aquí</textarea>
Posos Para crear el "textarea"
1. Comience con la etiqueta <textarea>. Esta etiqueta indica el comienzo de una caja multilínea de texto.
2. Especifique el número de filas mediante el atributo (rows = " "). Este atributo especifica el largo de la caja
3. Indique el número de columnas mediante el atributo (cols =" "). El número de columnas especifica en ancho (en caracteres) del cuadro de texto.
Crear una Lista Desplegable
Las listas desplegables son una característica común en las páginas Web ya que son agradables y permite al programador especificar una serie de opciones además de no requerir una gran cantidad de espacio en pantalla.
Las opciones son visibles sólo cuando el usuario los selecciona.
Al tener opciones limitadas, hace que la respuesta sea mas simple de analizar.
Cuando se permite que el usuario escriba información en un formulario, puede ser muy difícil comprobar todas las cosas locas que el usuario puede introducir. Con una lista de opciones, que ya ha predeterminada todas las respuestas posibles. Hay menos probabilidad de que algo pueda salir mal.
En HTML / XHTML, las listas desplegables se crean con dos tipos de objetos.
La estructura general utiliza las etiquetas <select>, mientras que cada una de las posibles opciones tiene su propia etiqueta llamada <option>.
Código para crear una Lista desplegable
<select id = "miLista"><option value = "1">uno</option><option value = "2">dos</option><option value = "3">tres</option><option value = "4">cuatro</option></select>
Pasos para crear una lista desplegable
1. Crear el elemento <select> primero. El contenedor de la lista será un elemento SELECT. La lista completa está encerrado en el <select> </ select> pair.
2. Dar al elemento select una identificación. Usted utilizará este ID para hacer referencia al elemento en el código.
3. Añadir un elemento de opción para el elemento select.
4. Dé a cada etiqueta de opción un valor. El valor será la respuesta enviada a un programa cuando el usuario elige una opción. El usuario no verá necesariamente el valor.
5. Indica el texto que verá el usuario. El texto que el usuario verá para la opción va entre la etiqueta <option> y </ option> . Esto puede ser diferente al valor que enviaremos al programa (JS, PHP, etc.), o el mismo.
6. Añadir tantas opciones como desee.
Crear una Caja de Verificación
A veces usted tiene algún tipo de información que puede ser verdadera o falsa. el elemento de casilla es perfecto para este tipo de entrada ya que el usuario puede hacer clic para activar o desactivar la opción. Las casillas de verificación son otra variante de la versatilidad de etiqueta en HTML5:
Código para Crear una Caja de verificación
<p><label>Casillas de verificación</label><input type = "checkbox" id = "chksi" value = "si" /><label for = "chksi">SI</label><input type = "checkbox" id = "chkno" value = "no" /><label for = "chkno">NO</label></p>
A veces usted tiene algún tipo de información que puede ser verdadera o falsa. el elemento de casilla es perfecto para este tipo de entrada ya que el usuario puede hacer clic para activar o desactivar la opción. Las casillas de verificación son otra variante de la versatilidad de etiqueta en HTML5:
Pasos para crear una casilla de Verificación
1. Comience con un elemento de entrada "<input>" . Las casillas de verificación son sólo otra forma de elementos de entrada.
2. Establezca el atributo (type). Esto aclara que el elemento de entrada será una casilla de verificación.
3. Dale el elemento un identificador (id). Al igual que todos los elementos del formulario, tendrá un campo de identificación para que su código puede trabajarse directamente con el elemento.
4. Especifique un valor. Se puede asignar un valor a una casilla de verificación. El usuario no verá el valor.
5. Agregar una etiqueta <label>. Las casillas necesita tener una etiqueta asociada a ellas, para que el usuario entienda de que se trata la casilla. La etiqueta de una casilla de verificación se aplica generalmente a la derecha de la casilla de verificación.
6. Agregue el atributo (for) a la etiqueta. La etiqueta tiene un atributo especial llamado (for), que le permite especificar qué elemento de entrada corresponde a la casilla.
7. Coloque el valor del id de la casilla de verificación a este atributo de la etiqueta, esto será útil para casillas de verificación, debido a que en la mayoría de los navegadores el usuario puede hacer clic en cualquiera de las etiquetas o en la casilla de verificación para activar la selección.
Asociar la marca a la casilla de verificación le da al usuario un blanco más grande para poder hacer clic, y hace sea una forma más fácil de usar.
Crear un campo de opción "Botón de radio"
En la superficie, los botones de radio se parecen mucho a las casillas de verificación, pero son diferentes en varios aspectos.
- Los botones de opción se colocan sólo en grupos. Usted puede tener una sola casilla de verificación en un formulario, como vimos en el ejemplo anterior, pero los botones de radio o de opción sólo tienen sentido cuando se colocan en grupos.
- Se selecciona solo un elemento de un grupo de opciones. En un grupo de botones de radio, al seleccionar un botón se anula la selección de los demás. Es como una radio de coche, donde haciendo clic en uno de los botones de memorización anula la selección de los demás.
- Siempre debe haber un elemento seleccionado. Cuando se construye un campo de opción, siempre se debe hacer que un elemento del grupo esté seleccionado. De lo contrario podría ocasionar problemas cuando empleamos JS
- La identificación (id) de cada botón de radio sigue siendo único. Cada Identificación en una página Web debe ser único, y los elementos de identificación de cada botón de opción seguirá el mismo principio.
- Cada elemento de radio también tiene un atributo de nombre (name). Se utiliza el atributo de nombre para especificar todas las casillas de opciones que pertenecen al mismo grupo
- Todos los botones de opción de un grupo tienen el mismo nombre. HTML utiliza el nombre del atribuir para averiguar que botón de un grupo esta seleccionado y solo permitir que se seleccione una sola opción.
Código para Crear un Elemento de Opción o Radio
<p><label>Botones en Radio</label><input type = "radio" name = "btn_1" id = "opn_si" value = "Si" checked = "checked" /><label for = "sizeSmall">Si</label><input type = "radio" name = "btn_1" id = "opn_talvez" value = "Tal vez" /><label for = "sizeMed">Tal vez</label><input type = "radio" name = "btn_1" id = "opn_no" value = "No" /><label for = "sizeLarge">No</label></p>
Pasos para crear un Elemento de Opción o Radio
1. Empiece por crear un elemento de entrada "<input>". Como de costumbre, el elemento de entrada proporciona el fundamento básico.
2. Ajuste el tipo de radio. Utilice el atributo de tipo (type) para formar botones de radio.
3. Dé a cada elemento un identificador único (id). Como es habitual, aplicar un identificador único para cada botón de radio.
4. Dar a todos los botones de un mismo grupo el mismo nombre en el atributo (name = " ") nombre. Utilice el atributo de nombre (name) para identificar los botones de un mismo grupo.
5. Considere la posibilidad de agrupación visual. El usuario no será capaz de decir qué botones son parte de un grupo. Puede ser que sea mejor utilizar fieldsets u otros trucos de formato para ayudar al usuario a saber qué botones se encuentran en un mismo grupo. Todos los botones de un grupo deben estar físicamente cerca uno del otro.
6. Hacer que uno de los botones este seleccionado con el atributo (checked = "checked") de forma predeterminada.
Botones en Acción
Uno de los elementos más críticos en el formulario es el botón omnipresente. Hay tres principales tipos de botones.
Botón Estandar: un botón estándar sólo se parece a un botón. Estos botones por lo general se utilizan en la programación de JavaScript para activar algún tipo de acción en el cliente.
Botón Enviar: Este botón se utiliza normalmente en la programación del lado del servidor. Se envasa de todos los datos en el formulario y lo envía a un programa que vive en un servidor web remoto para ocupar los datos.
Botón Reset: Este tipo botón especial tiene una función de comportamiento. Cuando el usuario hace clic en un botón de reset, todos los datos en el formulario se restablece a sus valores predeterminados originales.
Construcción de los Botones
<input type = "button" value = "Boton de Input" />
Cuando se utiliza de esta manera, el valor de la propiedad se convierte en la etiqueta del botón, y la propiedad type indica el tipo de botón que tiene la intención de construir.
No es necesario añadir una etiqueta a un botón porque la etiqueta está implícita.
Esta es la forma original de crear los botones en HTML, y es todavía comúnmente utilizada. Pero los botones no se utilizan realmente para la entrada, sino que son utilizados para especificar que el usuario quiere hacer algo. Por esa razón, una nueva sintaxis del botón ha evolucionado a:
<button type = "button"> Botón Estándar</button>
Esta sintaxis introduce una etiqueta de botón con inicio y fin. El atributo de tipo se utiliza para indicar el tipo de botón que desee utilizar. El valor predeterminado es "Enviar" o "Submit", utilizado principalmente en el desarrollo del lado del servidor, que no es el foco de este curso. El texto dentro del botón indica el texto impreso en el botón
No hay comentarios:
Publicar un comentario