Construcción de

Páginas WEB I Docente: Víctor M. González Camacho

Elementos Input
Nuevos Atributos

Nuevos Atributos
En HTML5 aparecen un conjunto de atributos nuevos para los elementos input que nos permiten
manipular mejor los formularios. Estos son: placeholder, autocomplete y autofocus.
Placeholder

Placeholder
Hasta HTML5 la forma que existía de dar información contextual sobre el contenido que había
que insertar en un campo de formulario era mediante el elemento label.
En HTML5 aparece el atributo placeholder, el cual permite poner información sobre lo que hay
que insertar dentro del elemento input dentro del mismo elemento.

<input type="text" name="nombre" id="nombre" placeholder="Nombre"/>

Como podemos ver el texto del placeholder queda difuminado dentro del elemento input.

Autocomplete

Autocomplete
Mediante el atributo autocomplete permitiremos al agente de usuario (navegador) que pueda
apoyarse en información introducida en otros formularios en el pasado para intentar completar
el contenido de un campo ofreciendo alternativas de texto.
Algunos navegadores permiten tener datos preconfigurados para poder autocompletar el
contenido del formulario.

<input type="text" name="nombre" id="nombre" autocomplete="name">

<input type="text" name="url" id="url" autocomplete="off">

<input type="text" name="direccion" id="direccion" autocomplete="street-address">

Los valores que pueden tener pueden ser on y off. O bien valores que indiquen la semántica del
campo para que se pueda autocompletar, estos pueden
ser: name, country, sex, street, username, organization,… puedes consultar más valores para el
atributo autocomplete
Autofocus

Autofocus
Hasta HTML5 el control del foco de los elementos input de un formulario debía de ser ejecutado
mediante código Javascript. Pero ahora ya contamos con un atributo que nos permite indicar
cual de los elementos input de un formulario empieza a tener el foco del mismo.
Solo uno de los elementos input puede tener el atributo autofocus.
Bastará con añadir el atributo autofocus sobre uno de los elementos input para que este obtenga el
foco cuando se cargue la página.

<input type="text" name="url" id="url" autofocus>

1
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

Nuevos tipos Input

Nuevos tipos Input

Una de las cosas que nos encontramos en HTML5 son nuevos tipos de elemento de entrada de
datos en los formularios. Lo que viene a ser el atributo type del elemento input.
Hasta HTML 4.01 podíamos definir un
elemento input como: text, radio, checkbox, password, file, hidden y submit.
Recordamos que la estructura de un elemento input es:

<input type="tipo" id="identificador" size="tamaño" name="nombre" value="texto por defecto"/>

Ahora contamos con nuevos tipos de elementos input como

son: search, email, url, tel, range, number, date y color.
Input Search

Input Search
El tipo search de los elementos input nos sirven para definir campos de entrada para búsquedas.
Es decir, si añadimos un buscador dentro de nuestra web, el campo sobre el cual el usuario
podrá introducir el texto de la búsqueda será de tipo search.

<input type="search" id="busqueda" name="q"/>

Vemos que simplemente hemos especificado el valor search dentro del atributo type del
elemento input. Al contrario que lo que sucede en otros tipos de elementos input en el caso de las
búsquedas no hay una visualización específica dentro de los diferentes navegadores.
Input Email

Input Email
Uno de los datos de contacto más solicitados en Internet es, obviamente, el email. Hasta la
versión de HTML5 cuando estamos creando un formulario y queremos que un campo fuese de
tipo email lo que hacíamos era declararlo de tipo texto y crearnos unos códigos javascript de
validación de emails.
Con la aparición del tipo email, deberemos de marcar el elemento input como un elemento del
tipo email.

<input type="email" id="email" name="email"/>

A partir de este momento el navegador será el que realice las comprobaciones de que el dato
introducido sea un email. Bien es cierto que, de momento, las validaciones de los navegadores
son mínimas y no van más allá del formato del email en cuanto a tener una @ o que después del
punto exista un dominio, sea el que fuese.
Visualmente, en Google Chrome tenemos el siguiente efecto visual en la validación de un
email:

2
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

De igual manera las opciones que nos ofrece del texto a rellenar serán emails y no cualquier otro
tipo de texto. Al menos textos que cuadren con la expresión regular del email.
Input URL

Input URL
El comportamiento del tipo url es parecido al del tipo email. La única diferencia es que en este
caso se valida que el contenido insertado coincida con una URL. Es decir, tenga su protocolo
especificado (http://), el servidor, el dominio,… con lo cual evitaremos el tener que utilizar,
como sucedía anteriormente, validadores de URL.

<input type="url" id="website" name="website">

Si utilizamos un tipo url dentro de un elemento input y no insertamos un texto con forma de
URL, el navegador nos mostrará lo siguiente:

Input Tel

Input Tel
El tipo tel nos servirá para indicar que el campo es un número de teléfono. Dada la gran cantidad
de formatos de números de telfóno que hay en el mundo, no se realizará ninguna validación de
formato sobre el campo.
Si bien, la semántica que damos indicando que irá un número te teléfono hace que los campos
de tipo tel para algunos dispositivos móviles muestre un teclado numérico.
Podremos insertar un campo que gestione un número de teléfono mediante el tipo tel de la
siguiente forma:

<input type="tel" id="telefono" name="telefono">

Input Number

Input Number
Los elementos input de tipo number nos van a valer para poder introducir números. Para crear un
elemento input de tipo number simplemente tendremos que crear la siguiente estructura:

<input type="number" id="numero" name="numero">

A este tipo de elementos le podemos especificar un par de atributos más. Por un lado podemos
fijar cual es el número mínimo y máximo que se puede insertar. Esto lo haremos mediante los
atributos min y max.

<input type="number" id="numero" name="numero" min="valor_minimo" max="valor_maximo">

Por otro podemos indicar el valor de incremento o decremento de los números. Es decir, si
queremos que solo se incremente de dos en dos, o de tres en tres,… Esto lo conseguimos
mediante el atributo step.

3
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

<input type="number" id="numero" name="numero" step="incremento">

De esta manera podríamos tener el siguiente código fuente:

<form action="#" method="get">

<label for="anio">¿Cuál es tu año par favorito del siglo XXI?</label>

<input type="number" id="anio" name="anio" min="2000" max="2018" step="2"/>

<input type="submit" value="Buscar"/>

</form>

Vemos que el valor mínimo es 2000 y el máximo 2018 y que solo podemos incrementar o
decrementar de 2 en 2, ya que preguntamos por años pares.
Los campos input de tipo number nos forzarán a que el valor introducido sea un número y
además que esté dentro del rango marcado por los atributos min y max.

Input Range

Input Range
Otra forma de elegir un valor numérico es mediante un slider. Para poder poner estas barras de
selección tenemos el tipos range dentro de los elementos input.

<input type="range" id="numero" name="numero">

Los elementos input de tipo range aceptan los mismos parámetros que los elementos number. Así
que podremos añadir los atributos min, max y step.

<input type="range" id="numero" name="numero" min="valor_minimo" max="valor_maximo" step="incr

emento">

De esta manera el mismo ejemplo anterior relativo a los años, pero con un slider quedaría de la
siguiente forma:

<form action="#" method="get">

<label for="anio">¿Cuál es tu año par favorito del siglo XXI?</label><br/>

<input type="range" id="anio" name="anio" min="2000" max="2018" step="2"/>

<input type="submit" value="Enviar"/>

</form>

Como se puede ver es idéntico.

4
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

Uno de los problemas que nos econtramos con los sliders es que no tienen una representación
visual del valor que estamos marcando. Es por ello que deberemos de utilizar algún código
en Javascript para poder mostrarlo.
Así el mismo ejemplo, pero visualizand el año quedaría de la siguiente forma:

<form action="#" method="get">

<label for="anio">¿Cuál es tu año par favorito del siglo XXI?</label><br/>

<input type="range" id="anio" name="anio" min="2000" max="2018" step="2"/>

<span id="salida"></span><br/>

<input type="submit" value="Enviar"/>

</form>

Y tendríamos que añadir el siguiente código Javascript:

var anio = document.getElementById("anio");

var salida = document.getElementById("salida");

salida.textContent = anio.value;

anio.oninput = function() {

salida.textContent = anio.value;

Este código Javascript simplemente vuelca el valor del elemento input sobre un elemento span.
Input Datetime

Input Datetime
Otra de las opciones que han incoporado los elementos de texto input en los
formularios HTML5 es el manejo de fechas. Para ello contamos con 4 tipos de elementos input,
que son: datetime-local, month, time y week.
Input Datetime-local

Input Datetime-local
Este tipo de elemento nos permite escoger una fecha y hora, sin especificar la zona horaria en la
que se encuentra. El valor del tipo input será datetime-local.

<input type="datetime-local" id="fechahora" name="fechahora"/>

La representación visual de un tipo datetime-local será:

5
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

Input Month

Input Month
En este caso se creará un selector de meses del año. El valor del tipo input para los meses
en month.

<input type="month" id="mes" name="mes"/>

La representación visual para los campos de texto de tipo mes es:

Input Time

Input Time
Para poder indicar una hora en formato horas y minutos (hh:mm) disponemos del tipo time para
los elementos de texto de un formualario. La estructura para un elemento input de tipo time es:

<input type="time" id="hora" name="hora"/>

Y su representación visual:

Podemos comprobar que se le da el formato *hh:mm** dentro de la caja de texto.

Input Week

Input Week
El último elemento para el manejo de fechas es el tipo week. En este caso el elemento week nos
permite seleccionar una semana dentro del año.

6
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

<input type="week" id="semana" name="semana"/>

Vemos que la representación visual cambia y nos muestra las semanas del año dentro del
calendario.

Input Color

Input Color
Si lo que queremos es que un usuario nos indique un color de una paleta de colores utilizaremos
el elemento input con un tipo color.

<input type="color" name="colorfavorito" value="#ff0000">

Mediante el atributo value podemos indicar en formato RGB un color que será el que muestre la
paleta por defecto.
De esta manera, en el navegador, podremos ver algo parecido a lo siguiente:

7
Construcción de
Páginas WEB I Docente: Víctor M. González Camacho

Input File

Input File
En HTML 4.01 ya existía un campo de texto input en que podíamos subir ficheros. Este era el
tipo file. En HTML5 sigue existiendo dicho campo, si bien se ha añadido una serie de atributos
adicionales para su manejo.
La estructura de un tipo file es la siguiente:

<input id="ficheros" type="file" name="file" id="file"><br/>

Uno de los atributos específicos del tipo file que ya existía era el filtrado de tipos de ficheros a
aceptar. Esto lo indicamos con el atributo accept el cual recibirá una extensión de fichero o un
mime-type de los ficheros que aceptamos subir separados por comas.
Si queremos hacerlo por extesiones:

<input id="ficheros" type="file" name="file" id="file" accept=".jpg,.gif,.png"><br/>

O por mimetypes:

<input id="ficheros" type="file" name="file" id="file" accept="image/*,audio/*"><br/>

En el caso de que queramos subir más de un fichero deberemos de recurrir al atributo multiple.

<input id="ficheros" type="file" name="file" id="file" accept="image/*" multiple><br/>

Por último nos encontramos con el atributo capture el cual nos sirve para indicar que el origen
del fichero podrá ser la cámara o micrófono del dispositivo. Los valores del
atributo capture pueden ser user para la cámara frontal o enviroment para la cámara trasea.

<input id="ficheros" type="file" name="file" id="file" accept="image/*" capture="user"><br/>