La propiedad disabled en Html5

Veamos ahora otra de las propiedades que Html5 nos propone, esta vez para desactivar campos al menos temporalmente. Esta propiedad ya existía en las versiones anteriores, pero ahora Html5 permite englobar varios campos encerrándolos entre etiquetas fieldset.

Y para qué queremos desactivar campos? Cuando le aplicamos la propiedad disabled a un campo o a un conjunto de campos, éstos aparecerán pero con un tono clarito, como indicando que no están activados al menos por el momento. Se puede usar cuando no deseas que se pueda completar un campo mientras no se rellene alguno anterior, por ejemplo, o para desactivar el propio botón de envío de datos hasta que no se hayan completado los campos obligatorios. Ahora si lo ves algo más útil?

Vemos un ejemplo? En el formulario de abajo se ha desactivado el segundo campo. Como ves, no puedes escribir dentro de él y se muestra en un tono gris clarito indicando que está desactivado.

Dato1:
Dato2:
Dato3:
<form>
   Dato1: <input type="text" name="name1">
   Dato2: <input type="text" name="name2" disabled>
   Dato3: <input type="text" name="name3">
   <input type="submit" value="enviar">
</form>

Y otro más en el que encerramos varios campos dentro de un fieldset, concretamente los campos Datos3, 4 y 5. También he desactivado el propio botón de envío de datos como puedes ver:

Dato1:
Dato2:
Dato3:
Dato4:
Dato5:
Dato6:

<form>
   Dato1: <input type="text" name="name1">
   Dato2: <input type="text" name="name2">
   <fieldset disabled>
      Dato3: <input type="text" name="name3">
      Dato4: <input type="text" name="name1">
      Dato5: <input type="text" name="name2">
   </fieldset>
   Dato6: <input type="text" name="name3">
   <input type="submit" value="enviar" disabled>
</form>

El cómo conseguir volver a activarlos se escapa por el momento del alcance de este apartado. Solo quería presentaros estas etiquetas. Más adelante os explicaré eso y otras muchas cosas.

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net