Welding temperature and force comparison 127

La validación de datos provistos por el informante es una tarea más semántica, como por ejemplo, verificar que los números se encuentren dentro de un rango apropiado, los textos no sean muy cortos o largos, o estén en algún lenguaje natural. En el Listado 7.23 simplemente se ha discriminado cadenas vacías o constituidas únicamente de espacios en blanco (línea 5).

7.4.4 Controles en el formulario

cuando se escribe un formulario, el autor incluye algún texto cercano a cada campo que ayude al informante a saber qué tipo de información debe proveer en él, al cual se le llama rótulo o etiqueta (label). Si tanto el texto como el campo se escriben dentro de un elemento label, el navegador los asociará semánticamente, de tal forma que cuando el usuario hace click en el rótulo, el navegador transferirá el efecto al campo asociado. Este es el comportamiento natural que el usuario espera, en especial para checkboxes y radio buttons. Los ejemplos de la Tabla 7.5 incluyen rótulos para ilustrar esta práctica.

Nombre Ejemplo

Checkbox Recordarme

<label><input type="checkbox" name="recordarme" value="si" checked="checked"/>Recordarme</label>

Radio buttons

Sexo: Hombre Mujer

<p>Sexo:

<label><input type="radio" name="sexo" value="1" checked="checked"/>Hombre</label> <label><input type="radio" name="sexo" value="2"/>Mujer</label>

</p>

Combo box

Nivel académico aprobado:

<label>Nivel académico aprobado:

<select name="nivel_academico"> <option value="0">Ninguno</option> <option value="1">Kindergarten</option> <option value="2">Primaria</option>

<option value="3">Secundaria académica</option> <option value="4">Secundaria técnica</option> <option value="5">Universitaria</option> </select>

</label>

Multiple list

Marque los lenguajes que conoce:

PHP

<label>Marque los lenguajes que conoce:<br/>

<select name="aficiones" size="6" multiple="multiple"> <option value="1">Ensamblador</option>

<option value="2">C</option> <option value="3">C++</option>

<option value="4">Objective-C</option> <option value="5">Java</option> <option value="6">C#</option> <option value="7">PHP</option> <option value="8">JavaScript</option> <option value="9">Ruby</option> <option value="10">SQL</option> <option value="11">Lisp</option> <option value="12">Prolog</option> </select>

</label>

Button

<input type="button" value="Validar"/>

Submit button

<input type="submit" value="Buscar"/>

Reset button

<input type="reset" value="Limpiar"/>

Text field

Buscar:

<label>Buscar:

<input type="text" name="buscar" maxlength="255" size="50" value="Escriba su consulta aquí"/> </label>

Nombre Ejemplo

Password Contraseña:

<label>Contraseña: <input type="password" name="contrasena" maxlength="12" size="12"/></label>

Text area

Describa el problema:

<label>

Describa el problema: <br/>

<textarea name="problema" cols="60" rows="6">Escriba los pasos para reproducir el problema</textarea> </label>

File select

Ningún archivo seleccionado.

<input type="file" name="avatar"/>

Hidden

field <input type="hidden" name="userid" value="chema"/>

Tabla 7.5. Tipos de controles disponibles en un formulario web

A excepción de las listas (select) y las áreas de texto (textarea), la mayoría de controles en (X)HTML se escriben con el elemento input. Su único atributo obligatorio es type, que indica el tipo de control que se quiere: checkbox, radiobutton, . Todos los controles comparten el atributo name, cuyo valor es un identificador que no necesariamente debe ser único en el documento. Cuando un formulario es aceptado (al presionar el botón "submit"), el navegador ensambla las parejas campo=valor en el query string a partir de los nombres de los controles y sus respectivos valores. Si un control no tiene nombre, el navegador simplemente lo ignora. Los demás atributos son dependientes del tipo de control, como se explica en los siguientes párrafos.

Las casillas de verificación (checkboxes) permiten al usuario indicar un valor booleano al marcar o no un rectángulo. Se escriben con la notación <input type="checkbox" name="checkbox_name" value="yes" checked="checked"/>. Su estado inicial es desmarcado, a menos de que se provea el atributo checked="checked". Cuando se acepta el formulario, si la casilla de verificación está desmarcada, el navegador simplemente no la incluye en el query string. Si la casilla de verificación está marcada, se incluye una pareja checkbox_name=on en el query string. El valor "on" lo asume el navegador, pero se puede reemplazar por un valor más significativo indicándolo en el atributo value="valor".

Los botones de radio (radio buttons) permiten al informante escoger una única opción entre varias disponibles. El autor debe proveer un elemento <input type="radio" name="nombre_grupo" value="valor" checked="checked"/> por cada opción. Si varios botones de radio comparten el mismo nombre, conforman un grupo de botones de radio y sólo uno de ellos puede estar marcado a la vez. Inicialmente todos los botones de radio están desmarcados a menos de que uno tenga el atributo checked="checked". Cuando se acepta el formulario (se presiona el botón Submit), si ningún botón de radio en el grupo está seleccionado, el navegador omite el grupo por completo en el query string; si el botón seleccionado no tiene un valor en el atributo value, el navegador envía el valor "on" para el grupo, lo cual carece de utilidad para el desarrollador; por eso es importante proveer un valor adecuado en el atributo value de cada botón de radio, y en tal caso, al aceptar el formulario el navegador agrega una pareja nombre_grupo=valor, donde valor es el valor del atributo value del botón seleccionado por el usuario.

Los botones (button) se especifican con <input type="button" value="label del botón"/>. No tienen una acción asociada a menos de que se les establezca una con JavaScript. Su rótulo se puede cambiar con el atributo value. El botón de enviar (submit button) se escribe <input type="submit" value="label del botón"/> ejecuta la acción especificada en el atributo action del formulario (elemento form). Existe una variación del botón enviar que permite reemplazarlo por una imagen, por ejemplo: <input type="image" src="enviar.svg" alt="Enviar datos"/>. El botón de limpiar (reset button) se escribe <input type="reset" value="label del botón"/> y cuando se presiona indica al navegador que regrese todos los controles del formulario a sus valores originales.

Los campos de texto (text field) son quizá el tipo de control más usado en el web. Permiten introducir una línea de texto, cuya longitud está limitada por el valor del atributo maxlength. El atributo size indica la cantidad de caracteres que tendrá el ancho visible del control, sin embargo, es mejor ajustar el ancho mediante hojas de estilo (CSS). Si se escribe un texto en el atributo value, se tomará como el valor inicial del campo. En caso de que se quiera delimitar el campo para que permita únicamente números o valores en cierto formato, se debe emplear JavaScript.

Una variación del campo de texto son los campos de contraseña (password field) que despliegan asteriscos u otro carácter especial para encubrir los reales, con el fin de introducir información sensible que podría ser vista por una persona ajena al informante. Tiene otras características como deshabilitar funciones del portapapeles y disparar el sistema de recuerdo de contraseñas del navegador.

formulario. Se escribe con el elemento <input type="file" name="nombre_selector"/>. Una vez enviado al servidor, el nombre del archivo y su contenido se pueden obtener en PHP a través del arreglo superglobal $_FILES.

El elemento <select name="nombre_lista" size="elementos_visibles" multiple="multiple" value="default_value">... </select> sirve para construir listas desplegables, listas simples y listas múltiples. Una lista desplegable (combo box) presenta sólo el elemento seleccionado y en caso de que se active el control, una lista emergente muestre todas las opciones. Las listas desplegables se forman con el atributo size = 1, y aunque permiten selección múltiple, no es un comportamiento natural. Si el valor del atributo size es 2 o más, el navegador presentará un control de lista simple; y si el atributo multiple="multiple" está presente, el navegador presentará una lista múltiple donde el usuario podrá seleccionar varios elementos con el ratón mientras mantiene la tecla Ctrl o Command presionada.

Los elementos de la lista se escriben con elementos <option value="valor">Texto</option>. Por defecto el primero ellos estará seleccionado en caso de que la lista sea desplegable (combo box). Si se quiere preseleccionar otro valor, debe especificarse con el atributo value del elemento select. Se pueden crear grupos de opciones con el elemento optgroup, como se ilustra en el Listado 7.24.

Cantón de nacimiento:

Alajuelita

<label>Cantón de nacimiento:<br/> <select name="canton" size="10">

<optgroup label="San José">

<option value="101">San José</option> <option value="102">Escazú</option>

...

<option value="120">León Cortés</option> </optgroup>

<optgroup label="Alajuela">

<option value="201">Alajuela</option> <option value="202">San Ramón</option>

...

<option value="215">Guatuso</option> </optgroup>

...

</select> </label>