Categorías: código HTML

input type="color"

Índice

La etiqueta <input> en html tiene como valor "color" en su atributo type, input type="color", esto simboliza a un campo de entrada de un color. En la actualidad en los navegadores modernos los controles de color en su mayoría son representados por controles que permiten a los usuarios finales cambiar su color gráficamente.

Para el caso de envío del contenido del formulario, los navegadores hacen el mecanismo de conversión de la información a una cadena que simboliza un color. A continuación mostramos las reglas para componer un color válido.

indice del tema

Colores

Básicamente está formado por los códigos.

  • Hexadecimal
  • Hue saturation lightness
  • Nombre de color en HTML
  • RGB

Para mayor información sobre los colores hexadecimal, Hue saturation lightness, entre otros más diríjase a Códigos de colores HTML.

Ejemplos

En este presente ejemplo crearemos un formulario con el campo de color, usted verá las funcionalidades de este control en el presente ejemplo.

<form style="background-color: #3f6a9e;">
       <fieldset>

           <legend><b>Campo de color</b></legend>
           <p> Color por defecto: <input type="color"> </p><br>
           <input type="submit">
       </fieldset>
   </form>

Adentrándonos más sobre input type="color", en este ejemplo facilitaremos una lista de colores propuestas para que el usuario final elige el color que más desea, además de selección de color predeterminada. Para ello usaremos etiqueta <datalist>, para ello haremos un enlazado entre el id de la lista y él atributo list del campo.

<form>
    <fieldset>
        <legend><b>Colores</b></legend>
        <p>

            Color <input type="color" list="listacolor">

            <input type="submit">

        </p>
    </fieldset>
</form>

<datalist id="listacolor">
    <option value="#ff0000">
    <option value="#00ff00">
    <option value="#ffff00">
    <option value="#000080">
</datalist>

Siguiendo con input type="color" cumplimentaremos un poco más. Para ello  este último ejemplo mostraremos su valor en hexadecimal en un campo de texto una vez seleccionada un color que usted sea ver en código hexadecimal.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend>Colores</legend>
        <input type="color" id="get" onchange="fetch()">
        <label><b> Valor en Hexadecimal </b></label>
        <input type="text" id="put">
    </fieldset>
</form>

 



Nota: Para las personas que desean recoger datos de colores RGB o hexadecimal y los demás se encuentra en este control input type="color", en su mayoría de los casos se utiliza a la hora de darle estilos a nuestro pagina, como para darle color al texto, color de fondo de la pagina, color de pie de pagina, entre otras mas.

admin

Compartir
Publicado por
admin

Entradas recientes

Descargar driver brother hl 4150cdn

En el siguiente artículo les vamos a enseñar a descargar el driver brother hl 4150cdn de…

1 semana hace

Descargar driver brother dcp j125

En el siguiente artículo les vamos a enseñar a descargar el driver brother dcp j125 de…

1 semana hace

Descargar driver brother hl 1210w

En el siguiente artículo les vamos a enseñar a descargar el driver brother hl 1210w de…

1 semana hace

Descargar driver brother mfc j480dw

En el siguiente artículo les vamos a enseñar a descargar el driver brother mfc j480dw de…

1 semana hace

Descargar driver brother dcp j4120dw

En el siguiente artículo les vamos a enseñar a descargar el driver brother dcp j4120dw de…

1 semana hace

Descargar driver brother hl 5340d

En el siguiente artículo les vamos a enseñar a descargar el driver brother hl 5340d de…

1 semana hace