El Atributo READONLY

El atributo readonly en HTML se utiliza para hacer que un campo de formulario sea solo de lectura, es decir, el usuario no puede modificar su valor, pero el dato se envía al servidor cuando se procesa el formulario. A diferencia del atributo disabled, un campo readonly puede recibir foco y su valor se incluye en la solicitud HTTP. A continuación, aprenderás cómo implementarlo correctamente.

1. Introducción al atributo readonly

• Propósito:

  • Bloquear la edición de un campo, pero permitir que su valor sea enviado con el formulario.

  • Útil para mostrar datos predefinidos o calculados que el usuario no debe modificar (ej.: ID de usuario, fechas automáticas, resultados de cálculos).

• Elementos compatibles:

  • <input> (tipos: text, email, number, password, tel, url, date, etc.).

  • <textarea>.

• No compatible con:

  • Elementos como <input type="checkbox">, <input type="radio">, <button>, etc.

2. Sintaxis básica

El atributo readonly es booleano, por lo que no requiere un valor. Se aplica directamente al elemento:

<input type="text" id="usuario" name="usuario" value="admin" readonly>
<textarea id="comentario" name="comentario" readonly>Texto no editable</textarea>

3. Ejemplos prácticos

Ejemplo 1: Campo de texto no editable

<form>
  <label for="id_usuario">ID de usuario:</label>
  <input 
    type="text" 
    id="id_usuario" 
    name="id_usuario" 
    value="USR-12345" 
    readonly
  >
</form>

Ejemplo 2: Fecha generada automáticamente

<label for="fecha_registro">Fecha de registro:</label>
<input 
  type="date" 
  id="fecha_registro" 
  name="fecha_registro" 
  value="2024-01-01" 
  readonly
>

Ejemplo 3: Textarea con términos y condiciones

<label for="terminos">Términos y condiciones:</label>
<textarea id="terminos" name="terminos" readonly>
  1. No compartir contraseñas.
  2. Respetar las normas de la comunidad.
</textarea>

4. Diferencias entre readonly y disabled

5. Combinación con otros atributos

• value: Define el valor inicial del campo.

• required: Útil si el campo es obligatorio pero no editable (el valor ya está predefinido).

<input type="email" value="soporte@empresa.com" readonly required>

6. Estilización con CSS

Personaliza la apariencia de los campos readonly para indicar visualmente que no son editables:

input:read-only,
textarea:read-only {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: not-allowed;
}

/* Opcional: Deshabilitar el resaltado al hacer clic */
input:read-only:focus {
  outline: none;
}

7. Accesibilidad

• Etiquetas claras: Siempre usa <label> asociado al campo para que los lectores de pantalla anuncien el propósito del campo.

• Mensajes de contexto: Si el campo es readonly, explica al usuario por qué no puede editarlo (ej.: "Este valor se genera automáticamente").

8. Uso con JavaScript

Puedes alternar el estado readonly dinámicamente. Por ejemplo, habilitar la edición tras una acción del usuario:

<input type="text" id="campo" value="Edítame" readonly>
<button onclick="document.getElementById('campo').removeAttribute('readonly')">
  Habilitar edición
</button>

9. Errores comunes

1. Usar readonly en elementos no compatibles: No funciona en <input type="checkbox"> o <select>.

2. Confiar en readonly para seguridad: Los usuarios pueden modificar el valor manualmente (usando herramientas de desarrollo), así que siempre valida los datos en el servidor.

3. Olvidar el atributo value: Si no se define, el campo aparecerá vacío y no se enviará ningún dato.

10. Conclusión

El atributo readonly es ideal para:

• Mostrar datos generados por el sistema.

• Evitar modificaciones accidentales en campos críticos.

• Mantener valores predefinidos que deben enviarse al servidor.

Recuerda:

• Combinarlo con estilos CSS para una mejor experiencia visual.

• Validar siempre los datos en el backend.

• Usar disabled si el valor no debe enviarse al servidor.

¡Experimenta con ejemplos prácticos y ajusta según las necesidades de tu proyecto! ????