OTROS ELEMENTOS DE FORMULARIO
Cuadro de texto de varias líneas
Para insertar una caja de texto que pueda contener comentarios o datos largos utilizaremos las etiquetas <textarea>...<textarea>. Para indicar el número de filas utilizaremos el atributo rows, con cols estableceremos el número de caracteres por línea.
Si el campo tiene varias líneas podemos definir el ajuste del texto en el interior de la caja, mediante el atributo wrap, admite los valores: hard envía también los saltos de línea; soft, no envía los saltos de texto y off que desabilita el ajuste del texto y lo envía en una sola línea. El valor predeterminado es soft.
| <textarea rows="3" cols="22">HOLA</textarea> | |
| <textarea rows="6" cols="22"></textarea> |
Listas y menús desplegables
Las listas o menús desplegables permiten seleccionar una opción de varias posibles. Si aparece visible una única opción y solamnete es posible seleccionar una le daremos el nombre de menú desplegable, si las opciones visibles son varias y es posible realizar múltiples selecciones hablaremos de listas desplegables.
Para definirlas utilizaremos la etiqueta <select>...</select> que puede contener los atributosmultiple, pulsando la tecla CTRL mientras se hace clic con el ratón podremos seleccionar varias opciones, size indica el número de opciones visibles.
Entre las etiquetas de apertura y cierra de la lista o menú deberemos incluir un elemento <option> para cada una de las opciones que deban aparecer en las lista o menú. El atributo value establece el valor que será enviado si no se especifica se enviará el contenido entre las etiquetas<option>,...</option>, el atributoselected indica si dicha opción se mostrrá seleccionada previamente.
Menú desplegable<select name="D1"> <option>Opción1</option> <option>Opción2</option> <option>Opción3</option> </select> |
Menú desplegable
|
Lista desplegable<select size="5"name="D1" multiple> <option selected>Opción1</option> <option>Opción2</option> <option>Opción3</option> <option selected>Opcion4</option> <option>Opcion5</option> </select> |
Lista desplegable
(Recuerda que para seleccionar varias opciones debes de pulsar la tecla CTRL.) |
Button
Como comentamos en la página formularios este elemento nos permite incluir entre sus marcas de apertura y cierre la mayor parte de elementos HTML. Un atractivo importante de este elemento es que el navegador muestra el botón con borde alrededor de él y un efecto al hacer clic. Vamos a poner un ejemplo en el que una tabla es el contenido del botón.
| <button name="B3" value="Botón de prueba"> <table border="1" width="70%" cellspacing="0" align="center"> <tr> <td>Juan</td> <td>Pedro</td> </tr> <tr> <td>Andres</td> <td>Pablo</td> </tr> </table> </button> |
(El botón no hace nada porque no le hemos asociado ninguna acción, sólo debes de fijarte en el efecto al hacer clic.)
Fieldset y Label
El elemento <fieldset> permite agrupar varios campos de formulario. Además de mejorar la presentación del formulario facilita la aplicación de hojas de estilo a los campos seleccionados. Dibuja un rectángulo alrededor de los controles agrupados y mediante el elemento <legend> la definición de un nombre para todo el grupo.
El elemento label relacionaba un texto con un control del formulario.
| <fieldset style="border-color:#000080;
color: #000080"> <legend>Datos del cliente</legend> <p><label for="fp1">Nombre cliente:</label> <input type="text" name="T1" size="20" id="fp1"></p> <p>Código cliente:<input type="text" name="T2" size="20"></p> </fieldset> <br> <fieldset style="border-color:#000080; color: #000080"> <legend>Datos del pedido</legend> <p><label for="fp2">Número pedido:</label> <input type="text" name="T3" size="20" id="fp2"></p> <p>Importe pedido:<input type="text" name="T4" size="20"></p> </fieldset> |
|
Outgroup
Este elemento se utiliza generalmente con las listas o menús desplegables y permite agrupar las opciones por categorías. Admite el atributo label que permite introducir una etiqueta como nombre del grupo.
| <select size="10" name="Asig" multiple> <optgroup label="Ciencias"> <option>Matemáticas</option> <option>Química</option> <option>Biología</option> <option>Física</option> </optgroup> <optgroup label="Letras"> <option>Lengua</option> <option>Inglés</option> <option>Literatura</option> <option>Latín</option> </optgroup> </select> |