SEMANA DE RECESO
Los nuevos input HTML5 para formularios
* Datalist input HTML5
Este nuevo elemento aglutina varios valores predefinidos que facilitan el autocompletado de un campo tipo input.
Es decir, según el usuario va escribiendo, el navegador abre una lista desplegable con las diferentes opciones a seleccionar. Es muy parecido a un combo o lista.
Podéis ver la documentación y ejemplos en el post ‘Datalist en HTML5: Sugiere una lista de valores en un form‘.
keygen HTML5
Es un campo 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.
output HTML5
Esta nueva etiqueta representa el resultado de un cálculo entre los diferentes input de un formulario.
Tened en cuenta que solo representa y no se recoge dicho dato en el envio del formulario. Podéis verlo en funcionamiento en el post ‘HTML5 output: operaciones matemáticas en tiempo real en tu form‘.
2
3
4
5
|
<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>
|
tomado de : http://www.anerbarrena.com/html5-output-935/
number input HTML5
Este input valida automáticamente que los valores introducidos sean numéricos, con el consiguiente ahorro de código en la recepción o validación de los formularios.
El post en el que hay más info es ‘HTML5 number input: Un nuevo campo de tipo numérico en el form‘.
Os dejo una imagen del elemento.
range input HTML5
Este input es muy parecido al HTML5 number input, la diferentecia radica en que en este caso la única manera de especificar el valor es mediante su slider con sus correspondientes límites.
tel input HTML5
Este nuevo input html5 resulta muy últil en los dispositivos móviles actuales.
El dispositivo móvil detecta que el input es de tipo ‘tel’ y al pulsar en él automáticamente sale el teclado telefónico del movil para insertar el número en cuestión.
3
4
5
6
7
8
9
|
<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'];
?>
|
tomado de : http://www.anerbarrena.com/html5-tel-input-1802/
email input HTML5
Pues con este la validación de campos de email va a ser tarea sencilla.
El elemento por defecto detecta que el campo debe ser rellenado con contenido válido de una cuenta de email, por lo que mostrará una @ en el teclado y hara las verificaciones pertinentes para cumplir los requisitos de una dirección de email.
<form name="ejemplo1" action="16-html5-email-input.php" method="POST">
Introduce tu email: <input type="email" name="email">
<input type="submit" value="Enviar">
</form>
1
2
3
4
|
<?php
if ($_POST['email'])
echo "tu email es: " .$_POST['email'];
?>
|
color input HTML5
Representa 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.
3
4
|
<?php
if ($_POST['color'])
echo "El color seleccionado es: " .$_POST['color'];
?>
|
search input HTML5
Con este input podremos decir en la validación del formulario que el campo contendrá valores de búsqueda, así el propio input nos porporciona un dato válido y el teclado del dispositivo móvil mostrará el botón ‘buscar’.
<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>
<input type="search" name="busqueda">
|
http://www.anerbarrena.com/html5-search-input-2315/
url input HTML5
<input type="url" name="direccionweb" />
|
date input HTML5
Este elemento vale para representar en nuestra web un datepicker o calendario, el formato de la fecha devuelto es ‘AAAA-MM-DD’.
Como podréis ver la sintaxis es muy sencilla, os pongo varias de las opciones y parámetros más usados:
- El formato de fecha devuelto por defecto es AAAA-MM-DD.
- Se puede configurar un mínimo de fecha a seleccionar con el atributo ‘min‘:
min=”2013-10-08″. - Se puede configurar un máximo de fecha a seleccionar con el atributo ‘max‘:
min=”2014-10-08″. - Con el atributo ‘value‘ se puede poner una fecha por defecto en el calendario:
value=”2013-10-08″. - Con el atributo ‘step‘ puedes establecer el avance o retroceso de días con las flechas del calendario.
ejemplo :
max="2013-12-31" value="2013-01-01">
Poner la fecha actual por defecto con la ayuda de PHP date()
En este segundo ejemplo vamos a poner por defecto la fecha actual con la ayuda de la función de PHP date():
otro
<input type="date" name="cumpleanios" step="1"
min="2013-01-01" max="2013-12-31" value="<?php echo date("Y-m-d");?>">
|
No hay comentarios.:
Publicar un comentario