La etiqueta <input> permite crear diez tipos diferentes de controles de formulario. Sin embargo, algunas aplicaciones web utilizan otros elementos de formulario que no se pueden crear con <input>. Las listas deplegables y las áreas de texto disponen de sus propias etiquetas (<select> y <textarea> respectivamente).
Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya que es mucho más cómodo de introducir que en un campo de texto normal:
El código HTML del ejemplo anterior se muestra a continuación:
<form action="insertar_personal.php" method="post"> <label for="nombre">Nombre del redactor</label> <br/> <input type="text" id="nombre" name="nombre" value="" /> <label for="descripcion">Título del artículo</label> <br/> <textarea id="descripcion" name="descripcion" cols="40" rows="5"></textarea> </form>
La definición formal de la etiqueta <textarea> es:
| Etiqueta | <textarea> |
|---|---|
| Atributos comunes | básicos, internacionalización, eventos y foco |
| Atributos propios | rows = "numero" – Número de filas de texto que mostrará el textareacols = "numero" – Número de caracteres que se muestran en cada fila del textareaOtros: name, disabled, readonly, onselect, onchange, onfocus, onblur |
| Tipo de elemento | En línea |
| Descripción | Se emplea para incluir un área de texto en un formulario |
Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura y altura. La anchura del área de texto se controla mediante el atributo cols, que indica las columnas o número de caracteres que se podrán escribir como máximo en cada fila. La altura del área de texto se controla mediante rows, que indica directamente las filas de texto que serán visibles.
El principal inconveniente de los elementos <textarea> es que el lenguaje HTML no permite limitar el número máximo de caracteres que se pueden introducir. Mientras los elementos <input type="text"> disponen del atributo maxlength, las áreas de texto no disponen de un atributo equivalente, por lo que sólo es posible limitar el número de caracteres mediante su programación con JavaScript.
Por otra parte, el otro control disponible para los formularios es el de las listas desplegables:
La imagen anterior muestra los tres tipos de listas desplegables disponibles. El primero es el de las listas más utilizadas que sólo muestran un valor cada vez y sólo permiten seleccionar un valor. El segundo tipo de lista es el que sólo permite seleccionar un valor pero muestra varios a la vez. Por último, el tercer tipo de lista desplegable es aquella que muestra varios valores y permite realizar selecciones múltiples.
El código HTML del ejemplo anterior se muestra a continuación:
<label for="Persona">Seleccione al personal</label> <br/><br/> <select id="Persona" name="so"><br/> <option value="" selected="selected">- selecciona -</option><br/> <option value="Tupac">Tupac</option> <option value="Victoria">Victoria</option> <option value="Cosmic Girl">Cosmic Girl</option> <option value="otro">Otro</option> </select> <br/><br/> <label for="Persona2">Persona2</label> <br/> <select id="Persona2" name="Persona2" size="5"><br/> <option value="Tupac" selected="selected">Tupac</option> <option value="Victoria">Victoria</option> <option value="Cosmic Girl">Cosmic Girl</option> <option value="otro">Otro</option> </select> <br/><br/> <label for="Persona3">Persona3</label> <br/> <select id="Persona3" name="Persona3" size="5" multiple="multiple"><br/> <option value="Tupac" selected="selected">Tupac</option> <option value="Victoria">Victoria</option> <option value="Cosmic Girl">Cosmic Girl</option> <option value="otro">Otro</option> </select>
Los tres tipos de listas desplegables se definen con la misma etiqueta <select> y cada elemento de la lista se define mediante la etiqueta <option>:
| Etiqueta | <select> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | size = "numero" – Número de filas que se muestran de la lista (por defecto sólo se muestra una)multiple = "multiple" – Si se incluye, se permite seleccionar más de un elementoOtros: name, disabled, onchange, onfocus, onblur |
| Tipo de elemento | En línea |
| Descripción | Se emplea para incluir una lista desplegable en un formulario |
| Etiqueta | <option> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | selected = "selected" – Indica si el elemento aparece seleccionado por defecto al cargarse la páginavalue = "texto" – El valor que se envía al servidor cuando el usuario elige esa opciónOtros: label, disabled |
| Tipo de elemento | – |
| Descripción | Se emplea para definir cada elemento de una lista desplegable |
La inmensa mayoría de listas desplegables que utilizan las aplicaciones web son simples, por lo que el código HTML habitual de las listas desplegables es:
Cuyo código es:
<label for="Persona">Personal</label> <br/> <select id="Persona" name="Persona"> <option value="" selected="selected">- selecciona -</option> <option value="windows">Tupac</option> <option value="mac">Victoria</option> <option value="linux">Cosmic Girl</option> <option value="otro">Otro</option> </select>
La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista. Cada una de las opciones de la lista se define mediante una etiqueta <option>. El atributo value de cada opción es obligatorio, ya que es el dato que se envía al servidor cuando el usuario envía el formulario. Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo selected a la opción deseada.
Por otra parte, las listas desplegables permiten agrupar sus opciones de forma que el usuario pueda encontrar fácilmente las opciones cuando la lista es muy larga:
El código HTML correspondiente a la imagen anterior se muestra a continuación:
<form id="formulario" method="post" action="">
<label for="Persona">Seleccione al personal</label> <br/>
<select id="Persona" name="Persona">
<optgroup label="Redactores">
<option value="Tupac" selected="selected">Tupac</option>
<option value="Cosmic Girl">Cosmic Girl</option>
<option value="Victoria">Victoria</option>
<option value="Other">Otro</option>
</optgroup>
<optgroup label="Tematicas">
<option value="Area de interes" selected="selected">SEO</option>
<option value="Community Manager">Community Manager</option>
<option value="WordPress">WordPress</option>
<option value="Programacion">Programacion</option>
<option value="Other">Otro</option>
</optgroup>
</select>
</form>
La etiqueta <optgroup> permite agrupar opciones relacionadas dentro de una lista desplegable. Su definición formal se muestra a continuación:
| Etiqueta | <optgroup> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | label = "texto" – Texto que se muestra como título de la agrupación de opcionesOtros: disabled, selected |
| Tipo de elemento | – |
| Descripción | Se emplea para definir una agrupación lógica de opciones de una lista desplegable |
El único atributo que suele utilizarse con la etiqueta <optgroup> es label, que indica el nombre de cada agrupación. Los navegadores muestran de forma destacada el título de cada agrupación, de forma que el usuario pueda localizar más fácilmente la opción deseada.
Ejercicio 15
Determinar el código HTML necesario para crear el formulario que se muestra en la siguiente imagen:
Veamos la solución al ejercicio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>¡Únete cómo redactor!</title>
</head>
<body>
<h2>¡Únete cómo redactor en tupacbruch.com!</h2>
<form action="/php/unete_como_redactor.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Datos personales</legend>
<label for="provincia">Provincia</label> <br/>
<select id="provincia" name="provincia">
<option value="" selected="selected">- selecciona -</option>
<option value="01">Buenos Aires</option>
<option value="02">Ciudad Autónoma de Buenos Aires</option>
<option value="03">Catamarca</option>
<option value="04">Chaco</option>
<option value="05">Chubut</option>
<option value="06">Córdoba</option>
<option value="07">Corrientes</option>
<option value="08">Entre Ríos</option>
<option value="09">Formosa</option>
<option value="10">Jujuy</option>
<option value="11">La Pampa</option>
<option value="12">La Rioja</option>
<option value="13">Mendoza</option>
<option value="14">Misiones</option>
<option value="15">Neuquén</option>
<option value="16">Río Negro</option>
<option value="17">Salta</option>
<option value="18">San Juan</option>
<option value="19">San Luis</option>
<option value="20">Santa Cruz</option>
<option value="21">Santa Fé</option>
<option value="22">Tierra del Fuego, Antártida e Islas del Atlántico Sur</option>
<option value="23">Tucumán</option>
</select>
<br/><br/>
<label for="fecha_dia">Fecha de nacimiento</label> <br/>
<input type="text" size="3" maxlength="2" id="fecha_dia" name="fecha_dia" />
de
<select id="fecha_mes" name="fecha_mes">
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
de
<input type="text" size="5" maxlength="4" id="fecha_ano" name="fecha_ano" />
<br/><br/>
<label for="temasDeInteres">Temas de interés</label> <br/>
<select multiple="multiple" size="5" id="temasDeInteres" name="temasDeInteres">
<option value="3105">Administración de Empresas</option>
<option value="3106">Análisis de datos y programación</option>
<option value="3107">Arquitectura web</option>
<option value="3108">Calidad de servicio</option>
<option value="3109">CRM y Business Intelligence</option>
<option value="3110">Gestión de proyectos</option>
<option value="3111">Programación</option>
<option value="3112">SEO</option>
<option value="3113">Sistemas</option>
<option value="3114">otros</option>
</select>
</fieldset>
</form>
</body>
</html>
Ejercicio 16
Determinar el código HTML necesario para crear el formulario que se muestra en la siguiente imagen:
Veamos cómo es el código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Información sobre el producto</title>
</head>
<body>
<h2>¡Sube tu primer artículo en tupacbruch.com!</h2>
<form action="/php/insertar_subasta.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Datos básicos del archivo</legend>
<label for="nombre">Nombre del artículo</label> <br/>
<input type="text" name="nombre" id="nombre" size="50" maxlength="250" />
<br/><br/>
<label for="descripcion">Descripción e información extra</label> <br/>
<textarea name="descripcion" id="descripcion" cols="40" rows="5"></textarea>
<br/><br/>
Sube tu archivo <input type="file" name="Sube tu archivo" />
<br/><br/>
<input name="contador" type="checkbox" value="si" /> Añadir contador de visitas
</fieldset>
<fieldset>
<legend>Datos del artículo</legend>
<label for="Cantidad de palabras">Cantidad de palabras</label>
<input type="text" size="5" id="precio" name="precio" />
<br><br/>
<label for="Categoría">Categoría</label>
<select id="Categoría" name="Categoría">
<option value="administración de empresas">administración de empresas</option>
<option value="desarrollo personal">desarrollo personal</option>
<option value="e-commerce">e-commerce</option>
<option value="marketing">marketing</option>
<option value="programación">programación</option>
<option value="SEO">SEO</option>
<option value="otro">otro</option>
</select>
<br/><br/>
<label>Anuncios en el post</label> <br/>
<input type="radio" name="promocion" value="ninguno" checked="checked" /> Ninguno <br/>
<input type="radio" name="promocion" value="AdSense" /> AdSense <br/>
<input type="radio" name="promocion" value="Anuncio de terceros" /> Anuncio de terceros
</fieldset>
</form>
</body>
</html>