Para crear un campo de texto en un formulario se ingresa dentro de un formulario un código como éste:

<input type="text" name="nombre">

Funcionan igual que los campos de texto, solo que en este caso se permite ingresar varias líneas de texto. Se puede configurar el ancho y alto del texto por número de caracteres (ancho) y número de líneas (alto). También se puede configurar un valor inicial. Veamos un ejemplo:

<textarea name="descripcion" rows="20" cols="80">
[Mi descripción]
</textarea>

La diferencia entre un campo de texto y un campo de contraseñas, es que el texto se muestra oculto con caracteres especiales como el asterisco (*) o puntos de relleno. La forma de declararlo es ésta:

<input type="password" name="contrasena">

Las cajas de verificación o check boxes en inglés son controles de entrada simples, que solo se activan o desactivan para indicar si o no a un criterio o pregunta. Estas cajas de verificación se escriben de la siguiente manera:

<input type="checkbox" name="enviar_mensajes">

Los botones de selección son listas de opciones de las cuales se debe seleccionar solo una de ellas, y cada opción aparece con una descripción y al lado un botón de selección generalmente de forma circular. Se observa claramente un ejemplo de estos botones en la Figura 7.1, “Formulario simple con campos de texto, botones de selección y botones de confirmación y limpieza”. Para crear botones de selección se ingresa un código como éste. El valor se asigna a cada opción de forma única (no se pueden repetir los valores) utilizando el atributo value.

<input type="radio" name="genero" value="m"> Hombre <br>
<input type="radio" name="genero" value="f"> Mujer <br>

Usualmente los formularios tienen un botón al final para enviar la información ingresada. A este botón se le conoce como botón de confirmación. Una vez se activa este botón, se envía la información a la dirección indicada en el atributo action del elemento FORM que contiene el botón. Los botones de confirmación se escriben de esta forma:

<input type="submit" value="Enviar">

El texto que va dentro del botón se especifica con el atributo value.

Funcionan igual que los botones de confirmación simples, solo que en la declaración se especifica una ruta para la imagen que se muestra, además de un texto alternativo para el caso en que no se pueda mostrar la imagen. Un ejemplo:

<input type="image" src="boton_enviar.png" alt="Enviar">

Los botones de limpieza de formulario se encargan de borrar los datos ingresados al formulario y dejarlo con los valores iniciales especificados para cada campo. Se declaran en el código HTML de la siguiente manera:

<input type="reset" value="Borrar todo">

Uno de los controles en HTML es un control para la selección de un archivo para ser referido en un formulario. Este control tiene la apariencia tradicional de un botón "Examinar" (o similares) con un campo de texto donde se diligencia la ubicación de un archivo, ya sea manualmente o por medio del diálogo que aparece con el botón. El campo se crea de esta manera:

<input type="file" id="foto">

El elemento SELECT permite crear menús, también conocidos como listas seleccionables. Cada menú consta de ítems que se ingresan por medio de los elementos OPTION. También se puede hacer que por defecto aparezca una o varias de estas opciones como seleccionadas al momento de cargar el formulario o de limpiarlo. Al final se pueden escoger una o varias opciones, dependiendo de si se crea o no el elemento SELECT utilizando el atributo multiple. Veamos un ejemplo:

<select multiple size="6" name="finalistas">
  <option selected value="0"> -Seleccione sus finalistas- </option>
  <option value="juan">Juan G&oacute;mez</option>
  <option value="pedro">Pedro P&eacute;rez</option>
  <option value="marta">Marta S&aacute;nchez</option>
  <option value="maria">Mar&iacute;a Gonz&aacute;lez</option>
  <option value="pablo">Pablo Ram&iacute;rez</option>
  <option value="ana">Ana Ruiz</option>
</select>

En el ejemplo, se muestra una lista de selección múltiple, que se muestra muy diferente a una lista de selección simple (una sola línea). Para hacerla simple, se elimina de la declaración el atributo multiple. El atributo size indica la cantidad de ítems que se muestran inicialmente en la pantalla.

También se pueden agrupar los ítems dentro de la lista para facilitar la selección. Para agruparlos, se utiliza el elemento OPTGROUP así:

<select multiple size="6" name="finalistas">
  <option selected value="0"> -Seleccione sus finalistas- </option>
  <optgroup label="Hombres">
    <option value="juan">Juan G&oacute;mez</option>
    <option value="pedro">Pedro P&eacute;rez</option>
    <option value="pablo">Pablo Ram&iacute;rez</option>
  </optgroup>
  <optgroup label="Mujeres">
    <option value="marta">Marta S&aacute;nchez</option>
    <option value="maria">Mar&iacute;a Gonz&aacute;lez</option>
    <option value="ana">Ana Ruiz</option>
  </optgroup>
</select>

Se pueden incluir algunos datos en el formulario sin necesidad de mostrarlos en el formulario. Estos datos son útiles por ejemplo para pasar identificadores del usuario que llena el formulario y otros datos similares que no se muestran, pero que deben ser enviados con el formulario para facilitar el procesamiento o para evitar perder información si el formulario pertenece a uno de varios pasos que incluyen otros formularios.

Por ser datos ocultos, la información ya debe estar disponible de antemano o al momento de cargar el formulario. Por esta razón, es necesario incluir el valor del campo, como se muestra en el siguiente ejemplo:

<input type="hidden" name="codigo_usuario" value="80860">