¿Qué son?
Un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en esos controles. Los usuarios normalmente "completan" un formulario modificando sus controles (introduciendo texto, seleccionando objetos de un menú, etc.), antes de enviar el formulario a un agente para que lo procese (p.ej., a un servidor web, a un servidor de correo, etc.)
¿Para qué sirven?
Los formularios interactivos permiten a los autores de páginas web poner elementos interactivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas revistas.
El lector escribe la información rellenando campos o haciendo clic sobre botones, y luego presiona un botón de envío para enviarla a una dirección URL que se suele dirigir a una dirección de correo electrónico o a un script dinámico Web como PHP, ASP o CGI
Construcción
Las etiquetas que abren y cierran un formulario son <form> y </form> (apertura sin barra y cierre con barra, como siempre). Además, en la etiqueta de apertura se añade qué queremos que se haga con los datos que se recojan, o mejor dicho, qué archivo va a procesar esos datos. Mira este ejemplo de abajo:
La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método indicado en el atributo METHOD.
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:
- La etiqueta INPUT: Todos los botones y casillas de texto
- La etiqueta TEXTAREA: una casilla de texto
- La etiqueta SELECT: una lista de opciones múltiples
1.Campo de texto
Es el típico recuadro para insertar datos en los que cabe una línea de texto solamente. Eso significa que si te pones a escribir dentro de ese recuadro, si le das al Enter o Intro de tu teclado no vas a conseguir un salto de línea para seguir escribiendo más texto.
El código Html para incluir un recuadro de estos en tu página web sería como este:
<input type="text" name="nombredelcampo" value="Valor por defecto" size="20" maxlength="20" >
La linea comienza con la etiqueta input, que indica que vamos a colocar un recuadro para introducir datos. Luego aparece type="text" con lo que señalamos que ese recuadro será para introducir texto. Con name="nombredelcampo" la damos un valor a ese recuadro, que nos servirá para poder manejar el valor introducido después. Con value="valor por defecto" podemos indicar el valor que queremos que aparezca dentro del recuadro en cuanto el visitante vea esa página, si es que queremos que aparezca algo. Si no, podemos dejarlo en blanco y el campo aparecerá vacio, claro. Para terminar tenemos size="20" que indica el tamaño o anchura del recuadro y maxlength="20" que pone un límite a la cantidad de texto que dejaremos que el usuario escriba en el formulario y que en este caso será de 20 carácteres.
2.Campo de contraseña
Este tipo de campo es muy similar al anterior, pero en este caso indicamos que la información a insertar va a ser una contraseña y por lo tanto queremos que cuando el visitante la vaya escribiendo se vayan monstrando asteríscos (*) en lugar de la contraseña real. Esto es para evitar que alguien pueda leer la contraseña mientras que nuestro amigo visitante escribe los datos del formulario.
Su código es este otro:
<input type="password" name="nombredelcampo" value="Valor por defecto" size="20" maxlengh="20" />
3.Botones de opción
Cuando quieras mostrar al visitante una lista de valores de entre los que tiene que elegir uno solo, tienes que usar botones de opción. Dentro del código Html que define este botón de opción tendrás que indicar cada uno de esos valores, claro.
Es importante que recuerdes que con este tipo de formulario el visitante SOLO puede escoger uno de los valores, es decir, es imposible activar dos o más valores. Si lo que quieres es dar la opción de que el visitante pueda seleccionar más de una de las opciones, tendrás que buscar otro modo.
<INPUT type="radio" name="mibotondeopcion" checked value="1">Estudiante<br />
<INPUT type="radio" name="mibotondeopcion" value="2">Astronauta<br /><INPUT type="radio" name="mibotondeopcion" value="3">Médico<br /><INPUT type="radio" name="mibotondeopcion" value="4">Webmaster<br>
Las características de los botones de opción son las siguientes:
- Dentro de type hay que indicar "radio" que significa botón de opción (no, no es para escuchar música...)
- Todos han de tener el mismo valor dentro de name para que el navegador sepa que todas estas líneas corresponden a opciones de ese botón.
- checked. Esto se coloca solamente en una de las líneas, en la que tú quieras pero solo en una, pues indica la opción que aparecerá activada por defecto. Si no lo indicas en ninguna no aparece ninguna de esas opciones marcada de antemano. Es opcional.
- Dentro de las comillas de value indicas el valor que quieres que tenga esa opción. Puede ser un número o el texto de esa opción. Está claro que deberian ser distintos esos valores en cada opción.
- El texto que hay antes de <br> es el texto que aparece en el navegador Puedes escribir lo que quieras que el visitante vea como opción, pero el valor que recogerás del formulario una vez que se envíe será el que hay dentro de value, no este.
- Finalmente tenemos la etiqueta Html <br> que como sabes sirve para bajar una línea. La ponemos para que no aparezcan todas las opciones pegadas una tras otra. Esto es opcional y lo puedes hacer de cualquier otro modo, a tu gusto.
4.Casillas de verificación
Es muy parecido a los botones de opción pero en este caso ofreces la opción de poder seleccionar varios de los valores en lugar de solamente uno. Lo único que cambia en el código Html es que ponemos el tipo "checkbox" dentro de type, que significa casillas de verificación.
Y claro, como podemos tomar uno o más valores, o todos, también nos permite dejar activadas ninguna, una o varias casillas escribiendo la palabra mágica checked en las líneas de código correspondientes.
<input type="checkbox" name="micasilladeverificacion" checked value="1" />Estudiante<br />
<input type="checkbox" name="micasilladeverificacion" value="2" />Astronauta<br /><input type="checkbox" name="micasilladeverificacion" value="3" />Médico<br /><input type="checkbox" name="micasilladeverificacion" checked value="4" />Webmaster<br />Date cuenta en el código de arriba, que he colocado la etiqueta <br /> al final de cada línea. Recuerdas para qué? Si, significan saltos de línea y las he colocado para que la casillas aparezcan una en cada línea y no una tras otra en una sola línea.
5.Carga de archivos
El botón de carga de archivos nos permite mostrar al visitante su explorador de archivos, una ventana desde la que puede buscar los archivos de su ordenador, seleccionar uno de ellos y mandárnoslo a nosotros o a nuestra página a través del formulario.
El código para este objeto del formulario es el siguiente:
<input type="file" name="imagendemilogotipo" accept="image/*.gif ">
6.Listas de datos
En esta ocasión se muestra al visitante una lista de opciones, que o bien puede ser desplegable (cuando el visitante pulsa el icono de la flechita se despliega la lista de opciones de entre las que puede elegir) o bien puede aparecer ya desplegada, con barra de desplazamiento si fuera necesario.
En este caso algunas de las palabras mágicas que definen a este objeto de formulario cambian un poco de significado. Por ejemplo size en este caso indica la cantidad de opciones que queremos mostrar a la vez en la lista. Si ponemos valor 1 la lista será desplegable.
Aparece una palabra mágica nueva, "multiple" que indica si se pueden o no tomar más de una de las opciones. Si la lista es desplegable no se puede usar multiple pues una lista desplegable no nos permite seleccionar varios valores.
En las listas, si queremos indicar un valor seleccionado por defecto tenemos que usar la palabra mágica selected, nochecked como en las casillas de verificación, pues aquí seleccionamos, no marcamos.
Vamos a ver un ejemplo para terminar de entender todo esto
<select name="comidapreferida" size=1>
<option value="tortilla">Las tortillas</option> <option value="paella">La paella</option> <option value="pizza">Las pizzas</option></select>Como le hemos puesto en el código size=1, obtenemos una lista desplegable. Dijimos que size indicaba la cantidad de opciones que queríamos mostrar a la vez. Si ponemos por tanto size=2 veremos dos opciones o items (también se llama así a cada elemento en los libros esos de listillos...) y el resto se ve desplazando la barra de desplazamiento
Recuerda que lo que ve el visitante es lo que hay justo ants de </option> mientras que lo que tú recibes del formulario es el valor que has colocado dentro de las comillas del value="....".
7.Campo multilínea
Los objetos de formularios en los que preguntamos el nombre, apellidos, etc, etc pueden ser de una sola lína de longitud, como los que hemos visto al principio. Pero y si queremos que el visitante nos escriba un mensaje de varias líneas? En ese caso no nos sirve el campo de texto anterior pues al pulsar el Enter o Intro no aparece una nueva línea.
En estos casos definiremos un tipo distinto de objeto de formulario, los campos de texto de varias líneas.
En este caso en lugar de usar <input..... usarmos la palabra mágica <textarea... que significa area de texto. Las características que le podemos indicar a un area de texto son, el nombre del objeto con name; la anchura del area donde el usuario puede escribir,con cols; la altura de ese area con rows y la palabra mágica wrap
<textarea rows="10" cols="20" wrap="soft">Texto que aparece ya escrito de antemano</textarea>
La palabra mágica wrap puede tomar solo tres valores de los que has de elegir uno.
- off: El texto escrito por el usuario lo recibes tal cuál lo ha escrito, con los saltos de línea (lo que ocurre cuando presiona Intro o Enter) tal cuál él los dió. Si tu area de texto es más estrecha que su frase, la frase continúa sin pasar a verse en la línea de abajo
- soft: En este caso si la frase que escribe el colega visitante es más larga que el ancho de tu area de texto, la frase continua en la línea de debajo, aunque tú recibirás el texto tal cuál el visitante pretendía escribirla, solamente con los saltos de línea que él pulsó, no con los saltos que aparentemente le marca el area de texto para que todas las frases se vean dentro de la ventana.
- hard: Y como última opción, tenemos "hard". Si escoges esta opción, el visitante se pondrá a escribir frases más largas que el ancho del textarea y estas frases se dividirán conforme se alcance la anchura de la ventana, pero tú recibirás el texto con los saltos de línea justo en esos margenes, aunque el visitante no haya pulsado el Intro o Enter en su teclado para indicar una nueva línea.
8.Campos ocultos
Usando PHP podemos crear algunas variables en las que almacenar algunos datos. En ocasiones nos interesa que junto con los datos del formulario que rellena el usuario nos venga también algún dato extra que nos sea de interés.
Imagina por ejemplo que el visitante rellena el formulario y lo envía al servidor. Podríamos guardar la IP del usuario en una variable e indicar en el formulario que nos sea enviado el valor de esa variable (la IP) junto con el resto de los datos. Con esto sabríamos si se han rellenado varios formularios desde la misma IP
O imagina que el formulario es para insertar un mensaje en un foro. Un dato interesante y necesario a guardar junto con el mensaje sería el nombre de usuario, no? Pero estos no son datos que tenga que rellenar el visitante sino datos que podemos recopilar sin necesidad de que el que rellena el formulario sepa nada, por eso se llaman campos ocultos.
En ejemplo de definición de un campo oculto en un formulario sería el siguiente:
<input type="hidden" name="valorocultoarescatar" value="$variable">
Con hidden dentro de type indicamos que se trata de un objeto de formulario del tipo oculto (el usuario no lo ve pero nos llega ese dato).
Por supuesto, como en este caso el usuario no escribe nada, el valor se lo tenemos que indicar nosotros. En el caso del ejemplo de arriba tomará el valor que tenga la variable $variable, que podría ser el nombre de usuario, la IP o cualquier otro dato interesante que queramos.
9.Botón de envío
Ya hemos visto todas las formas que hay de captar información a partir de un formulario, pero de nada nos sirven esos datos si se quedan ahí, pululando por la red. Necesitamos rescatarlos y para ello hay que añadir al formulario unos botones de envio. Cuando el usuario pulse en ellos toda la información se pondrá en marcha.
Existen tres tipos de botón de envío y se definen indicando submit, image o button dentro de las comillas del type en la línea de cada input
Por supuesto, como en este caso el usuario no escribe nada, el valor se lo tenemos que indicar nosotros. En el caso del ejemplo de arriba tomará el valor que tenga la variable $variable, que podría ser el nombre de usuario, la IP o cualquier otro dato interesante que queramos.
9.Botón de envío
Ya hemos visto todas las formas que hay de captar información a partir de un formulario, pero de nada nos sirven esos datos si se quedan ahí, pululando por la red. Necesitamos rescatarlos y para ello hay que añadir al formulario unos botones de envio. Cuando el usuario pulse en ellos toda la información se pondrá en marcha.
Existen tres tipos de botón de envío y se definen indicando submit, image o button dentro de las comillas del type en la línea de cada input
<input type="submit"....
<input type="image"....
<input type="button"...
El botón submit se define con las palabrás mágicas name en el que le colocaremos un nombre para identificarlo y valuedonde escribiremos la acción que se llevará a cabo al hacer clic sobre él. Un ejemplo sería este:
<input type="submit" value="Botón de envio estandar" name="Enviar la información al servidor" />
El botón image es similar al anterior, pero en este caso no se muestra en el navegador un botón como en el caso anterior, sino una imagen que bien pudiera ser un botón más mono dibujado por tí. Está claro que en este caso se usarían las palabras mágicas del submit más algo (la ruta por ejemplo) que indique dónde está la imagen que vamos a usar como botón.
<input type="image" value="Botón de envio personalizado" name="Enviar la información al servidor" SRC="/objetos/imagendeboton.gif" />
Dentro de las comillas de src has de indicar la ruta del archivo de la imagen que quieres usar como botón.
El tecero de estos botones es el button. Este otro es similar al anterior, pero en este caso no hay ninguna cosa predeterminada que se vaya a hacer cuando se pulsa sobre él. Tenemos que indicar nosotros qué debe ocurrir cuando ese botón sea pulsado. Esto se indica con líneas de JavaScript por ejemplo
Etiquetas
1. Required
Con las versiones anteriores al Html5, cuando necesitábamos que alguno de los campos del formulario fuera rellenado por el visitante obligatoriamente, teníamos que realizar la comprobación de que no estuviera vacío después de que el usuario pulsara sobre el botón de envío de los datos.
La versión Html5 ha añadido este nuevo atributo, required que nos permite comprobar que el campo ha sido rellenado antes incluso de pulsar ese botón de envío, sin necesidad de más complicaciones o código extra.
Si el usuario deja este campo en blanco, algunos navegadores arrojarán un mensaje de error, o simplemente colocarán el cursor de escritura al primer campo vacío.
Este atributo se coloca dentro de la etiqueta del input de este modo:
<input type="text" id="nombre-de-usuario" name="usuario" required>
2.Placeholder
Otra útil propiedad que podemos colocar dentro del código de la etiqueta input es placeholder="bla bla bla". Mediante esta propiedad del Html5 podemos definir el texto que queremos que aparezca dentro del campo del formulario a modo de ayuda para las visitas. Por ejemplo, se suele colocar un texto explicativo acerca de la información que se debe rellenar en ese campo.
El texto definido dentro de la propiedad placeholder aparecerá dentro del campo correspondiente con un tono gris clarito, indicando que no es realmente el texto que se va a enviar, sino lo comentado, una ayuda para informar de lo que debe contener ese campo. Lo habrás visto por ejemplo en las casillas de buscador de Google que tienen algunas páginas para buscar en su interior, en las que aparece el texto "Buscar en Google" o algo similar.
Este texto al que me refiero desaparece totalmente al hacer focus dentro del campo, es decir, cuando colocamos el puntero de escritura o hacemos clic dentro del hueco en el que se escribe el dato de ese campo. Además, si lo dejáramos en blanco (bueno no en blanco sino con ese texto), al enviar los datos del formulario ese texto desaparecería, no formaría parte de la información enviada con el formulario, pues es solo un texto indicativo o informativo.
<form>
<input type="text" id="ejemplo" name="ejemplo" placeholder="bla bla bla"> <input type="submit"></form>3.Pattern
Resulta crucial comprobar que los datos introducidos en un formulario por cualquier visitante corresponda con un valor esperado. Eso significa que si se espera una fecha, el dato enviado sea exáctamente un fecha y no cualquier otra cosa. Ten en cuenta que a través de un formulario podrían enviarnos incluso código, con el que cualquiera podría dejarnos la web fuera de juego.
Es por eso que antes de aceptar los datos que el visitante nos propone al rellenar los campos del formulario, hemos de analizar que se trata de la información esperada y no de código malicioso. Para conseguir esto se han usado multitud de códigos de comprobación, especialmente observando si el formato era el esperado. Ahora con Html5 podemos comprobar que un valor insertado en un campo se corresponde con el formato que nosotros decidamos.
La nueva versión de Html5 nos propone por tanto el uso de la propiedad pattern que nos permitirá hacer esa comprobación sin necesidad de recurrir a herramientas basadas en Javascript, Php, etc.
<input type="text" name="name" pattern="\S{5,10}">
Con la línea del ejemplo anterior, cualquier dato introducido en el campo del formulario que no se corresponda con la regla dada por la propiedad pattern no es aceptado.
4.Disabled
Veamos ahora otra de las propiedades que Html5 nos propone, esta vez para desactivar campos al menos temporalmente. Esta propiedad ya existía en las versiones anteriores, pero ahora Html5 permite englobar varios campos encerrándolos entre etiquetas fieldset.
Cuando le aplicamos la propiedad disabled a un campo o a un conjunto de campos, éstos aparecerán pero con un tono clarito, como indicando que no están activados al menos por el momento. Se puede usar cuando no deseas que se pueda completar un campo mientras no se rellene alguno anterior, por ejemplo, o para desactivar el propio botón de envío de datos hasta que no se hayan completado los campos obligatorios.
<form>
Dato1: <input type="text" name="name1"> Dato2: <input type="text" name="name2" disabled> Dato3: <input type="text" name="name3"> <input type="submit" value="enviar"></form>5.Readonly
Este otro atributo readonly es muy parecido al anterior, al atributo disabled. Con el anterior lográbamos desactivar un campo, evitando poder escribir sobre él. Además, el valor en su interior (normalmente nulo pues el visitante no puede escribir sobre él) no es enviado junto con los datos del formulario. Con el atributo readonly en cambio sí que es enviado. Lo que ocurre es que el usuario no puede escribir dentro de él, sino que somos nostros como programadores o webmaster quienes hemos colocado ya el valor que deseamos que sea enviado.
Es parecido a cuando colocábamos la propiedad hidden con la diferencia de que en este caso el visitante sí que puede leer el valor que hemos colocado.
<form>
Dato1: <input type="text" name="name1"> Dato2: <input type="text" name="name2" value="Dato de solo lectura" readonly> Dato3: <input type="text" name="name3"> <input type="submit" value="enviar"></form>6.Autocomplete
Esta otra etiqueta especiamente utilizada en los campos de un formulario, nos permite activar un desplegable que se mostrará al visitante cuando tenga el foco en ese campo (cuando haya hecho clic dentro de él) y en el que aparecerán los valores que anteriormente haya podido escribir en el mismo.
Puede ser de utilidad a los visitantes cuando éstos tengan que completar algún campo frecuentemente. Por otro lado, es util por el contrario desactivarlo en aquellos campos destinados a recopilar contraseñas o datos que no queramos que se muestren en ese mismo ordenador al ser usado el mismo formulario por otra persona.
Para activar esta opción hemos de colocar en ese input la etiqueta autocomplete y, para desactivarla autocomplete="off". De forma predeterminada esta opción de autocompletar aparecerá o no según cómo lo tenga configurado el usuario en su navegador, por lo que no está de más colocar la etiqueta con el valor que nosotros deseemos, especialmente cuando queramos desactivarla en algún campo comprometido.
<form>
Dato1: <input type="text" name="name1" autocomplete="off"> Dato2: <input type="text" name="name2" autocomplete> Dato3: <input type="text" name="name3"> <input type="submit" value="enviar"></form>7.Datalist
Este nuevo elemento agrupa varios valores predefinidos que facilitan el autocompletado de un campo tipo input. De manera que el usuario según vaya escribiendo el navegador abre una lista desplegable con las diferentes opciones a seleccionar.
Lo que anteriormente veníamos haciendo con plugins en jQuerry ahora lo podemos hacer fácilmente con esta nueva etiqueta de los formularios en HTML5.
En ningún momento se fuerza al usuario a elegir el valor del datalist, simplemente le sugiere ciertos valores.
<form name="formulario" id="formulario" action="/demos/2013/05-html-form-datalist.php" method="POST"> <!-- La datalist con id 'listas' y sus diferentes valores -->
Escribe un color (Azul, rojo, amarrillo, negro, verde):
<datalist id="listas">
<option value="azul">
<option value="rojo">
<option value="amarillo">
<option value="negro">
<option value="verde">
</datalist> <!-- Asociamos al input la datalist 'listas' --> <input name="color" list="listas"> <input type="submit" value="Enviar"></form>
8.Keygen
Esta etiqueta sirve para enviar claves en el autentificado web. Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir auntentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.
<keygen name="clave">
9.Output
La etiqueta HTML5 output va a facilitarnos el trabajo a la hora de realizar operaciones matemáticas en los formularios ya que representa el resultado de un cálculo.
Hasta hace bien poco, este tipo de cáculos los veníamos haciendo con JS o con lenguajes de servidor tras el envío del formulario.
<form method="POST" oninput="resultado.value=parseInt(valor1.value)+parseInt(valor2.value)">
<input type="number" id="valor1" value="0"> +
<input type="number" id="valor2" value="0"> =
<output name="resultado" for="valor1 valor2"></output>
</form>
- En la etiqueta form encontramos el atributo oninput, en el cogemos los valores de las etiquetas ‘valor1‘ y ‘valor2′ y las sumamos.
- Los input con id ‘valor1′ y ‘valor2‘ son te tipo number HTML5, es decir que siempre contendrán valores numéricos.
- Por último la etiqueta HTML5 output con name ‘resultado‘ obtiene el valor de la suma de‘valor1′ y ‘valor2′ en tiempo real, es decir, según se escriben los valores vas obteniendo el cálculo.
10.Number
Este elemento valida automáticamente que los valores introducidos sean numéricos sin necesidad de scripts adicionales, toda la validación la realiza el propio navegador. Esto va a ahorrarnos varias líneas de código PHP o jQuery a la hora de validar los formularios.
<form name="ejemplo1" action="11-html5-number-input.php" method="POST"> Introduce tu edad: <input type="number" name="edad"> <input type="submit" value="Enviar"></form><?php //sacamos la edad introducida if ($_POST['edad']) echo "la edad recibida es: " .$_POST['edad'];?>
- Creamos un formulario con method POST, en él tenemos el botón de enviar y el input de tipo number.
- Al enviar el formulario con la edad nos hará automáticamente la validación para ver si la edad es un contenido numérico.
- Si es numérico nos dejará enviar el formulario y sacará por pantalla la edad enviada.
Ejemplo dos
<form name="ejemplo2" action="11-html5-number-input.php" method="POST"> Introduce tu edad (min=18 max=99, campo obligatorio): <input type="number" name="edad" min="18" max="99" step="5" required="required">
<input type="submit" value="Enviar">
</form> <?php if ($_POST['edad']) echo "la edad recibida es: " .$_POST['edad'];?>
- step: Con un valor igual a 5, esto hará que al clickar las flechas el valor variará de 5 en 5.
- required: El campo será obligatorio.
- min y max: El valor mínimo será de 18 y el máximo de 99.
Atributos válidos para number imput
- name: Nombre del input (name=”nombre del input”).
- disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=”disabled”), por defecto activado.
- Form: Con este atributo se asocia el id del form al que pertenece el input (form=”id del form”).
- Autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=”off”, autocomplete=”on”)
- Autofocus: Este atributo hace que el cursor se situe en en input (autofocus=”autofocus”).
- list: Asocia mediante id una lista de valores predefinidos (list=”nombre lista”)
- min y max: Fijan los valores máximos y mínimos que puede tener el input number(max=”5″ y/o min=”0″).
- step: Valor numérico con el cual varías el intervalo del input (step=”2″, sumarías o restarías de 2 en 2 dando a las flechas).
- readonly: Con el valor activado el input no podrá variar de valor, no se podrá editar (readonly=”readonly”).
- required: Determina si el input tiene que ser rellenado obligatoriamente (required=”required”).
- Placeholder: Permite al usuario ver una leyenda en el input de entrada de datos. Cuando el usuario clicke sobre el input esta leyenda desaparecerá (placeholder=”leyenda, texto explicativo”).
- value: Valor por defecto del input.
11.Range
Este input es muy parecido al HTML5 number imput en cuanto al formato de datos, la diferentecia radica en que los valores se especifican mediante sliders o barras de desplazamiento.
<input type="range" name="edad" min="18" max="99" step="1" value="30">
- máx y min para establacer el rango de valores máximo y mínimo.
- value para especificar un valor por defecto.
- step para establecer el valor numérico de avance del slider o barra de desplazamiento.
<form name="ejemplo" action="13-html5-range-input.php" method="POST">
Introduce tu edad:
<input type="range" name="edad" min="18" max="99" step="1" value="40">
<input type="submit" value="Enviar">
</form> <?php
//recojo el valor y lo saco por pantalla
if ($_POST['edad'])
echo "la edad recibida es: " .$_POST['edad'];?>
12.Tel
Este resulta muy últil para los dispositivos móviles actuales.
El dispositivo detecta el input y al pulsar en él automáticamente sale el teclado telefónico del movil para teclear el número en cuestión.
<form name="ejemplo1" action="15-html5-tel-input.php" method="POST">
Introduce tu TELEFONO: <input type="tel" name="telefono">
<input type="submit" value="Enviar">
</form> <?php
if ($_POST['telefono'])
echo "tu teléfono es: " .$_POST['telefono'];
?>
- He creado un sencillo formulario con método POST con un campo de tipo ‘tel’.
- Tras enviar el formulario saco por pantalla con PHP el valor del número de teléfono.
Atributos válidos
- name: Nombre del input (name=”nombre del input”).
- disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=”disabled”), por defecto activado.
- type: tipo de input, en este caso es ‘tel’
- Form: Con este atributo se asocia el id del form al que pertenece el input (form=”id del form”).
- Autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=”off”, autocomplete=”on”).
- Autofocus: Este atributo hace que el cursor se situe en en input (autofocus=”autofocus”).
- list: Asocia mediante id una lista de valores predefinidos (list=”nombre lista”).
- maxlength: Longitud máxima en caracteres del número introducido.
- readonly: Con el valor activado el input no podrá variar de valor, no se podrá editar (readonly=”readonly”).
- required: Determina si el input tiene que ser rellenado obligatoriamente (required=”required”).
- size: Anchura del input en el form.
- pattern: Expresión regular que a de cumplir el número de teléfono.
- Placeholder: Permite al usuario ver una leyenda en el input de entrada de datos. Cuando el usuario clicke sobre el input esta leyenda desaparecerá (placeholder=”leyenda, texto explicativo”).
- value: Valor por defecto del input.
13.Email
Anteriormente había que usar muchas líneas de código para validar los emails en los formularios, ahora ya no es necesario gracias a este input
<form name="ejemplo1" action="16-html5-email-input-demo2.php" method="POST">
Introduce tu email: <input type="email" name="email"
pattern="[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*@[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{1,5}">
<input type="submit" value="Enviar">
</form>
14.Color
Este nuevo input de HTML5 nos proporciona una paleta (selector) de colores sin necesidad de añadir plugins ni códigos adicionales como veníamos haciendo hasta ahora. Así con un solo click podemos elegir facílmente un color.
<input name="color" type="color" />
A la paleta de colores se le puede poner un valor por defecto en hexadecimal, por ejemplo el negro sería así: #000000, aquí la sintaxis:
<input name="color" type="color" value="#000000" />
15.Search
Con este campo podremos decir en la validación del formulario que el campo contendrá valores de búsqueda.
<form name="ejemplo" action="22-html5-search-input.php" method="POST">
Introduce el término de búsqueda: <input type="search" name="busqueda"><br> <input type="submit" value="Enviar"> </form>
16.Url
Se parece bastante a la tipo de input tel. Este campo cuando se visualiza en dispositivos móviles facilita en el teclado las teclas ‘.’, ‘/’, y ‘.com’.
<input type="url" name="direccionweb" />
17.Date
Sirve para introducir fechas.
<input type="date" name="fecha">
Fecha nacimiento: <input type="date" name="cumpleanios" step="1" min="2013-01-01" max="2013-12-31"
value="2013-01-01">
18.Datetime
Fecha y hora actual: <input type="datetime" name="fechahora" step="1" min="2013-01-01T00:00Z" max="2013-12-31T12:00Z" value="2013-01-01T12:00">
19.Datetime-local
Fecha y hora actual: <input type="datetime-local" name="fechahora" step="1" min="2013-01-01T00:00"
max="2013-12-31T12:00" value="2013-01-01T12:00">
20.Month
Anteriormente he hablado de otros input de fecha similares como date,datetime-local y datetime la sintaxis de este input es muy similar a estos mencionados.
El valor devuelto es del siguiente formato: AAAA-MM es decir año y mes (2014-01).
<form nanme="ejemplomonth" action="001-month-input-html5.php" method="POST">
<input type="month" name="mes" step="1" min="2013-12" max="2014-12" value="2014-01" > <input type="submit" name="enviar" value="Enviar"> </form>
21.Time
<form action="http://www.anerbarrena.com/demos/2014/002-time-input-html5.php" name="formulario">
<input type="time" name="hora" value="11:45:00" max="22:30:00" min="10:00:00" step="1"> <input type="submit" value="enviar"> </form>
22.Week
Tal y como el nombre indica este elemento sirve para la selección del número de semana de un determinado año.
El formato del valor devuelto es el siguiente: 2014-W07.
<form name="demo" action="/demos/2014/005-week-input-html5.php" method="POST">
<input type="week" name="semana" min="2014-W01" max="2014-W16" value="2014-W01"> <input type="submit" value="Enviar"> </form>
|
No hay comentarios:
Publicar un comentario