En esta entrada continuaremos con la programación de formularios en HTML.
Select
Con <select> podemos definir en formularios listas desplegables y listas de selección múltiple. Entre sus atributos tenemos:
- name: Al igual que todos los controles que forman un formulario, <select> tiene este atributo. Es el nombre de la lista que se está definiendo.
- multiple: Con el atributo "multiple" estamos indicando que se pueden seleccionar varios elementos de la lista.
Option
Con <option> vamos a definir los elementos que componen nuestras listas. Esta es una etiqueta que tiene etiqueta de cierre. Su forma básica es la siguiente:
<option value="valor">
texto
</option>
- value: En este atributo se especifica el valor que será enviado cuando el usuario haya seleccionado este elemento. Cuando se despliegue la lista se mostrará el "texto" especificado entre las etiquetas de apertura y cierre.
Optgroup
Con <optgroup> podemos crear agrupadores de opciones. De esta forma le damos una mejor presentación a nuestra lista. Los elementos agrupadores se muestran en la lista; pero no son seleccionables.
<optgroup label="texto"
<option value="valor">texto</option>
<option value="valor">texto</option>
<option value="valor">texto</option>
</optgroup>
- label: El "texto" indicado en este atributo es el que será mostrado en la lista desplegable, al principio de todos los elementos que agrupa.
Textarea.
Para poder agregar texto con más de una linea disponemos de la etiqueta <textarea>.
- name: Es el nombre del campo tipo <textarea>.
- cols: Permite indicar el ancho del control <textarea>. Por defecto es de 20 caracteres.
- rows: Con "rows" especificamos el alto de nuestro control. Por defecto es de "2" filas.
Ejemplo:
<textarea name="observaciones" cols="40" rows="5"</textarea>
Label
La etiqueta <label> permite asociar un texto a un control, de tal manera que cuando el usuario haga click sobre este texto, el foco lo reciba su control asociado.
- for: Mediante este atributo se asocian el control especificado y el texto entre las etiquetas de apertura y cierre.
<label for="nombres">Nombres: </label>
<input type="text" name="nombres" id="nombres" />
<br />
Estamos viendo que existe el atributo "id" que puede ser utilizado con las diferentes etiquetas que nos permiten definir controles del formulario. Este atributo define un identificador para el control, mediante el cual se puede utilizar para identificar el control. En este caso permite asociar la etiqueta <label> con la etiqueta <input>.
Fieldset
Permite agrupar distintos controles que tienen alguna relación entre sí. Por ejmplo podemos agrupar con un <fieldset> los datos personales y con otro <fieldset> los datos correspondientes a la educación de la persona. Dibuja un marco entre los componentes que estan entre las etiquetas <fieldset>....</fieldset>.
<fieldset>
<input type="text" name="nombres" />
<input type="text" name="apellidos" />
</fieldset>
Legend
Con <legend> podemos asignar un título a los elementos agrupados con <fieldset>. Estas etiquetas deben ir dentro de las etiquetas <fieldset></fieldset>
<fieldset><legend>Datos Personales</legend>
<input type="text" name="nombres" />
<input type="text" name="apellidos" />
</fieldset>
Consejos
- Usar <textarea> en lugar de <input type="text" /> cuando lo esperado es un texto de varias líneas.
- Cuando hayan más de dos opciones usar <select> en lugar de <input type="radio" ... />.
- Usar <label> para mejorar la usabilidad de los controles <input>.
Para mayor información puede consultar el siguiente vídeo:
No hay comentarios.:
Publicar un comentario