En la última entrada aprendimos cómo usamos HTML para dar forma a los formularios. En esta entrada aprenderemos quatro etiquetas nuevas que amplían nuestras opciones para los formularios y algunos consejos útiles a tener en cuenta.
Elementos visibles: <select></select>
Usaremos el elemento "select" cuando queramos crear en la página una lista de opciones desplegable. El método con el que se usan estas etiquetas recuerda un poco al de las listas.
Los atributos a usar en este elemento son name="nombre" (exactamente para el mismo uso que hemos visto hasta ahora) y multiple="multiple" (sí, el valor debe ser el mismo nombre del atributo) para crear una lista desplegable de selección múltiple. Ésta última sirve para poder seleccionar varias opciones a la vez mientras mantenemos la tecla "Ctrl." en PC o "Command" en Mac.
En el contenido del elemento "select" debemos escribir las diferentes opciones de la lista usando el elemento "option". Cada parte de la lista que queramos que se pueda seleccionar debe ir entre las etiquetas <option> y <option/>. Para este elemento usaremos el atributo value="valor" para indicar el valor que debe enviar el formulario al servidor si la opción está seleccionada.
Veamos un ejemplo.
<form>
Continente: <select name="Continente">
<option>África</option>
<option>América</option>
<option>Antártida</option>
<option>Asia</option>
<option>Europa</option>
<option>Oceanía</option>
</select>
</form>
Este texto de HTML crearía lo siguiente:
Si queremos hacer que sea una lista desplegable de selección múltiple deberíamos añador el atributo multiple="multiple":
<form>
Continente: <select name="Continente" multiple="multiple">
<option>África</option>
<option>América</option>
<option>Antártida</option>
<option>Asia</option>
<option>Europa</option>
<option>Oceanía</option>
</select>
</form>
Y el resultado sería:
Pero ahora tenemos una lista que si enviáramos el formulario al servidor no mandaría ninguna información. ¿Sabes por qué? Nos falta añadir un atributo en cada uno de los elementos "option": el atributo value="valor".
<form>
Continente: <select name="Continente" multiple="multiple">
<option value="africa">África</option>
<option value="america">América</option>
<option value="antartida">Antártida</option>
<option value="asia">Asia</option>
<option value="europa">Europa</option>
<option value="oceania">Oceanía</option>
</select>
</form>
El resultado a simple vista sería el mismo, pero si pusiéramos un botón para lanzar la información al servidor notariamos la diferencia.
Pero antes de saltar al siguiente apartado quiero explicar un último elemento: el elemento "optgroup". Éste nos sirve para crear diferentes grupos de opciones en una misma lista para ordenarla mejor y facilitar así su clasificación.
Cada grupo de opciones debe escribirse entre las etiquetas <optgroup> y </optgroup>, y se usa el atributo label="nombre" para nombrar el grupo de opciones (título que no se podrá seleccionar).
Por ejemplo, si hacemos una lista instrumentos de música podemos clasificarla así:
<form>
Instrumentos de música: <select name="instrumento">
<optgroup label="De cuerda">
<option value="guitarra">Guitarra</option>
<option value="violin">Violín</option>
</optgroup>
<optgroup label="De viento">
<option value="oboe">Oboé</option>
<option value="flauta">Flauta</option>
</optgroup>
</select>
</form>
Y el resultado sería el siguiente:
Elementos visibles: <textarea></textarea>
Éste tipo de cuadro de texto es parecido al <input type="text"/>. La diferencia es que el rectangulo es mucho mayor y en él se puede utilizar la tecla "Enter" (o "Intro") para que el usuario haga saltos de línea en su texto.
Es importante (como en todos los elementos para hacer formularios) usar el atributo name="nombre", y si queremos modificar las proporciones del cuadro de texto tenemos el atributo cols="número" para la anchura (por defecto son 20) y rows="número" para la altura (por defecto son 2). Recuerda que es mejor dejar los asuntos de estética para otros lenguajes.
Elementos útiles: <fieldset></fieldset>
Aunque este elemento sí es visible, a diferencia de los demás no sirve para que el usuario interactue con él sinó para conseguir un reslutado más claro y ordenado del formulario.
Todo el texto del formulario que esté en el contenido de este elemento quedará enmarcado, y si además añadimos un nombre entre las etiquetas <legend> y </legend> éste saldrá escrito en el marco.
En el ejemplo siguiente vemos el texto en HTML:
<form>
<fieldset><legend>Descripción:</legend>
<textarea></textarea>
</fieldset>
</form>
Y su resultado sería:
Elementos útiles: <label></label>
Estas etiquetas no dan un resultado visible para el usuario y sin embargo son especialmente útiles. Con ellas podemos hacer los formularios más usables y accesibles, y acomodar el uso de los formularios para los usuarios.
Este elemento crea una especie de vínculo con un texto normal y un controlador del formulario. Es decir, podemos anclar cada casilla de verificación con su título (por ejemplo, en realidad se puede utilizar con cualquier elemento para hacer formularios). Ésto nos sirve para que sea más cómodo el uso de las opciones del formulario, sobretodo para personas que necesitan el uso de ordenadores especiales con ayuda a la navegación o para móbiles (es más fácil seleccionar un texto que un recuadro diminuto).
Para ello hay dos recursos. La manera implícita es escribir el texto y el control del formulario entre las etiquetas <label> y </label>:
<form>
<label>Casa<input type="checkbox"/> </label>
<label>Coche<input type="checkbox"/></label>
</form>
Y el resultado...
Como veis podeis seleccionar la casilla con tan solo hacer clic sobre el texto que le precede.
La otra manera de conseguir el mismísimo, la manera explícita, efecto es con los dos atributos for="identificador" y id="identificador". En este caso debemos poner el texto dentro del contenido del elemento "label", pero esta vez lo escribiremos con el atributo for="identificador" dándole un nombre que lo identifique, y el control con el que lo queramos vincular lo podemos escribir tanto dentro como fuera pero con el atributo id="identificador" con el mismo nombre para crear el enlace entre las dos partes. Es decir, que entre un texto y un control del formulario vinculados deben compartir el mismo nombre de identificador:
<form>
<label for="casa">Casa</label><input type="checkbox" id="casa"/>
<label for="coche">Coche</label><input type="checkbox" id="coche"/>
</form>
Y el resultado a simple vista será el mismo:
La magia de esta segunda manera (más aparatosa, todo sea dicho) es que los textos vinculados a los elementos controladores de un formulario pueden quedar distanciados en una misma página web (poco práctico, todo sea dicho). Además, se supone que los navegadores están preparados para aceptar las dos maneras, pero algunos desarrolladores recomiendan la segunda, la explícita, al descubrir algunas tecnologías asistivas no manejan la manera implícita (aunque siempre podemos usar las dos a la vez, igual de válido y aseguras el tiro).
Algunos consejos útiles
- Podemos utilizar las etiquetas fuera del contenido del elemento "form" para crear formularios, que serán visibles, pero no enviarán información jamás. Asegurate de que todo el formulario esté en el contenido entre <form> y </form>.
- Especifica siempre el atributo type="tipo", aunque vayas a utilizarlo de forma predeterminada. Así te asegurarás que no hayan sorpresas y será más fácil leerlo como desarrollador.
- No olvides poner un botón del tipo "submit" al final del formulario para poder enviar la información (sino para qué tanto formulario).
- En medida de lo posible separa todo lo relacionado con el contenido y estructura de la estética y estilos. Ahórrate todos los atributos posibles relacionados con la imagen, es la mejor manera de mantener la web con el tiempo.
- Utiliza <textarea> en lugar de <input type="text"/> cuando el usuario vaya a escribir textos de tamaño considerable.
- Utiliza <select> en lugar de <input type="radio"/> cuando las opciones sean mayor de tres.
- Utiliza siempre en todos los elementos del formulario las etiquetas <label></label>. Con ello conseguirás una web mucho más accesible y cómoda.
No hay comentarios:
Publicar un comentario
RECUERDA: ésto no es ningún tutorial, pero estaré encantado de compartir información y ayudar en medida de lo posible a cualquiera :)