mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-28 03:12:25 +00:00
864 lines
32 KiB
HTML
864 lines
32 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
<title>Formularios. Tipos de campo</title>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../nvu2005.css">
|
|
|
|
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]>
|
|
<script src="../ie7/ie7-standard-p.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div id="localizador">
|
|
<p>Formularios>>Tipos de campo</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="formularios3.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="formularios1.htm" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
<div id="contenido">
|
|
|
|
|
|
<h3>Tipos de controles</h3>
|
|
|
|
<p>Ahora que ya tenemos el contenedor básico vamos
|
|
pues a pasar revista a
|
|
los diferentes tipos de controles con los que podremos incluir
|
|
datos en
|
|
el formulario.<br>
|
|
|
|
<br>
|
|
|
|
</p>
|
|
|
|
<h4>Entradas de texto de una
|
|
línea</h4>
|
|
|
|
<p><img class="flotder" style="width: 303px; height: 416px;" alt="Panel de introducción de campos de formulario" title="Panel de introducción de campos de formulario" src="imagenes/campotexto.png">Utilizaremos este tipo de
|
|
controles para recoger datos tales
|
|
como
|
|
los nombres, apellidos, direcciones, teléfonos y, en
|
|
general, todos aquellos de los que podamos esperar una
|
|
extensión limitada. El principal problema lo tendremos,
|
|
precisamente, al estimar cuál debe ser la longitud adecuada
|
|
para que puedan caber los datos que introduzca el visitante, ya que tan
|
|
nombre es Ana como María de las Mercedes, y mientras el
|
|
primero tiene suficiente con tres caracteres, el segundo necesita un
|
|
total de veintiuno.</p>
|
|
|
|
<p>Su presentación en pantalla será de este
|
|
tipo: </p>
|
|
|
|
<form name="form1">
|
|
<p class="centro"><b>Apellidos</b>: <input name="apellidos" size="30" maxlength="50" type="text"> </p>
|
|
|
|
</form>
|
|
|
|
<p>Para insertar una entrada de texto de una línea
|
|
escribiremos primero el texto que deseamos que se utilice como etiqueta
|
|
para el control y luego utilizaremos la opción <span class="refmenu">insertar
|
|
</span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> formulario </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu">
|
|
campo
|
|
de
|
|
formulario</span>, o bien la opción <span class="refmenu">campo
|
|
de
|
|
formulario</span> que aparece al desplegar el icono <img style="width: 73px; height: 41px;" alt="Formulario" title="Formulario" src="imagenes/icoformulario.png">
|
|
de la barra de herramientas. En el panel que se presenta aparece
|
|
como primer tipo de
|
|
control el denominado texto que es el que pretendemos crear.</p>
|
|
|
|
<p>En este caso no pondremos ningún valor inicial.<img style="width: 128px; height: 24px;" alt="Más propiedades" title="Más propiedades" src="../imagenes/botonmaspropiedades.png"></p>
|
|
|
|
<p>Desplegando el botón <img style="width: 128px; height: 24px;" alt="Más propiedades" title="Más propiedades" src="../imagenes/botonmaspropiedades.png">
|
|
encontramos unas cuantas opciones, algunas de las cuales son
|
|
específicas de este tipo de control mientras que otras, como
|
|
el <span class="refmenu">índice de
|
|
tabulación</span>
|
|
que permite especificar el orden en el que se saltará de uno
|
|
a
|
|
otro control del formulario y la tecla de acceso rápido, que
|
|
permitirá acceder de forma inmediata a ese campo pulsando la
|
|
tecla <img style="width: 38px; height: 27px;" alt="Alt" title="Alt" src="../imagenes/teclaalt.png"> + la
|
|
letra indicada en este apartado. Estas opciones aparecerán
|
|
para todos los campos y sería conveniente especificarlas
|
|
para favorecer la accesibilidad.</p>
|
|
|
|
<div class="avisos">En la versión disponible al
|
|
redactar esta
|
|
documentación existen dos cuestiones que merecen comentarse
|
|
en el tratamiento de este
|
|
tipo de controles:<br>
|
|
|
|
<ol>
|
|
|
|
<li>No se incluye el atributo <code>type</code>
|
|
para indicar el tipo de control del que se trata, mientras que
|
|
verás que sí se especifica en los otros controles
|
|
<code>input</code>.
|
|
Esto se debe a que el valor <code>text</code> es el que se
|
|
considera por defecto para el atributo <code>type</code>
|
|
de los controles <code>input</code>, por lo que no es
|
|
necesario incluirlo aunque puede que lo encuentres en formularios
|
|
creados con otros programas. </li>
|
|
|
|
<li>No se almacena el
|
|
valor de la <span class="refmenu">tecla de acceso
|
|
rápido</span> en los campos de texto de una
|
|
línea, por lo que si se desea
|
|
especificar este atributo habrá que insertar manualmente el
|
|
código <code>accesskey="letra"</code></li>
|
|
|
|
</ol>
|
|
|
|
</div>
|
|
|
|
<div class="codigo">
|
|
<p> El código que se
|
|
generará con el ejemplo que se ha mostrado en las
|
|
imágenes
|
|
será: <b><br>
|
|
|
|
<br>
|
|
|
|
</b><code><input maxlength="50"
|
|
size="25" tabindex="1" accesskey="a" name="apellidos"><br>
|
|
|
|
</code><br>
|
|
|
|
Independientemente del tamaño en pantalla que viene fijado
|
|
por el atributo <code>size</code>, el atributo <code>maxlength="n</code>",
|
|
sirve para especificar el número máximo de
|
|
caracteres que se podrán introducir en la caja de texto.</p>
|
|
|
|
</div>
|
|
|
|
<div class="avisos">
|
|
<p><img src="../imagenes/atencion.gif" align="left" height="25" width="28">Aunque habitualmente el nombre
|
|
que le damos al campo suele coincidir con el texto que ponemos a su
|
|
lado no tiene por qué ser necesariamente así.
|
|
Además, si en algún momento tienes acceso a
|
|
programas para procesar los formularios, comprobarás que una
|
|
simple variación de minúscula por
|
|
mayúscula a la hora de referirnos a los nombres de los
|
|
campos es suficiente para que no funcione.</p>
|
|
|
|
</div>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 62" title="Actividad 62" src="../imagenes/numeracion/sesentaydos.gif">
|
|
<ul>
|
|
|
|
<li>Abre el archivo <strong>actividad61.html</strong>
|
|
y añade un campo de texto para recoger el
|
|
nombre, apellidos y dirección de quien cumplimenta
|
|
el formulario.</li>
|
|
|
|
<li>Acude a la pestaña <img style="width: 99px; height: 21px;" alt="Código fuente" title="Código fuente" src="../imagenes/pestanacodigofuente.png">
|
|
o, más cómodamente, utiliza la opción
|
|
de menú <span class="refmenu">insertar </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu">
|
|
html</span> para añadir el código necesario
|
|
para que se pueda acceder a ese campo con una tecla rápida.</li>
|
|
|
|
<li>Puedes guardarlo con el mismo nombre, aunque si
|
|
quieres conservar la secuencia es preferible que lo llames <strong>actividad62.html</strong>
|
|
para mantener la correspondencia con la serie de actividades. Abre el
|
|
archivo en
|
|
el
|
|
navegador o en la pestaña <img style="width: 103px; height: 20px;" alt="Vista preliminar" title="Vista preliminar" src="../imagenes/pestanavistapreliminar.png"> para comprobar
|
|
que funciona la tecla de acceso rápido que has especificado.<br>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<p></p>
|
|
|
|
<h4>Áreas de texto de
|
|
varias
|
|
líneas</h4>
|
|
|
|
<br>
|
|
|
|
<p><img class="flotder" style="width: 298px; height: 134px;" alt="Valores para Área de texto" title="Valores para Área de texto" src="imagenes/areadetexto.png">Estos controles se utilizan,
|
|
no sólo porque no
|
|
podamos
|
|
prever la extensión, sino, fundamentalmente, porque se trata
|
|
de campos abiertos en los que dejamos al visitante que se exprese sin
|
|
limitaciones. Para crear un control de este tipo seleccionaremos la
|
|
opción de menú <span class="refmenu">insertar <img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"> formulario <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
área
|
|
de
|
|
texto...</span> o elegiremos la opción <span class="refmenu">área de texto</span> del
|
|
desplegable a partir del botón de
|
|
menú. </p>
|
|
|
|
<p>La apariencia que podríamos encontrar cuando
|
|
creemos
|
|
un
|
|
sería similar a la siguiente.<br clear="all">
|
|
|
|
</p>
|
|
|
|
<form name="form2">
|
|
<p>Esperamos tus aportaciones:</p>
|
|
|
|
<p> <textarea name="aportaciones" cols="75" rows="4" wrap="VIRTUAL"></textarea> </p>
|
|
|
|
</form>
|
|
|
|
<p class="codigo">En este caso, el código es el
|
|
siguiente (observa que, mientras en el campo de texto de una sola
|
|
línea no había etiqueta de cierre en
|
|
éste tipo sí que la hay)<br>
|
|
|
|
<code><br>
|
|
|
|
<span class="Estilo1"><textarea wrap="virtual"
|
|
cols="75" rows="4" tabindex="2" name="Aportaciones"><br>
|
|
|
|
</textarea></span></code><br>
|
|
|
|
<br>
|
|
|
|
<code>Cols</code> y <code>rows</code> me
|
|
sirven para
|
|
especificar el ancho y el alto del cuadro de introducción de
|
|
texto.<br>
|
|
|
|
<br>
|
|
|
|
El campo que se ha mostrado en el ejemplo lleva otro atributo
|
|
más en la etiqueta: <code><span class="Estilo1">wrap="virtual"</span></code>.
|
|
Con este atributo, que especificaremos en el apartado<span class="refmenu"> modo de ajuste</span> del panel de
|
|
creación del campo, se especifica la forma en la
|
|
que se irán
|
|
partiendo los renglones cuando alguien introduzca texto, aunque la
|
|
implementación del mismo en los diferentes navegadores es
|
|
dispar, ya que teóricamente este modo debería
|
|
funcionar de forma diferente al ajuste físico. Parece que lo
|
|
más prudente sería dejar este ajuste en el modo
|
|
predeterminado.</p>
|
|
|
|
<div class="avisos">
|
|
<p><img src="../imagenes/atencion.gif" align="left" height="25" width="28">La especificación
|
|
de tecla de acceso rápido ya funciona correctamente desde el
|
|
panel de creación del área de texto por lo que no
|
|
necesitaremos introducir el código manualmente.</p>
|
|
|
|
</div>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 63" title="Actividad 63" src="../imagenes/numeracion/sesentaytres.gif">
|
|
<ul>
|
|
|
|
<li>Abre el
|
|
archivo <strong>actividad62.html </strong>y
|
|
añade un área de texto para recoger las
|
|
observaciones que quiera realizar el usuario</li>
|
|
|
|
<li>Especifica que el ajuste sea virtual.</li>
|
|
|
|
<li>Indica una tecla de acceso rápido desde el panel
|
|
de creación del campo (en esta ocasión
|
|
sí debería almacenarse)</li>
|
|
|
|
<li>Guárdalo como <strong>actividad63.html</strong>.
|
|
Abre el archivo en
|
|
el
|
|
navegador o en la pestaña <img style="width: 103px; height: 20px;" alt="Vista preliminar" title="Vista preliminar" src="../imagenes/pestanavistapreliminar.png"> para comprobar
|
|
que funciona la tecla de acceso rápido que has especificado.<br>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<p></p>
|
|
|
|
<h4>Botones de
|
|
opción</h4>
|
|
|
|
<p><img class="flotder" style="width: 303px; height: 175px;" alt="Valores para botón de radio" title="Valores para botón de radio" src="imagenes/botonradial.png">Los botones de
|
|
opción se utilizan para que el
|
|
usuario escoja entre dos o más opciones
|
|
excluyentes. </p>
|
|
|
|
<p>Para crear un control de este tipo escribiremos el enunciado
|
|
general del tema sobre el que solicitamos la opción
|
|
y luego iremos escribiendo el texto de cada una de las opciones
|
|
ofertadas. Finalmente elegiremos la
|
|
opción de menú<span style="font-weight: bold;"> </span><span class="refmenu">insertar <img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14">
|
|
formulario <img src="../imagenes/flechamenu.png" height="13" width="14"> campo de formulario </span><span class="refmenu"><img style="width: 14px; height: 13px;" src="../imagenes/flechamenu.png"> </span><span class="refmenu">botón</span><span class="refmenu"> </span><span class="refmenu">radial </span> o la misma
|
|
opción en el deslegable desde el icono <img style="width: 73px; height: 41px;" alt="Formulario" title="Formulario" src="imagenes/icoformulario.png">
|
|
de la barra de herramientas para proceder a la creación del
|
|
control propiamente dicho. </p>
|
|
|
|
<p>El resultado final sería similar a lo siguiente:</p>
|
|
|
|
<form name="form4">
|
|
<p>Horario preferido para entrevistas: Mañana: <input name="entrevista" value="mañana" type="radio">
|
|
Tarde: <input name="entrevista" value="tarde" type="radio"> Indiferente: <input name="entrevista" value="Indiferente" type="radio"> </p>
|
|
|
|
</form>
|
|
|
|
<div class="codigo">
|
|
<p>El código que utilizaremos
|
|
será<b> </b></p>
|
|
|
|
<p><code><input type="radio"
|
|
name="entrevista" value="mañana"></code><b><br>
|
|
|
|
<br>
|
|
|
|
</b> donde el tipo <code>radio</code> indica que se
|
|
trata de botones de
|
|
opción.</p>
|
|
|
|
<p>Lo importante de los botones de opción es que todos
|
|
los
|
|
pertenecientes al mismo grupo deben llevar el mismo atributo en <code>name</code>,
|
|
variando el correspondiente a value para diferenciar la
|
|
opción marcada. Lógicamente, para facilitar la
|
|
interpretación de los resultados recibidos, value
|
|
tendrá como valor lo mismo que hemos incluido en el
|
|
rótulo que precede a cada opción<br>
|
|
|
|
<br>
|
|
|
|
Aunque no parece una opción demasiado respetuosa con la
|
|
libertad de elección, si quisiéramos que una de
|
|
las opciones apareciera marcada
|
|
por defecto lo haríamos marcando en el panel de
|
|
creación la opción <span class="refmenu">seleccionado
|
|
inicialmente</span> que, visto en el código,
|
|
generaría un atributo complementario <code>checked="checked" </code></p>
|
|
|
|
</div>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 64" title="Actividad 64" src="../imagenes/numeracion/sesentaycuatro.gif">
|
|
<ul>
|
|
|
|
<li>Abre el archivo <strong>actividad63.html
|
|
</strong>y añade una selección mediante
|
|
botones de
|
|
opción con un par de valores.</li>
|
|
|
|
<li>Guárdalo como <strong>actividad64.html
|
|
</strong>. Abre el archivo en
|
|
el
|
|
navegador o en la pestaña <img style="width: 103px; height: 20px;" alt="Vista preliminar" title="Vista preliminar" src="../imagenes/pestanavistapreliminar.png"> para comprobar
|
|
que ninguna de las opciones aparece seleccionada.</li>
|
|
|
|
<li>Añade una tercera opción y especifica
|
|
que esté marcada inicialmente. Guarda y comprueba el
|
|
resultado.<br>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<p></p>
|
|
|
|
<h4>Casillas de
|
|
verificación</h4>
|
|
|
|
<h4><br>
|
|
|
|
</h4>
|
|
|
|
<p><img class="flotder" style="width: 303px; height: 177px;" alt="Valores para casilla de verificación" title="Valores para casilla de verificación" src="imagenes/casillaverif.png">Las casillas de
|
|
verificación se asemejan a los
|
|
botones de opción, pero permiten que se marque
|
|
más de una opción. </p>
|
|
|
|
<p>Para crear un control de este tipo seguiremos un
|
|
procedimiento idéntico al de los botones radiales, con la
|
|
única diferencia de que elegiremos la
|
|
opción de menú<span style="font-weight: bold;"> </span><span class="refmenu">insertar <img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14">
|
|
formulario <img src="../imagenes/flechamenu.png" height="13" width="14"> campo de formulario </span><span class="refmenu"><img style="width: 14px; height: 13px;" src="../imagenes/flechamenu.png"> </span><span class="refmenu">casilla de verificación</span><span class="refmenu"> </span> o la misma
|
|
opción en el deslegable desde el icono <img style="width: 73px; height: 41px;" alt="Formulario" title="Formulario" src="imagenes/icoformulario.png">
|
|
de la barra de herramientas para la creación de cada una de
|
|
las casillas. </p>
|
|
|
|
<p>El resultado sería similar al siguiente: </p>
|
|
|
|
<form name="form3">
|
|
<p>Me interesaría colaborar en :</p>
|
|
|
|
<p>Teatro: <input name="Teatro" value="X" type="checkbox"> Cine: <input name="Cine" value="X" type="checkbox"> Deportes: <input name="Deportes" value="X" type="checkbox">
|
|
Taller de fotografía <input name="Foto" value="X" type="checkbox"> Página WEB del Centro <input name="WEB" value="X" type="checkbox"> </p>
|
|
|
|
</form>
|
|
|
|
<div class="codigo">
|
|
<p>El código correspondiente es:
|
|
<br>
|
|
|
|
<br>
|
|
|
|
<code><input type="checkbox"
|
|
name="Teatro" value="X"></code><br>
|
|
|
|
<br>
|
|
|
|
<code>Checkbox</code> indica que se trata de casillas de
|
|
verificación. En
|
|
<code>name</code> iremos poniendo palabras que identifiquen
|
|
las opciones y en el
|
|
campo value pondremos el texto que queremos recibir cuando se marque la
|
|
casilla. En el ejemplo se ha puesto una X, aunque podríamos
|
|
haber puesto un Sí o cualquier otro conjunto de caracteres.</p>
|
|
|
|
</div>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 65" title="Actividad 65" src="../imagenes/numeracion/sesentaycinco.gif">
|
|
<ul>
|
|
|
|
<li>Abre el archivo <strong>actividad64.html
|
|
</strong>y añade una selección mediante
|
|
casillas de verificación con dos o tres valores
|
|
posibles sin que ninguno de ellos esté seleccionado.</li>
|
|
|
|
<li>Guárdalo como <strong>actividad65.html</strong>.
|
|
Abre el archivo en
|
|
el
|
|
navegador o en la pestaña <img style="width: 103px; height: 20px;" alt="Vista preliminar" title="Vista preliminar" src="../imagenes/pestanavistapreliminar.png"> para comprobar
|
|
que ninguna de las opciones aparece seleccionada.</li>
|
|
|
|
<li>Añade otra opción y especifica
|
|
que esté marcada inicialmente. Guarda y comprueba el
|
|
resultado.<br>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<p class="avisos"><img class="flotizq" style="width: 28px; height: 25px;" alt="Atención" src="../imagenes/atencion.gif">Si intentas modificar las
|
|
propiedades de una casilla de verificación o de un
|
|
botón opción haciendo doble clic sobre los mismos
|
|
o utilizando el botón derecho para acceder a sus propiedades
|
|
no lograrás lanzar el panel para hacerlo. Tendrás
|
|
que recurrir a la indicación de la etiqueta <code><input></code>
|
|
en la barra de estado y allí utilizar el botón
|
|
derecho para lanzar las<span class="refmenu"> propiedades
|
|
avanzadas</span>. </p>
|
|
|
|
<h4>Cuadros de
|
|
menú y
|
|
listas de selección</h4>
|
|
|
|
<p><img class="flotder" style="width: 404px; height: 283px;" alt="Introducción de ítems de un menú o lista" title="Introducción de ítems de un menú o lista" src="imagenes/listas2.png">
|
|
Los cuadros de menú permitirán presentar
|
|
una lista de opciones predeterminadas cuando creamos el formulario.
|
|
Tienen dos formas de presentación: los menús
|
|
desplegables y las listas. Salvo la forma de presentarlo, la
|
|
única diferencia importante entre ambos modos de
|
|
presentación es que mientras que en los menús
|
|
desplegables sólo se puede seleccionar una
|
|
opción, en las listas es posible seleccionar varias si
|
|
así lo indicamos al construir el formulario.</p>
|
|
|
|
<p>Para iniciar la creación utilizaremos la
|
|
opción de menú <span class="refmenu">insertar <img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14">
|
|
formulario <img src="../imagenes/flechamenu.png" height="13" width="14"> lista de opciones</span><span class="refmenu"></span> o su homóloga al
|
|
desplegar el listado en el el icono <img style="width: 73px; height: 41px;" alt="Formulario" title="Formulario" src="imagenes/icoformulario.png">
|
|
de la barra de herramientas.</p>
|
|
|
|
<p class="flotizq"><img style="width: 266px; height: 114px;" alt="Especificando la altura y/o la selección múltiple" title="Especificando la altura y/o la selección múltiple" src="imagenes/listas1.png"></p>
|
|
|
|
<p>Una vez allí se añadirán los
|
|
ítems con una simple pulsación en el
|
|
botón<img style="width: 108px; height: 22px;" alt="Añadir opción" title="Añadir opción" src="imagenes/aniadiropcion.png">,
|
|
aunque lo primero que tendremos que hacer será especificar
|
|
si se
|
|
tratará de un menú o de una lista de
|
|
selección
|
|
para lo cual tendremos que especificar la altura o bien indicar que
|
|
existe la posibilidad de realizar una opción
|
|
múltiple, ya
|
|
que en ambos casos estaríamos creando una lista, mientras
|
|
que si
|
|
no especificamos estos datos se tratará de un
|
|
menú.</p>
|
|
|
|
<p>El resultado, según se trate de una u otra
|
|
posibilidad será similar a lo siguiente:</p>
|
|
|
|
<form name="menu">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="5" width="80%">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td width="35%">
|
|
<p>Elige una opción de la lista
|
|
<select name="selecciones">
|
|
<option>África</option>
|
|
<option>América</option>
|
|
<option>Asia</option>
|
|
<option>Europa</option>
|
|
<option>Oceanía</option>
|
|
</select>
|
|
|
|
</p>
|
|
|
|
</td>
|
|
|
|
<td width="9%">
|
|
<p><br>
|
|
|
|
</p>
|
|
|
|
</td>
|
|
|
|
<td width="35%">
|
|
<p>Ahora puedes elegir varias opciones si mantienes
|
|
pulsada la tecla CTRL</p>
|
|
|
|
</td>
|
|
|
|
<td width="21%">
|
|
<select name="lista" size="5" multiple="multiple">
|
|
<option>África</option>
|
|
<option>América</option>
|
|
<option>Asia</option>
|
|
<option>Europa</option>
|
|
<option>Oceanía</option>
|
|
</select>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</form>
|
|
|
|
<div class="codigo">
|
|
<p> El código necesario es
|
|
idéntico para ambos tipos de presentaciones e incluye el
|
|
identificador de tipo select, un nombre para el menú o lista
|
|
(puede ser el que quieras aunque en este caso se haya puesto
|
|
"selecciones". A continuación se colocan las diferentes
|
|
posibilidades de la lista encerradas entre <code><option></code>
|
|
y
|
|
<code></option></code>. Observa que,
|
|
nuevamente este tipo de campo
|
|
tiene etiquetas de cierre, tanto en las opciones como en la propia
|
|
definición del tipo. </p>
|
|
|
|
<p class="indentado25"><code><select
|
|
name="continentes></code></p>
|
|
|
|
<p class="indentado25 indentado50"><code><option>África</option><br>
|
|
|
|
<option>América</option>
|
|
<br>
|
|
|
|
<option>Asia</option> <br>
|
|
|
|
<option>Europa</option> <br>
|
|
|
|
<option>Oceanía</option></code></p>
|
|
|
|
<p class="indentado25"><code></select></code></p>
|
|
|
|
<p><code></code>La diferencia entre un
|
|
menú y una lista estriba en que la
|
|
lista lleva en la primera etiqueta un atributo <code><span class="Estilo1">size="n"</span></code>
|
|
donde n es el número de filas que tendremos a la vista
|
|
simultáneamente. Si le añadimos al final de la
|
|
etiqueta de entrada el atributo <code>multiple="multiple"</code>podremos
|
|
marcar varias de las posibilidades mostradas, algo que no
|
|
podemos hacer cuando se trata de un menú. (Si no
|
|
hubiéramos especificado un tamaño para lista,
|
|
pero
|
|
sí indicamos que es posible realizar una
|
|
selección
|
|
múltiple, el tamaño pasará a ser
|
|
automáticamente el del número de ítems
|
|
de la lista)</p>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="avisos">
|
|
<p>En el panel de introducción de los
|
|
opciones existe la opción <span class="refmenu">seleccionada
|
|
inicialmente</span>.
|
|
Dado el diferente tratamiento que pueden realizar los diversos
|
|
navegadores respecto a las listas o menús es conveniente que
|
|
incluyas
|
|
en cada lista una opción que esté
|
|
seleccionada (normalmente con un
|
|
valor nulo o neutro) para evitar que el navegador envíe como
|
|
seleccionado el primer valor de la lista aunque no lo haya indicado el
|
|
usuario.</p>
|
|
|
|
<p>Si quieres modificar una lista de selección o
|
|
cuadro de menú ya creados añadiendo o eliminando
|
|
opciones solo podrás hacerlo desde la pestaña <img style="width: 99px; height: 21px;" alt="Código fuente" src="../imagenes/pestanacodigofuente.png"></p>
|
|
|
|
</div>
|
|
|
|
Habrás observado que en el panel de creación de
|
|
la lista / menú existe un botón <img style="width: 110px; height: 24px;" alt="Añadir grupo" title="Añadir grupo" src="imagenes/aniadirgrupo.png">.
|
|
Cuando estamos elaborando un listado cuyos ítems se pueden
|
|
agrupar en categorías (por ejemplo la confección
|
|
de un
|
|
menú en el que se pudiera elegir entre varios primeros
|
|
platos,
|
|
varios segundos y varios postres) es un recurso interesante para
|
|
organizar visualmente los datos del listado. Cuando utilizamos esta
|
|
posibilidad veremos que las opciones de cada grupo aparecen encerradas
|
|
entre las etiquetas de apertura y cierre de optgroup como puede verse
|
|
en el siguiente ejemplo que muestra un posible grupo de postres dentro
|
|
de un menú<br>
|
|
|
|
<div class="codigo">
|
|
<p><code>...</code></p>
|
|
|
|
<p><code><optgroup label="postres"></code></p>
|
|
|
|
<p class="indentado25"><code><option>fruta
|
|
</option><br>
|
|
|
|
<option>sorbete</option><br>
|
|
|
|
<option>flan</option><br>
|
|
|
|
<option>tarta</option></code></p>
|
|
|
|
<p><code></optgroup></code></p>
|
|
|
|
<p><code>...</code></p>
|
|
|
|
<p> El atributo label sirve para especificar el nombre
|
|
que recibirá el grupo de opciones</p>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 66" title="Actividad 66" src="../imagenes/numeracion/sesentayseis.gif">
|
|
<ul>
|
|
|
|
<li>Abre el
|
|
archivo <strong>actividad65.html </strong>y
|
|
añade una lista de selección basándote
|
|
en la idea
|
|
apuntada en párrafos anteriores para la
|
|
confección de un menú.</li>
|
|
|
|
<li>Guarda el archivo como <strong>actividad66.html</strong>
|
|
y<strong> </strong>comprueba el resultado visual.<br>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<p><br>
|
|
|
|
</p>
|
|
|
|
<h4>Botones de
|
|
acción </h4>
|
|
|
|
<p><img class="flotder" style="width: 303px; height: 174px;" alt="Panel para inserter el botón de envío" title="Panel para inserter el botón de envío" src="imagenes/botonenvio.png"> El último tipo de
|
|
control de uso habitual en
|
|
los formularios es el
|
|
botón que se utiliza para proceder al envío o la
|
|
eliminación de los datos. Para crear los botones accederemos
|
|
mediante la opción de menú <span class="refmenu">insertar <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
formulario <img src="../imagenes/flechamenu.png" height="13" width="14"> campo de formulario <img style="width: 14px; height: 13px;" src="../imagenes/flechamenu.png"> botón de
|
|
envío (o
|
|
botón de restablecimiento)</span> o su
|
|
homóloga al desplegar el listado en el icono<img style="width: 73px; height: 41px;" alt="Formulario" title="Formulario" src="imagenes/icoformulario.png">
|
|
de la barra de herramientas.</p>
|
|
|
|
<p>Si dejamos en blanco los apartados nombre del campo y valor
|
|
del campo el programa especifica únicamente el tipo y deja
|
|
que sea el navegador el que adjudique el texto que
|
|
aparecerá en el botón en cada caso. Los botones
|
|
que tienes a continuación están creados de esta
|
|
forma, por lo que el texto que estás viendo en ellos es el
|
|
que ha establecido el navegador con el que ves la página.</p>
|
|
|
|
<form name="form5" class="centro"> <input type="submit"> <input type="reset"></form>
|
|
|
|
<div class="codigo">
|
|
<p>Sin embargo podemos especificar estos campos como se ve en el
|
|
siguiente ejemplo y su resultado.</p>
|
|
|
|
<p><code><input type="submit"
|
|
name="submit" value="Enviar"><br>
|
|
|
|
<input type="reset" name="reset" value="Borrar datos"></code><br>
|
|
|
|
</p>
|
|
|
|
<form name="form6" class="centro"> <input name="submit" value="Enviar" type="submit"> <input name="reset" value="Borrar datos" type="reset"></form>
|
|
|
|
<p>Por comodidad lo más sencillo es hacer que los
|
|
atributos
|
|
<code>type</code> y <code>name</code> sean
|
|
coincidentes en cada uno de los casos. En el atributo
|
|
<code>value</code> pondremos el texto que queremos que
|
|
aparezca en el
|
|
botón.</p>
|
|
|
|
</div>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 67" title="Actividad 67" src="../imagenes/numeracion/sesentaysiete.gif">
|
|
<ul>
|
|
|
|
<li>Abre el archivo
|
|
<strong>actividad66.html</strong>
|
|
y
|
|
añade botones de envío y restablecimiento,
|
|
especificando
|
|
en el campo value el rótulo que quieres que aparezca en cada
|
|
uno
|
|
de ellos.</li>
|
|
|
|
<li>Guarda el archivo como <strong>actividad67.html</strong>
|
|
y ábrelo en el navegador. En este
|
|
momento
|
|
podrás comprobar el funcionamiento completo del formulario
|
|
ya
|
|
que dispones de un botón de envío que
|
|
lanzará el
|
|
programa de correo con los datos que hayas introducido al cumplimentar
|
|
los diversos controles que has introducido hasta el momento. </li>
|
|
|
|
<li>Consulta tu buzón de correo y comprueba si te ha
|
|
llegado el mensaje y cómo lo ha hecho.
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<h4>Añadir estructura a los formularios</h4>
|
|
|
|
<br>
|
|
|
|
<p>En muchas ocasiones los formularios incluyen controles que
|
|
presentan
|
|
una clara relación que permitiría agruparlos
|
|
formando una categoría. Por ejemplo, podríamos
|
|
agrupar los controles para recoger nombre, apellidos,
|
|
dirección y teléfono bajo la categoría
|
|
de datos de contacto. Para hacerlo utilizaremos la opción de
|
|
menú <span class="refmenu">insertar <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
formulario <img src="../imagenes/flechamenu.png" height="13" width="14"> definir conjunto de campos</span> o su
|
|
homóloga al desplegar el listado en el icono<img style="width: 73px; height: 41px;" alt="Formulario" title="Formulario" src="imagenes/icoformulario.png">
|
|
de la barra de herramientas.</p>
|
|
|
|
<form method="post" action=" " name="form7">
|
|
<fieldset><legend>Datos de contacto</legend>Nombre:
|
|
<input size="25" name="Nombre"> Apellidos: <input size="40" name="apellidos">
|
|
<p>Dirección: <input size="45" name="direccion"> Teléfono: <input size="9" name="telefono"></p>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
<p>Además de la facilidad de interpretación
|
|
visual que introduce este tipo de agrupamiento también tiene
|
|
importancia el agrupamiento de controles desde el punto de vista de
|
|
accesibilidad, ya que se facilita la navegación para los
|
|
agentes de usuario basados en voz que pueden reproducir correctamente
|
|
el agrupamiento.</p>
|
|
|
|
<p>La creación de un grupo de campos puede hacerse
|
|
tanto como
|
|
paso previo, creando primero el grupo e incluyendo posteriormente los
|
|
diferentes controles, como a posteriori, arrastrando para seleccionar
|
|
los rótulos y controles que se agruparán y
|
|
creando para
|
|
ellos el conjunto de campos.</p>
|
|
|
|
<p>El código que se genera con este tipo de
|
|
agrupamientos es el siguiente:</p>
|
|
|
|
<div class="codigo">
|
|
<p><code><fieldset></code></p>
|
|
|
|
<p><code><legend>Datos de
|
|
contacto</legend></code></p>
|
|
|
|
<code>... rótulos y controles ...<br>
|
|
|
|
</code>
|
|
<p><code></fieldset></code><br>
|
|
|
|
Como puede verse la etiqueta que establece el agrupamiento es <code>fieldset</code>,
|
|
mientras que <code>legend</code> recoge el
|
|
rótulo con el que se identifica al mismo.</p>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 68" title="Actividad 68" src="../imagenes/numeracion/sesentayocho.gif">
|
|
<ul>
|
|
|
|
<li>Abre el
|
|
archivo<strong> actividad67.html </strong>y
|
|
agrupa aquellos controles para los que esta técnica resulte
|
|
adecuada. Recuerda que puedes hacerlo con un conjunto de campos ya
|
|
existentes o creando primero el agrupamiento y rellenándolo
|
|
luego con los campos necesarios.</li>
|
|
|
|
<li>Guarda el archivo como <strong>actividad68.html </strong>y
|
|
ábrelo en el navegador para
|
|
comprobar el
|
|
aspecto visual que adquiere el formulario. Puedes hacer un
|
|
envío
|
|
para ver que el conjunto de campos no tiene repercusión en
|
|
el
|
|
resultado que se envía. <br>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<br>
|
|
</div>
|
|
</body>
|
|
</html>
|