input type=”url”

input type url en html

La etiqueta en HTML tiene como valor 'url' en su atributo type, input type=”url” esto simboliza a un campo para un solo url absoluto, este control extasiado a un campo qué es caja de texto para que el usuario final pueda editarla en una sola línea de texto regular.

Ejemplos

En este presente ejemplo tenemos un formulario

con el campo de entrada de url, así como también haremos el uso del atributo placeholder, perteneciente HTML5, esta tributo es de gran ayuda para dar una breve información al usuario final, es como un ejemplo o información corta, este será mostrada dentro del control de la url, al comienzo será como un valor, pero al iniciar a escribir el texto se removerá dicha información corta del control.


    
url

Campo de url:

url

Campo de url:


Siguiendo con el ejemplo de input type=”url”, ahora haremos uso del atributo value esto nos permitirá iniciar un valor para este control cuando una vez cargue la página.

url

Campo de url:

url

Campo de url:

Siguiendo con el ejemplo de input type=”url”, haremos uso de un nuevo atributo de html 5, list, este atributo es enlazado con la etiqueta con su referencia del atributo ID. La etiqueta nos facilitará un par de sugerencias con el cual el usuario final podría elegir automáticamente el valor del control.

url

Campo de url:

url

Campo de url:

Para terminar con el ejemplo de input type=”url”, combinaremos dos atributos nuevos en HTML5, por lo general estos atributos trabajan juntos, estos son pattern y required. Estos son muy importantes a la hora de poner o establecer un conjunto de reglas para el ingreso de la información a este control.

  • El atributo pattern nos ayuda poner expresiones que cualquier valor ingresada debe respetar, para que el usuario final conozca su explicación información de la regla usaremos el atributo title.
  • Tenemos el otro atributo required, el cual prohíbe al usuario final dejar este campo vacío y indica que este campo debe ser rellenada.
url

Campo de url:

url

Campo de url:

vamos al inicio

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir