Botones de opción
Los botones de opción se llaman a veces Botones de Radio, y obligan al usuario en elegir sólo un elemento de la lista, como la opción Hombre/Mujer, o en seleccionar un método de pago. (etiqueta_1) El botón de opción HTML se ve así:
TIPO DE ENTRADA=»Radio» Nombre=»Género» Value=»Male «*;Male
TIPO DE ENTRADA=»Radio» Nombre=»Género» Valor=»Mujer»
Después de escribir la etiqueta INPUT, la palabra TYPE viene a continuación. Para los botones de opción, el El tipo es «Radio». El NOMBRE es definitivamente necesario aquí, y tenga en cuenta que el NOMBRE de ambos en nuestro código de arriba es «Género». Usas el mismo nombre para cada grupo de botones de opción que esté añadiendo a su formulario. Así que si quería botones de opción de pago, el código podría ser este:
TIPO DE ENTRADA=»Radio» Nombre=»pago» Value=»CC»>Tarjeta de crédito
TIPO DE ENTRADA=»Radio» Nombre=»pago» Valor=»DC»–> Débito Card
TIPO DE ENTRADA=»Radio» Name=»pago» Value=»PP»>PayPal
Esta vez, cada botón de radio tiene el nombre de «pago». La razón por la que mantener el mismo nombre para cada grupo de botones de opción es simplemente para distinguir un grupo de botones de opción de otro.
El atributo VALOR es bastante útil. Cuando el usuario te envía el formulario usando el botón de envío, estos VALORES serán devueltos. Si usted acaba de tiene Radio1 y Radio2, no sabrás (o no lo recordarás, más probablemente) cuál que el usuario ha seleccionado. Manipular valores con scripts también es mucho más fácil si el Valor es el mismo que el texto que el usuario ve.
Si quieres tener seleccionado un botón de opción por defecto, usa la palabra «Marcado»:
TIPO DE ENTRADA=»Radio» Nombre=»pago» Value=»CC»>Tarjeta de crédito
TIPO DE ENTRADA=»Radio» Nombre=»pago» Valor=»DC»–> Débito Card
TIPO DE ENTRADA=»Radio» Nombre=»pago» Valor=»PP» Comprobado ;PayPal
Colocar una etiqueta en cada botón es muy útil para sus visitantes. Cuando el Si se hace clic en la etiqueta, se seleccionará el botón de opción del que recibe el nombre:
FOR=»R1″ Male</LABEL
TIPO DE ENTRADA=»Radio» Nombre=»Género» ID=»R1″ Value=»Male»>
FOR=»R2″ ;Female</LABEL;
TIPO DE ENTRADA=»Radio» Nombre=»Género» ID=»R2″ Valor=»Mujer»;
En el código anterior, las etiquetas son para los elementos de forma llamados R1 y R2. Nosotros han añadido una identificación correspondiente a cada botón de opción. Fíjese, también, que hemos borró el texto de después del botón de opción. El «Hombre» y el texto «Mujer» está ahora entre las dos etiquetas.
Cajas de verificación
Las casillas de verificación se utilizan para dar a sus usuarios la oportunidad de seleccionar más de una opción de entre una serie de opciones. Con los Botones de Radio, sólo podías seleccionar un artículo; con las casillas de verificación, puede seleccionarlos todos.
El HTML para las casillas de verificación se ve así:
TIPO DE ENTRADA=»Checkbox» Nombre=»Navegador» Valor =»Firefox «*; Firefox
TIPO DE ENTRADA=»Checkbox» Name=»Browser» Value =»Opera «Opera»
De nuevo, puedes añadir una etiqueta para ayudar en la selección:
LABEL FOR=»C1 «Â¡Firefox</LABEL¡;
TIPO DE ENTRADA=»Checkbox» Name=»Browser» ID=»C1″ Value=»Firefox «*;
LABEL FOR=»C2″> Opera </LABEL;
TIPO DE ENTRADA=»Checkbox» Name=»Browser» ID=»C2″ Valor=»Opera «*;
Las casillas de verificación y los botones de radio funcionan de manera similar, y el código HTML es similar, también. Los mismos puntos hechos sobre los botones de radio se aplican a las casillas de verificación. Tenga en cuenta que el TIPO usado, sin embargo: Casilla de verificación.
El código anterior para los botones de opción y casillas de verificación se vería así en el navegador:
Puede tener un cuadro de lista de elementos en sus formularios, ya sea en un formato desplegable o como una lista fija. Así es como se ven los dos en una página web:
El código HTML de la lista desplegable, el predeterminado, es este:
OPCIÓN Valor=»Menos de 16″;Menos de 16</OPCIÓN OPCIÓN Valor=»16 a 25″³;16 a 25</OPCIÓN
OPCIÓN Valor=»26 a 40″³;26 a 40</OPCIÓN
OPCIÓN Valor=»40 a 60″³;40 a 60</OPCIÓN
OPCIÓN Valor=»Más de 60″; Más de 60</OPCIÓN;
Los cuadros de la lista se denominan Select boxes en HTML y utilizan la etiqueta …los preparó.
Cada elemento de su lista necesita una etiqueta de OPCIÓN.
<OPTION Value=»Under 16″> Under 16 </OPCIONES;
No necesitas la etiqueta de OPCIÓN de cierre, si no la quieres, pero está aquí. por el bien de la pulcritud. El texto que quieres que aparezca en la lista, el texto que la gente ve y hace clic, va después del primer paréntesis puntiagudo derecho. El valor tampoco es estrictamente necesario. Cuando se presenta el formulario, la opción el usuario seleccionado le será devuelto. Si falta el atributo de valor, el texto en sí será devuelto.
Si quieres que uno de los elementos de tu lista esté seleccionado por defecto, sólo tienes que elegir el artículo y añadir SELECCIONADO como un atributo. Como esto:
<OPTION Value=»Under 16″ SELECTED 16
La única diferencia entre la lista desplegable y la lista fija es un atributo en la etiqueta de «SELECCIONAR»: TAMAÑO.
<SELECT SIZE=»5″>
El TAMAÑO es el número del artículo en su lista. Si añades este atributo, podrás obtener una lista fija en lugar de una lista desplegable.
Si quieres que tus usuarios puedan elegir más de un elemento de la lista, el atributo a añadir a la etiqueta SELECT es MÚLTIPLE
…SELECT SIZE=»5″ MULTIPLES;
El usuario puede mantener pulsada la tecla CTRL y hacer clic para seleccionar más de un elemento.
Puedes añadir estilos CSS a tus cajas de listas, por supuesto. Aquí hay un estilo que establece propiedades de la fuente usando el selector de HTML:
SELECCIONE {
fuente-familia: Arial, Helvética, sans-serif;
tamaño de la fuente: 18px;
}
Ahora todo lo que tenga la etiqueta HTML SELECT tendrá su fuente y tamaño de fuente cambiados.
En las próximas lecciones, verás cómo añadir contraseñas, y también algo llamado un elemento de forma oculto.
Etiquetas y textareas. Contraseñas, campos ocultos…
TIPO DE ENTRADA=»Checkbox» Name=»Browser» Value =»Opera «Opera»
TIPO DE ENTRADA=»Checkbox» Name=»Browser» ID=»C1″ Value=»Firefox «*;
TIPO DE ENTRADA=»Checkbox» Name=»Browser» ID=»C2″ Valor=»Opera «*;
OPCIÓN Valor=»26 a 40″³;26 a 40</OPCIÓN
OPCIÓN Valor=»40 a 60″³;40 a 60</OPCIÓN
OPCIÓN Valor=»Más de 60″; Más de 60</OPCIÓN;
tamaño de la fuente: 18px;
