La etiqueta de HTML5 url input se asemeja bastante al tel input en cuanto a funcionalidad. Este nuevo input visualiza en teclados de dispositivos las teclas ‘.’, ‘/’, y ‘.com’ para facilitar la inserción de URLs.
En el siguiente enlace podéis ver los nuevos inputs y atributos formularios que han salido en HTML5.
Sintaxis de HTML5 url input
A continuación os detallo la sintaxis extraída de su web oficial.
|
1 |
<input type="url" name="direccionweb" /> |
Os muestro una imagen del HTML5 url input en un iPhone 4S.
Ejemplo de HTML5 url input
He preparado este ejemplo para probar el nuevo input en un dispositivo móvile, y así poder ver las teclas facilitadas por defecto para la inserción de URLs:
|
1 |
<input type="url" name="direccionweb" /> |
Atributos válidos en HTML5 url input
Voy a listaros los atributos válidos para este input según la W3C.
- 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 ‘url’
- 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.
- novalidate: Hace que el input no se valide al enviarse el formulario.
Listado de los nuevos input HTML5
En esta url tenéis el listado completo de los nuevos input de HTML5.
Listado de los nuevos atributos HTML5
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.