comparte el articulo 

Creación de formularios con XHTML y CSS: textarea y select

Actualizado el 01/02/2012 < > 0 Comentarios

Resumen: Tercera parte de nuestro estudio sobre los formularios, estudiamos los elementos de tipo textarea y select, etiquetas que vienen a completar el trinomio de sentencias básicas para creación de elementos en formularios.

Continuamos con el estudio de las sentencias esenciales para crear elementos de formulario, después de haber estudiado a detalle la etiqueta “input” y sus distintos tipos, es tiempo de empezar a analizar el resto de etiquetas básicas que existen, con ello nos referimos a “textarea” y “select”, que si bien no son tan versátiles y diversas como “input”, representan gran importancia para el desarrollo de formularios.

Elemento “textarea” de HTML

A diferencia de las múltiples opciones y configuraciones que se pueden presentar en un elemento “input”, “textarea” representa una sentencia sencilla con un uso simple y directo, aceptar y desplegar grandes cantidades de texto que después se mandarán al servidor para su procesamiento.

En muchas ocasiones los campos definidos mediante esta etiqueta son utilizados como una alternativa al “input” de tipo “text”, para así poder introducir más de una línea de texto en el campo, pero su uso se debe de enfocar para datos que realmente necesitan líneas múltiples como es una dirección, algún comentario, un resumen, entre otras cosas.

El elemento “textarea” cuenta con una etiqueta de apertura y otra de clausura, y el texto que depositemos entre esas dos etiquetas será el que se mostrará en el elemento al momento de visualizarse en la interfaz. Si quisiéramos introducir una área de texto cuyo contenido sea “Inserta tu resumen aquí” haríamos lo siguiente:

<textarea name="resumen" rows="10" cols="20">Inserta tu resumen aquí</textarea>

Tal como en el tipo “text” de “input”, el hecho de introducir un texto antes de que el usuario lo haga, es meramente por fines informativos y de instrucción, en caso de que el usuario olvide introducir un texto o simplemente mande el formulario con el texto insertado por defecto es deber de nosotros validar dicha información para no obtener datos erróneos. Otra desventaja que representa el introducir un texto por defecto, es el hecho de que requiere más trabajo por parte del usuario, ya que necesita borrar el texto antes de introducir el suyo, aunque para evitar esto se puede hacer uso de una instrucción sencilla de JavaScript que borre el texto justo al momento en que el usuario de clic en el área de texto.

Pos disposición de XHTML los atributos “rows” y “cols” son totalmente obligatorios, estos ayudarán a definir el tamaño del área de texto que vamos a mostrar, esto modifica en principio la altura y anchura del elemento pero después puede ser modificado mediante el uso de CSS. En nuestro ejemploe stamos dando un número de 10 filas de alto y 20 columnas de ancho.

Elemento “select” de HTML

La etiqueta “select” es utilizada para definir elementos que se presentan en forma de lista ante el usuario, lo que generalmente despliega un menú tipo drop-down donde se debe elegir una de las opciones y su valor será el que se envíe para el procesamiento del lado servidor. Si bien este es el comportamiento considerado comúnmente como normal, también existe la posibilidad de crear elementos “select” de tipo múltiple, permitiéndole al usuario elegir más de una opción.

Para definir la opciones dentro del menú de selección debemos recurrir a otra etiqueta la cual lleva por nombre “option”. Cada opción que queramos desplegar deberá de ir entre una etiqueta “option” de apertura y otra de clausura, si por ejemplo quisiéramos definir una lista de países haríamos lo siguiente:

<select name="pais">
    <option>Argentina</option>
    <option>España</option>
    <option>México</option>
    <option>Venezuela</option>
</select>

Con la estructura utilizada en el ejemplo, el valor que se enviará al momento de mandar toda la información del formulario al servidor será el contenido de la opción que seleccionamos, si seleccionamos la tercera opción entonces “México” es el valor que se le dará al elemento “pais”. En caso de no desear este comportamiento, podemos utilizar el atributo “value” para modificar el valor que se mandará para el procesamiento, si en lugar de “México” queremos mandar la abreviación “mx” podemos hacer lo siguiente:

<option value="mx">México</option>

Se puede establecer una opción seleccionada por defecto mediante el atributo “selected”, esto nos permite tener siempre un valor al momento de que el usuario envíe el formulario y evitar falta de información.

<option value="mx" selected="selected">México</option>

“optgroup” es otra etiqueta que se puede utilizar dentro de un “select”, es poco utilizado pero representa gran utilidad cuando se requiere seccionar una lista de opciones que es muy grande. Tomemos como referente el ejemplo que hemos venido manejando, en caso de que queramos segmentar mejor nuestra lista podemos agrupar los países por continente:

<select name="pais">
    <optgroup label="América">
        <option>Argentina</option>
        <option>México</option>
        <option>Venezuela</option>
    </optgroup>
    <optgroup label="Europa">
        <option>España</option>
        <option>Italia</option>
        <option>Portugal</option>
    </optgroup>
</select>

Como ya mencionamos esta es la manera predeterminada para mostrar un elemento “select”, pero existe la opción de hacerlo de selección múltiple mediante los atributos “size” y “multiple”. Al momento de hacer uso del atributo “size” el menú drop down desaparece y se muestran las opciones dentro de un cuadro, el cual desplegará una barra de desplazamiento en caso de que su tamaño no cubra todas las opciones.

Por su parte el atributo “multiple” permite que dentro de esta caja podamos seleccionar todas las opciones que deseemos, esto se logra oprimiendo la tecla Ctrl y después dando clic en la opción del menú sin soltarla. Nuestro código final lucirá de la siguiente manera:

<select name="pais" size="8" multiple="multiple">
    <optgroup label="América">
        <option>Argentina</option>
        <option>México</option>
        <option>Venezuela</option>
    </optgroup>
    <optgroup label="Europa">
        <option>España</option>
        <option>Italia</option>
        <option>Portugal</option>
    </optgroup>
</select>

Publicado el 17/01/2012, última actualización 01/02/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras