Formularios básicos en HTML

Botones

Un botón es un tipo especial de control que ha sido diseñado para interactuar con el usuario de una manera singular: una acción es ejecutada cada vez que el usuario lo presiona. Existe una amplia gama de botones, cada uno con sus peculiaridades en relación a sus capacidades y su conducta, pero aquí sólo analizaremos los dos más ampliamente utilizados en formularios básicos.

Botones de envío

Un botón de envío tiene la acción predefinida de enviar el formulario al que pertenece cuando es activado. A menos que otro mecanismo de envío sea provisto, la presencia de este botón es necesaria si existe la intención de permitir a los usuarios enviar el formulario. Ya hemos visto este control en los ejemplos anteriores, así que su conducta nos debería resultar natural.

Los botones de envío son insertados con el elemento input, teniendo el valor "submit" en su atributo type. El atributo value es importante en este control, ya que su valor es mostrado a modo de etiqueta dentro del botón. El siguiente ejemplo muestra un formulario con un control de texto y un botón de envío.

<form action="../../form-result.php" target="_blank">
  <p>
    Edita tu descripción:
    <input type="text" name="desc">
    <input type="submit" value="Guardar cambios">
  </p>
</form>

Edita tu descripción:

Botones de reinicio

Como los botones de envío, los de reinicio también tienen una acción predefinida. Pero en este caso, la acción predefinida consiste en el reinicio de la información de los campos del formulario a sus valores iniciales. En otras palabras, el estado de los campos en un formulario que ha sido reiniciado es el mismo que tenía cuando la página ha sido cargada. Esta acción elimina todos los cambios que haya realizado el usuario a los valores de los controles.

Sería bueno notar aquí que todos los controles pueden tener un valor predefinido, esto es, un valor que está presente en el formulario cuando la página es cargada. La forma que los autores tienen para especificar este valor inicial depende del control. Para saber cómo especificar un valor por defecto en un tipo particular de control, revisa la referencia para ese control en esta lista.

En el siguiente ejemplo podrás probar la funcionalidad del botón de reinicio. Este formulario ha sido declarado con un campo de texto de una sola línea, un par de botones de opción y una casilla de verificación. Todos estos controles tienen un valor por defecto especificado con los atributos value y checked, dependiendo del caso.

<form action="../../form-result.php" target="_blank">
  <p>Enviar mensaje: <input type="text" name="mensaje" value="Estoy listo!"></p>
  <p>
    <input type="radio" name="cuando" value="hoy" checked> Hoy<br>
    <input type="radio" name="cuando" value="manana"> Mañana
  </p>
  <p><input type="checkbox" name="copia" checked> Enviarme una copia</p>
  <p>
    <input type="reset" value="Reiniciar el formulario">
    <input type="submit" value="Enviar mensaje">
  </p>
</form>

Enviar mensaje:

Hoy
Mañana

Enviarme una copia

Etiquetado de controles

Casi cualquier control en un formulario puede ser etiquetado. El etiquetado de controles en una operación provechosa que mejora la accesibilidad en muchos frentes. Esta asociación entre un trozo de texto y un control resolverá el problema señalado en ejemplos anteriores de este tutorial, particularmente con botones de opción y casillas de verificación.

Una etiqueta puede asignarse con el elemento label. El más fácil de los dos métodos que existen para asignar una etiqueta a un control, consiste en declarar a ambos, el texto y el control, como contenido del elemento label. El siguiente ejemplo tiene un par de controles asociados a etiquetas mediante este método. Allí puedes ver cómo un control recive el enfoque cuando su etiqueta es activada.

<form action="../../form-result.php" target="_blank">
  <p><label>Nombre: <input type="text" name="nombre"></label></p>
  <p>
    Género:
    <label><input type="radio" name="genero" value="masculino"> Masculino</label>
    <label><input type="radio" name="genero" value="femenino"> Femenino</label>
  </p>
  <p><label><input type="checkbox" name="novedades"> Me gustaría recibir novedades</label></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Género:

Agrupación de controles

A veces, cuando un formulario es grande, la segmenctación podría jugar un rol en el mejoramiento de la organización y la facilidad de uso. Este es el motivo por el que HTML provee el elemento fieldset, el cual actúa como un contenedor de controles. Con este elemento, los autores pueden hacer divisiones al formulario y organizar los controles temáticamente.

Un grupo fieldset puede además tener un título para identificar la composición o el propósito del conjunto de controles que contiene. Este título puede ser provisto por el elemento legend, el cual debe ser declarado como primer hijo del grupo (fieldset). El siguiente ejemplo muestra un formulario pequeño dividido en dos grupos temáticos.

<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Información personal</legend>
    <p><label>Nombre: <input type="text" name="nombre"></label></p>
    <p><label>Dirección: <input type="text" name="direccion"></label></p>
  </fieldset>
  <fieldset>
    <legend>Preferencias</legend>
    <p>
      <label><input type="checkbox" name="arte"> Arte</label><br>
      <label><input type="checkbox" name="television"> Televisión</label><br>
      <label><input type="checkbox" name="videojuegos"> Videojuegos</label><br>
      <label><input type="checkbox" name="deportes"> Deportes</label><br>
    </p>
  </fieldset>
  <input type="submit" value="Enviar">
</form>
Información personal

Preferencias





Como puedes ver, este modelo organizacional se aplica únicamente del lado cliente. La información recibida por el agente procesador no presenta información acerca de la agrupación de los controles.

Prev1234Próx