Contactos
hogar › ›

Elementos de formulario HTML: lista desplegable (selección, opción, etiquetas optgroup), campo de texto (área de texto), así como el uso de etiqueta, conjunto de campos y leyenda. Seleccionar de una lista desplegable en HTML Cómo seleccionar una página en HTML

Un cuadro combinado, también llamado menú desplegable, es uno de los elementos de formulario flexibles y convenientes. Dependiendo de la configuración, puede seleccionar uno o más valores de la lista. La ventaja de una lista es su compacidad y versatilidad; la lista puede ocupar una o varias líneas y puede seleccionar uno o más valores de ella. El cuadro combinado se crea de la siguiente manera.

Etiqueta , que establece la altura de la lista; el ancho de la lista se determina automáticamente en función de la longitud del texto que contiene;

Atributos de etiqueta , con el que podrás cambiar la presentación de la lista.

múltiple

La presencia de múltiples le dice al navegador que muestre el contenido del elemento.



nombre

Define un nombre de elemento único. Se agrega el atributo múltiple, luego puede seleccionar más de un elemento.

valor

Define el valor del elemento de la lista que se enviará al servidor. Se envía un par “nombre/valor” al servidor, donde el nombre se especifica mediante el atributo de nombre de la etiqueta.



Agrupar elementos de la lista

Si la lista es bastante extensa, tiene sentido agrupar sus elementos en bloques para garantizar que la lista sea visual y fácil de trabajar. La etiqueta se utiliza para este propósito. . Es un contenedor dentro del cual se ubican las etiquetas. es que no está resaltado como un elemento de lista normal, se enfatiza en negrita y todos los elementos incluidos en este contenedor se desplazan a la derecha de su posición original. Para agregar un título de grupo, use el atributo de etiqueta, como se muestra en el Ejemplo 3.

Ejemplo 3: agrupación de elementos de lista

HTML5 IE Cr Op Sa Fx

Lista



El resultado del ejemplo se muestra en la Fig. 1.

Arroz. 1. Lista agrupada

Hola, queridos lectores del blog. Como parte de nuestro estudio de las complejidades, como siguiente tarea, continuaremos analizando los detalles de la creación de formularios en el sitio utilizando los adecuados.

Hoy veremos cómo crear. listas desplegables (desplegables), incluida la opción múltiple, usando selección y opción, cómo construir campo de texto a través del área de texto, y también hablaremos sobre la posibilidad de ampliar la funcionalidad de los formularios mediante el uso de etiquetas. conjunto de campos, etiqueta y leyenda.

Permítame recordarle que cualquier formulario presente en la página se crea utilizando y está destinado a ingresar cualquier información del usuario y enviarla al servidor (ejemplo -).

Desafortunadamente, las herramientas del lenguaje de marcado de hipertexto no nos permiten procesar directamente esta información, por lo que usando HTML creamos solo la apariencia del formulario y enviamos los datos necesarios para su procesamiento. Para ello, se crea específicamente un archivo especial en el servidor web, escrito en uno de los idiomas del servidor (normalmente PHP). Digamos que, para recibir comentarios, puede crear un archivo mail.php, que será el controlador.

Al utilizar en la práctica la información obtenida en esta publicación, no se olvide de cómo debe verse, donde los códigos de todos los elementos visibles de la página, incluidos los formularios, siempre se ubican dentro de la etiqueta del cuerpo.

Esta información es extremadamente necesaria, porque incluso si utiliza todas las herramientas de desarrollo modernas integradas en ellas (permítame recordarle que fue el primer inicio de sesión en la implementación de esta funcionalidad), debe comprender claramente el mecanismo para usar las etiquetas principales, luego editar el código HTML, cuya necesidad surge de vez en cuando, se convertirá en una actividad agradable.

2. Múltiple— este atributo, que no tiene parámetros, permite la selección múltiple, a diferencia del ejemplo anterior, donde solo se puede seleccionar un elemento (línea). Intente seleccionar varias líneas en esta lista con el mouse a la vez (una a la vez en cualquier lugar, manteniendo presionada la tecla Ctrl o usando Shift, siguiendo una fila tras otra):

3. Tamaño— establece la altura de la lista desplegable, es decir, el número de líneas mostradas. Si el atributo múltiple está presente y el valor de tamaño no se especifica (como en el ejemplo anterior), entonces por defecto se muestran cuatro líneas, y, por ejemplo, con size="5" se verán cinco:

Leyenda del conjunto de campos de etiqueta de área de texto de opción

4. Requerido(no tiene parámetros): define que se debe realizar una selección antes de enviar datos al procesador. Si no se selecciona un elemento de la lista, entonces no se enviarán los datos del formulario:

Leyenda del conjunto de campos de etiqueta de área de texto de opción

5. Enfoque automático(no importa): establece el foco en la lista inmediatamente después de que se carga la página. Además, si el usuario está acostumbrado a realizar la mayoría de las acciones usando teclas, entonces un enfoque preconfigurado de este tipo le ayudará a realizar selecciones de la lista usando las flechas del teclado sin usar el mouse:

6. Desactivado(sin parámetros): bloquea el acceso a la lista (la deshabilita). En la práctica, generalmente se usa junto con scripts en los casos en que es necesario habilitar una lista desplegable solo cuando se cumplen ciertas condiciones:

7. Forma— comunica la lista con uno o más formularios a los que pertenece, pero se encuentra fuera del contenedor

. En este caso, el parámetro se escribe como el valor del atributo del formulario. identificación de atributo global que se agrega a la etiqueta del formulario:

Seleccione la opción Leyenda del conjunto de campos de etiqueta de área de texto de la lista

No confunda el atributo de etiqueta de selección con la etiqueta del formulario principal. En el ejemplo anterior, el atributo id="data" se agregó a la etiqueta del formulario y form="data" a la etiqueta de selección, lo que hizo posible asociar la lista desplegable con un formulario específico.

Atributos de etiqueta de opción

1. Valor— define el valor de la lista desplegable que se enviará al servidor (procesador de formularios). En realidad, al controlador se le envía un nombre, que se especifica mediante el atributo de nombre de la etiqueta de selección, y valor valor(para este ejemplo - 1, 2, 3, 4, 5), correspondiente a la línea seleccionada de la lista desplegable:

Leyenda del conjunto de campos de etiqueta de área de texto de opción

2. Desactivado— bloquea la selección de un elemento de la lista desplegable.

Leyenda del conjunto de campos de etiqueta de área de texto de opción

Como puede ver en el ejemplo, la línea "Opción" está inactiva y no se puede seleccionar.

3. Etiqueta— muestra el contenido del texto (que es su valor) de un elemento de lista en particular. Si hay una etiqueta presente, se imprime una línea idéntica al valor de este atributo y se ignora el contenido del texto dentro de la etiqueta de opción. Lo mismo sucede si los contenidos entre completamente ausente.

Etiqueta Área de texto Etiqueta Etiqueta Etiqueta Conjunto de campos Leyenda de etiqueta

Mirar. En el ejemplo anterior, la primera línea para la opción en el código está vacía (en el lado izquierdo de la tabla), pero el parámetro label="Etiqueta de opción" está escrito, como resultado, este texto en particular aparece en la lista (en el lado correcto). La segunda línea de código contiene el texto "Etiqueta Textarea" como contenido de la etiqueta de opción, pero el menú desplegable de la derecha muestra la palabra "Textarea" para que coincida con el valor de label="Textarea".

4. Seleccionado— selecciona el elemento actual de la lista desplegable:

Leyenda del conjunto de campos de etiqueta de área de texto de opción

Si el atributo múltiple está presente, entonces es posible seleccionar más de un elemento:

Leyenda del conjunto de campos de etiqueta de área de texto de opción

Atributos de la etiqueta optgroup

Si es necesario ordenar la lista desplegable de alguna manera, por ejemplo, dividirla en grupos, entonces para cada uno de estos grupos se utiliza un contenedor, que consta de las etiquetas optgroup de apertura y cierre, que contiene parte de los elementos de la lista desplegable. Sin embargo, existen dos atributos para configurar dicha lista desplegable.

1. Etiqueta— establece el nombre de cada grupo como parámetro:

Leyenda del conjunto de campos de etiqueta de área de texto de opción

Lo mismo, pero con múltiples y size="7" de la etiqueta de selección:

Leyenda del conjunto de campos de etiqueta de área de texto de opción

2. Desactivado(sin valores): bloquea la selección de elementos del grupo en relación con el cual está instalado, y los elementos inactivos generalmente se resaltan en gris:

Leyenda del conjunto de campos de etiqueta de área de texto de opción

Un breve vídeo te resultará útil aquí:

Campo de texto en un formulario usando área de texto

Otro elemento de formulario para el sitio que consideraremos es un campo con la capacidad de ingresar texto de varias líneas. Se puede crear usando la etiqueta de área de texto. Sin los atributos predeterminados, aplicar esta etiqueta producirá el siguiente resultado:

Ingrese texto:

Ingrese texto:

Puede realizar saltos de línea en el campo y el texto se transmitirá al procesador en el servidor, teniendo en cuenta los cambios realizados. El campo se puede ampliar en ancho y largo haciendo clic en la esquina inferior derecha, que está marcada con dos franjas diagonales.

Intentemos ahora agregar varios atributos con parámetros al código original:

1. Nombre- define el nombre del área de texto como un valor para identificarlo después de enviar los datos del formulario cuando se procesa en el servidor.

2. columnas— ancho del campo, que se especifica como parámetro mediante el número de caracteres idénticos adyacentes colocados horizontalmente. El valor predeterminado es 20.

3. Filas— la altura del campo de texto, determinada por el número de líneas. Si el número de líneas de texto ingresadas por el usuario es mayor que el valor especificado por este atributo, aparecerá una barra de desplazamiento vertical a la derecha.

4. Longitud máxima— especifica el número máximo de caracteres que se pueden colocar en el campo de texto. Si se excede el límite, no será posible realizar más entradas.

A continuación se muestra un ejemplo con todos los atributos anteriores, el efecto de cada uno de los cuales puede verificar usted mismo simplemente colocando la cantidad requerida de letras y líneas en el área de texto (simplemente puede ingresar el mismo carácter varias veces):

Ingrese texto:

Ingrese texto:

5. Longitud mínima— especifica el número mínimo de caracteres que se deben ingresar en el área de texto. Si el usuario intenta enviar un texto con menos caracteres, el navegador mostrará un mensaje corto con información que contendrá una mención de la necesidad de complementar el contenido del formulario y cuántos caracteres ya se han ingresado.

7. Solo lectura(sin parámetros): si adjunta este atributo al área de texto, los usuarios no podrán editar el campo de texto y será de solo lectura. Pero puedes centrarte en él (mueve el cursor al campo y haz clic izquierdo), así como seleccionar y copiar (parcial o completamente) el texto:

Algunos atributos más que implementan funciones adicionales al completar campos:

8. Autocompletar— especifica si el navegador debe proporcionar sugerencias cuando el usuario completa un formulario basado en datos ingresados ​​previamente y brinda la posibilidad de insertar automáticamente el texto apropiado.

Sólo tiene dos parametros: en(habilitado) y apagado(apagado). Aquí hay un ejemplo de código:

Ingrese texto:

Este atributo con el valor "activado" funciona solo cuando el autocompletado de campos de formulario está habilitado en el navegador web de un usuario en particular.

9. Envoltura- establece las reglas del navegador para el ajuste de líneas en el área de texto usando tres valores:

Suave— un conjunto de caracteres que no cabe en el ancho del campo se transfiere automáticamente a una nueva línea. En este caso, el procesador el texto se enviará como una línea. Si el usuario transfiere texto en cualquier lugar deseado usando la tecla "Entrar", dicha transferencia se guarda al enviar el formulario web.

Ingrese texto:

Ingrese texto:

Duro— los guiones se crean automáticamente si el texto no cabe en el ancho del campo y, cuando se envía al procesador, se guardarán los lugares de dichos guiones. Esta opción sólo se utiliza en junto con el atributo cols:

Ingrese texto:

Ingrese texto:

Apagado— desactivar los saltos de línea. Si imprime un fragmento de texto sin transferencia mecánica usando la tecla "Enter", todo el texto se colocará en una línea y aparecerá una barra de desplazamiento horizontal:

Ingrese texto:

Ingrese texto:

10. Enfoque automático(no tiene parámetros): inicia centrándose en el campo de texto al cargar la página con el formulario.

11. Desactivado- a diferencia del atributo de solo lectura (que también prohíbe editar el contenido del campo, pero permite centrarse en él), bloquea completamente el acceso al área de texto, que suele estar coloreada en gris:

Descripción

Etiqueta que establece la altura de la lista.

dentro del formulario. Esto también es necesario cuando se accede a los datos de la lista mediante scripts.

Sintaxis

Le permite saltar a una lista usando algún atajo de teclado.

Establece la lista para recibir atención después de que se haya cargado la página.

Bloquea el acceso y modificación de un elemento.

HTML5 IE Cr Op Sa Fx

Asocia una lista con un formulario.



El nombre del elemento que se enviará al servidor o al que se accederá mediante scripts.

).

Es necesario seleccionar la lista antes de enviar el formulario.

El número de líneas de lista que se mostrarán.

Define la secuencia de transición entre elementos al presionar la tecla Tab

</span> etiqueta de cierre <select><span>

Ejemplo de uso de un elemento

) es posible desactivar un determinado elemento del menú (parámetro). El atributo se puede utilizar junto con scripts, por ejemplo, hasta que se cumpla alguna condición el parámetro está inactivo.

en la lista desplegable

A Opción A Opción C , que se utiliza para agrupar datos relacionados en una lista desplegable

Ejemplo de uso de etiquetas HTML . El atributo de etiqueta del elemento especifica el nombre del grupo seleccionado, escrito en negrita:

En el siguiente ejemplo, utilizando el atributo booleano deshabilitado, deshabilitaremos un grupo (" Grupo B"):

</span> Un ejemplo de uso del atributo deshabilitado de una etiqueta HTML <optgroup><span>

El resultado de nuestro ejemplo:

Deshabilitar lista y selección múltiple

</span> Los atributos de etiquetas múltiples y deshabilitados <select><span>

En este ejemplo, creamos dos listas desplegables. Para la primera lista, utilizamos el atributo deshabilitado, que evita la interacción con la lista (la deshabilita).

Para la segunda lista, utilizamos el atributo múltiple, que indica que es posible seleccionar varias opciones en la lista a la vez (a través de Control en Windows y a través de Dominio en Mac).

) es posible desactivar un determinado elemento del menú (parámetro). El atributo se puede utilizar junto con scripts, por ejemplo, hasta que se cumpla alguna condición el parámetro está inactivo.

Área de texto

El resultado de nuestro ejemplo:

Deshabilitar el área de texto

Por analogía con los elementos de etiqueta discutidos anteriormente.




tipo = "enviar" nombre = "enviarInfo" valor = "enviar" > !}

En este ejemplo, hemos creado dos áreas de texto (el elemento