Readonly es uno de los atributos del elemento <input> en Pure CSS Forms . Se usa para hacer que el campo de entrada en un formulario sea de solo lectura, es decir, no podemos modificar el contenido existente dentro del campo de entrada, ya sea que esté vacío o no. El nombre en sí mismo explica el atributo, hace que el campo de entrada solo sea legible para el usuario. No permite que el usuario modifique el contenido presente dentro del campo de texto <input>, pero se puede realizar la interacción del usuario, como seleccionar, copiar el contenido.
Clase de entradas de solo lectura de formulario CSS puro: no hay clase para la que tengamos un atributo predefinido que pueda hacer que cualquier campo de entrada sea de solo lectura y ese atributo es readonly = «» con valor vacío.
Sintaxis:
<form class="pure-form">
<input type="..."
value="..." readonly="">
</form>
El siguiente ejemplo ilustra las entradas de solo lectura del formulario CSS puro
Ejemplo 1: En este ejemplo, veremos cómo encontrar que el campo de entrada es de solo lectura. El contenido dentro del campo de entrada que se convertirá en solo lectura aparecerá atenuado. El siguiente ejemplo muestra que la palabra geeksforgeeks no se puede modificar y está atenuada, pero podemos hacer interacciones como seleccionar el texto.
HTML
<!DOCTYPE html> <html> <head> <title>read-only</title> <!-- Import Pure CSS files --> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> </head> <body> <h1>Geeksforgeeks</h1> <strong>Pure CSS Forms Read-Only Inputs</strong> <br><br> <form class="pure-form"> <!-- read-only Input --> <label>GeeksforGeeks: <input type="text" value="A Computer Science Portal" readonly /> <label> </form> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, veremos Dónde podemos usarlo. Se puede usar con la condición de que el texto dentro del campo de texto no se cambie, es decir, debe tener un valor predeterminado. El siguiente ejemplo muestra que el lugar desde (Mumbai) y hasta (Agra) no se puede editar para un Tren en particular (Tren A) porque el Trian A solo lleva a los pasajeros que se originan en Mumbai y tienen como destino Agra. La etiqueta de entrada con valor Mumbai y Agra se agregan con atributos de solo lectura en el último campo de entrada para que sea de solo lectura. Puedes encontrar que están en gris.
HTML
<!DOCTYPE html> <html> <head> <!-- Import Pure CSS files --> <title>read-only</title> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> </head> <body> <h1>Geeksforgeeks</h1> <strong>Pure CSS Forms Read-Only Inputs</strong> <form class="pure-form pure-form-aligned"> <fieldset> <div class="pure-control-group pure-controls"> <strong>Train A</strong><br> <label for="name"> Passenger full-name </label> <input type="text" class="pure-input" id="name" /> <br> <label for="from">From</label> <!-- To make the input field read-only --> <input type="text" class="pure-input" id="from" value="Mumbai" readonly /> <br> <label for="to">To</label> <input type="text" class="pure-input" id="to" value="Agra" readonly /> <br> <input type="button" class="pure-button pure-button-primary" value="Submit"> </div> </fieldset> </form> </body> </html>
Producción:
Entradas de solo lectura de formulario CSS puro
Nota: El atributo deshabilitado también es como solo lectura, pero la única diferencia es que no podemos interactuar con el contenido del campo.
Referencia: https://purecss.io/forms/#read-only-inputs
Publicación traducida automáticamente
Artículo escrito por ashwin13602 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA