Manual de XHTML (página 2)
El valor text en el atributo
type indica que será un campo de texto
Ahora si quisieramos enviar esta
información el agente de usuario armaría cadenas de
texto, con pares del tipo nombre=VALOR1 y apellido=VALOR2
dónde VALOR1 y VALOR2 es la
información escrita en las casillas de texto de Nombre y
Apellido respectivamente, dichos valores se asocian al valor
escrito en el atributo name del input de tipo
text.
El resultado es el siguiente:
Aquí el resultado:
Observen detenidamente como varía el
comportamiento y la apariencia de los cuadros de texto
según los diferentes atributos y valores
especificados.
6. Botones de radio
Estos botones se suelen presentar en grupo y nos permite
elegir una opción entre varias. Para esto se
específican valores iguales para el atributo name,
mientras que para el type utilizamos el valor
radio.
Piquemos código:
Al especificar un valor distinto para name, se
crea un nuevo grupo, mientras que dentro de un mismo grupo
sólo podemos elegir una sola de las opciones.
7. Botón de comprobación checkbox
Ahora mostremos que pasa al poner en el
atributo type el valor checkbox, que convierte a
input en un Botón de
comprobación.
Piquemos algo de código para dos
input de tipo checkbox:
Uno de los input lleva el atributo
checked con el valor checked, de esta forma le
indicamos que debe aparecer marcado por defecto ni bien se
presente el formulario.
Si enviaramos esta información al
servidor, se armarían pares deporte=si y fuma=si en el
caso de que las dos estén marcadas.
8. Botones de envio y de reset
Ahora supongamos que queremos enviar esta
información a algún servidor. Como dijimos existen
dos metodos de envío. Según qué enviaremos y
la tecnología del servidor sabremos por cual optar. Para
indicarle al agente de usuario el envío de
información utilizaremos un botón de envío
especificando el valor submit en el atributo
type.
Probemos crear un cuadro de búsqueda
para Google:
La consulta a Google se formula de de esta
manera
http://www.google.com/search?q=cadena. Para
obtener q=cadena debemos especificar el atributo
name con el valor q, luego cadena
será lo que se introduzca en el cuadro de búsqueda.
Por último el input text enviará toda la consulta
por el método get.
Vean el resultado y testeenlo:
Otro botón muy utilizado, es el de tipo
reset que se encarga de deshacer todas las
modificaciones que haya hecho el usuario sobre el formulario, es
decir regresa todos los elementos anidados bajo el elemento
form a los valores originales especificados en el
documento.
Prueben cambiar el texto dentro del cuadro y luego
presionen Reset
9. Cajas de texto
Las cajas de texto se suelen utilizar para incluir una
cantidad de texto mayor y de varias líneas, para la cual
el input de type text no sería
apropiado.
A picar código:
Los atributos rows y cols,
marcan la cantidad de líneas y el tamaño de ancho
respectivamente, de la caja.
10. Seleccionar con select
Incluyendo el elemento select
podremos armar una lista de selección múltiple,
este elemento se combina con el elemento option para ir
agregando las diferentes opciones.
Ejemplo de código:
De nuevo select cuenta con el
atributo name con el valor fruta.
Sí se enviara esta
información a un servidor, el agente de usuario
armará la cadena de caracteres con el par fruta=Pera que
se enviará por get o post, suponiendo que se
haya elegido la fruta Pera.
11. Elemento label
Este elemento nos permite asociar una cadena de texto a
un control del formulario. Esto supone una cuota de
semántica ya que se identifica al control con un texto y
otra de accesibilidad debido a que los agentes de usuario
permiten utilizar el control mediante el texto
asociado.
Ejemplo de código:
En principio parecen identicas, pero
prueben hacer clic sobre el texto Con label, al hacerlo
la casilla de la izquierda al texto se seleccionara. En cambio al
hacer clic sobre Sin label no ocurre nada.
Siempre que sea posible se recomienda
utilizar el elemento label
12. Agrupando con fieldset
El agrupamiento es un recurso interesante para
estructurar mejor nuestros formularios. El elemento
fieldset nos da la posibilidad de agrupar diferentes
secciones bajo un marco que puede llevar una descripción
al anidarle otro elemento llamado legend.
Escribamos algunos controles y agrupemos bajo dos
grupos:
Código:
Resultado del ejemplo anterior:
Autor:
Ing. Tito Fernando Ale
Nieto
![]() | ![]() ![]() | Página siguiente ![]() |