input type=”url”

La etiqueta <input> 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 <form> 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.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend>url</legend>
        <p>Campo de url: <br>
            <input type="url" name="direccion" placeholder="escribe tu sitio web">
        <input type="submit" value="Enviar">
         </p>
    </fieldset>
</form>

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.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend>url</legend>
        <p>Campo de url: <br>
            <input type="url" name="direccion" value="https://www.codigosinformaticos.com" style="width: 20%;">
        <input type="submit" value="Enviar">
         </p>
    </fieldset>
</form>

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 <datalist> con su referencia del atributo ID. La etiqueta <datalist> nos facilitará un par de sugerencias con el cual el usuario final podría elegir automáticamente el valor del control.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend>url</legend>
        <p>Campo de url: <br>
            <input type="url" name="direccion" placeholder="escribe su sitio web" style="width: 40%;" list="lista">
        <input type="submit" value="Enviar">
         </p>
    </fieldset>
</form>
<datalist id="lista">
    <option value="https://www.codigosinformaticos.com"></option>
    <option value="https://www.google.com"></option>
    <option value="https://www.bing.com"></option>
    <option value="https://espanol.yahoo.com/?p=us"></option>
    <option value="https://www.youtube.com/channel/UCdTt5I_7-glPALFIgpUYSAQ?view_as=subscriber"></option>
</datalist>

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.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend>url</legend>
        <p>Campo de url: <br>
            <input type="url" name="direccion" placeholder="escribe su sitio web" style="width: 40%;" pattern=".+\.com" title="solo se acepta url .com">
        <input type="submit" value="Enviar">
         </p>
    </fieldset>
</form>