HTML de solo lectura para una etiqueta de selección

  2. HowTo
  3. HTML Howtos
  4. HTML de solo lectura para una etiqueta …
Migel Hewage Nimesha 20 junio 2023
HTML HTML Form
  1. el atributo <seleccionar solo lectura>
  2. Use el atributo <select disabled> para emular el atributo readonly para una etiqueta select en HTML
  3. Use el atributo pointer-events: none para emular el atributo readonly para una etiqueta select en HTML
  4. Conclusión
HTML de solo lectura para una etiqueta de selección

HTML, Lenguaje de marcado de hipertexto, es ampliamente utilizado en el formato de sitios web. Además, CSS (hojas de estilo en cascada) se puede utilizar para diseñar sitios web con formato.

A continuación se muestran algunos atributos utilizados en HTML y CSS para controlar el comportamiento del usuario y el cursor.

el atributo <seleccionar solo lectura>

<select> es la etiqueta HTML más utilizada para obtener entradas del usuario desde el teclado, el mouse o la pantalla táctil. Por lo general, el uso de <select> permite a los usuarios elegir una o más opciones, mientras que el uso de <select readonly> permite a los usuarios mostrar solo el valor en lugar de modificarlo.

El atributo solo lectura especifica que los elementos de entrada no son editables y son de solo lectura. Además, texto, URL, número de teléfono, correo electrónico, contraseña, fecha, mes, semana, hora y número son los formatos admitidos para solo lectura.

Sintaxis:

<select readonly>

Pero <select readonly> no es válido en HTML hoy en día porque ya está en desuso. En lugar de eso, podemos usar el atributo deshabilitado.

Use el atributo <select disabled> para emular el atributo readonly para una etiqueta select en HTML

El atributo deshabilitado es un atributo booleano que se utiliza para especificar que la lista desplegable está deshabilitada. El uso de deshabilitado permite que los elementos no se puedan hacer clic ni utilizar y elimina el control de los usuarios.

Además, el campo de entrada se muestra como no aplicable y deshabilita la capacidad de uso.

Sintaxis:

<select disabled>

Profundicemos en esta sintaxis con un ejemplo creando una lista desplegable para tener una idea más clara.

Código de ejemplo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML disabled Attribute</title>
    </head>
    <body style="text-align: center;">
        <h1 style = "color: brown;"> HTML Select Disabled Attribute </h1><br>
        <p style="color: black; font-size: large"> What is your Home Country? </p>
        <p style="color: grey"> (Selection of choice is disabled) </p>

        <select disabled>
                <option value="Sri Lanka">Sri Lanka</option>
                <option value="India">India</option>
                <option value="Turkey">Turkey</option>
        </select>
    </body>
</html>

Primero, abrimos un archivo HTML definiendo su juego de caracteres meta con el título HTML disabled Attribute y abrimos <body> con todos los elementos diseñados para mantener el contenido centrado después de cerrar <head>.

Luego, definimos el nombre del encabezado como HTML Select Disabled Attribute con <h1> y color marrón. Obtuvimos un salto de línea después del encabezado usando <br>.

Luego definió una pregunta, ¿Cuál es tu país de origen? usando <p> y con un tamaño de fuente grande y color negro. Después de eso, definimos una frase (La selección de elección está deshabilitada) con un color gris.

Luego se usa <seleccionar deshabilitado> para deshabilitar la lista desplegable. Incluso si está deshabilitado con <seleccionar deshabilitado>, hemos definido algunos valores para él como Sri Lanka, Turquía e India.

Al final del archivo HTML, todas las etiquetas utilizadas se cierran en consecuencia.

Según el resultado, la lista desplegable deshabilitada está gris y fuera del control del usuario. Los usuarios no pueden hacer clic ni elegir opciones de la lista desplegable; así es como funciona la función <seleccionar deshabilitado>.

La diferencia entre “solo lectura” y “deshabilitado” es que el uso de “solo lectura” ayuda a los usuarios a ver las entradas que han proporcionado, mientras que “deshabilitado” proporciona a los usuarios elementos en los que no se puede hacer clic.

Use el atributo pointer-events: none para emular el atributo readonly para una etiqueta select en HTML

pointer-events es otro método que podemos usar en lugar de <select readonly>. Incluso readonly permite a los usuarios al menos ver cuando usan none junto con la propiedad pointer-events; deshabilita los eventos de clic de flecha del usuario.

En general, la propiedad pointer-events controla las reacciones del cursor mediante la gestión de actividades como responder a los eventos del mouse, pasar el mouse, hacer clic y más. Los eventos de puntero con el atributo ninguno evitan todos los clics y controlan el comportamiento del cursor en los elementos.

Sintaxis:

pointer-events: none;

Definamos cómo se comportan los pointer-events con el atributo none a través de un ejemplo utilizando dos enlaces en Social Media. En este ejemplo, creamos un archivo HTML y CSS.

Código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Using none in Pointer Events</title>
    </head>
    <body>
        <p> Social Media </p>
        <ul>
            <li><a href="https://www.facebook.com">Facebook</a></li>
            <li><a href="https://www.whatsapp.com">Whatsapp</a></li>
        </ul>
    </body>
</html>

Siguiendo el código HTML anterior, primero, hemos definido el tipo de documento como HTML y el juego de caracteres meta después de abrir <head>. Además, hemos vinculado el archivo style.css usando href y hemos definido un título como Using none in Pointer Events.

Una vez que cerró el <head>, abrió <body> y creó una lista desordenada llamada Social Media junto con dos elementos de la lista: Facebook y Whatsapp, con sus enlaces asociados.

estilo.css Código:

p{
    font-size: 40px;
    color: blue;
}

li{
    font-size: 20px;
    color: brown;
}

a[href="https://www.whatsapp.com"]{
    pointer-events: none;
}

Primero, definimos el párrafo Social Media para que apareciera en azul con un tamaño de 40px en el styles.css. Además, la lista de elementos está en marrón con un tamaño de fuente de 20 px.

Los eventos de puntero con el atributo ninguno se aplican a un enlace de redes sociales para ver la diferencia.

Como puede ver en la salida anterior, cuando movemos el cursor a Facebook, muestra un signo de mano. Pero cuando movemos el cursor a Whatsapp, solo queda como un signo de flecha.

Esperamos que haya captado la idea de la funcionalidad pointer-event: none a través de este ejemplo.

Conclusión

En general, a lo largo del contenido anterior, hemos discutido limitar el acceso del usuario a los elementos de entrada y seleccionarlos y señalarlos. Aunque hay muchos otros métodos, hemos discutido solo algunos.

Incluso usar <select readonly> es un método ya obsoleto en HTML5. En lugar de usarlo, podemos lograr un resultado similar utilizando las técnicas mencionadas anteriormente.

Autor: Migel Hewage Nimesha
Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Artículo relacionado - HTML Form