HTML Seleccionar Atributos Javascript

| | | | | | | | | | | | | | | | | | | | | |

El còdigo HTML "select" La etiqueta crea una lista de la cual un usuario puede seleccionar una o m√∫ltiples opciones de archivo. A "select" la etiqueta debe contener una o más "option" etiquetas que representan las opciones entre las que un usuario puede seleccionar.

Los cuadros de selecciòn son una parte importante de muchos formularios web. Los cuadros de selecciòn le permiten aceptar la entrada del usuario y limitar las opciones que un usuario puede elegir a las que usted haya especificado.

La etiqueta HTML "select" crea un elemento de formulario que proporciona un lista de opciones entre las que el usuario puede seleccionar una o varias. El elemento "option" especifica las opciones que aparecen en un cuadro de selecciòn.

Este tutorial explica còmo utilizar el HTML "select" etiqueta. Nos referiremos a un ejemplo para ayudarlo a comenzar a usar esta etiqueta.

Formularios HTML

Los formularios son una parte esencial de muchos sitios web y le permiten aceptar datos de un usuario. que puede procesar en su sitio web. Por ejemplo, si está dise√±ando un sitio web para una cafeterìa, es posible que desee crear un formulario que acepte comentarios de los clientes.

En HTML, el "formulario" La etiqueta se usa para declarar un formulario. Luego, puede usar elementos HTML como "input" y seleccionar para definir los datos que recopilará el formulario. En este tutorial, nos centraremos en la etiqueta "select" y en còmo se puede utilizar para recopilar datos en un formulario.

Para obtener más informaciòn sobre HTML formularios, lea nuestra guìa para principiantes sobre formularios HTML .

HTML "select" Etiqueta

La etiqueta HTML "select" crea una lista de la que el usuario puede seleccionar una o varias opciones. Una "option" elemento indica una opciòn individual en el "select" etiqueta.

La etiqueta "select" crea un campo de formulario que, cuando se hace clic, muestra una lista desplegable con opciones entre las que el usuario puede elegir.

La sintaxis de la etiqueta "select" es la siguiente:

Por sì misma, la etiqueta "select" no tiene opciones. Necesitamos usar la etiqueta "option" etiqueta para definir las opciones que aparecen en una etiqueta "select".

Aquì está la sintaxis de la "option & gt ; etiqueta:

La etiqueta "option" aparece en una etiqueta "select". En este ejemplo, también s especificò el atributo value con nuestra etiqueta "select".

Esto se utiliza para almacenar el valor de los datos que se enviarán al servidor si el el usuario selecciona una opciòn en particular. En este caso, si un usuario selecciona Opciòn uno de la lista, se enviará optionOne al servidor.

Cada "opciòn & gt ; debe tener un atributo de valor especificado.

La etiqueta HTML "select" es compatible con todos los principales navegadores modernos.

Por qué ¿Deberìa utilizar la etiqueta "select" ¿Etiqueta HTML?

El uso de una etiqueta "select" es beneficioso cuando desea restringir los valores que un usuario puede ingresar en un campo de formulario. A continuaciòn, se muestran algunos ejemplos en los que la etiqueta "select" La etiqueta puede ser √∫til para:

En estos casos, las opciones son limitadas . El uso de un men√∫ desplegable significa que puede obtener una respuesta que tenga sentido para su còdigo. Esto se debe a que el usuario no puede ingresar ning√∫n valor que desee, como podrìa hacerlo en un campo seleccionado, lo que quizás no pueda anticipar.

HTML "select" Ejemplo

Supongamos que estamos creando un formulario web para una panaderìa local. Se nos ha pedido que creemos un formulario que permita un usuario para pedir pan. Este formulario debe presentar una lista desplegable de panes de entre los cuales el usuario puede elegir un pan. Las opciones que deben aparecer son:

Por defecto, se debe seleccionar Blanco puro.

Para crear este men√∫ desplegable HTML , podrìamos usar el siguiente còdigo:

Nuestro còdigo devuelve:

Primero, usamos un etiqueta "select" para definir nuestra lista de selecciòn. Especificamos el atributo name, que especifica el nombre del control de formulario de selecciòn, y le asignamos al atributo el valor breadType.

A continuaciòn, usamos cuatro etiquetas "option" para crear la lista de opciones que se deben presentar al usuario. Cada una de estas etiquetas "option" tiene un atributo value especificado. Este atributo almacena el valor de la opciòn que se enviará al servidor cuando el usuario envìe el formulario.

La primera etiqueta "option", cuyo texto de etiqueta muestra Blanco liso, también tiene un atributo seleccionado especificado. Esto hace que Plain White sea la opciòn seleccionada por defecto.

Podemos permitir que nuestro usuario seleccione m√∫ltiples opciones en la lista usando el atributo m√∫ltiple:

El atributo m√∫ltiple es una palabra clave. Esto significa que no es necesario utilizar un signo igual para asignar un valor al atributo.

Para seleccionar varios valores, mantenga presionado el botòn Ctrl en Windows o el botòn Cmd en Mac.

HTML "select" Atributos de etiqueta

La etiqueta "select" tiene algunos atributos HTML especìficos que se pueden aplicar a la etiqueta. . Estos son los siguientes:

< / tbody>
Atributo Valor Descripciòn
autofocus autofocus Da el foco de la lista desplegable cuando se carga el documento.
desactivado desactivado Indica que el La lista desplegable está deshabilitada (por lo que un usuario no puede enviar un valor usando la lista)
formulario form_id Especifica el formulario con el que se vincula un elemento "select"
m√∫ltiple m√∫ltiple Permite a los usuarios seleccionar varias opciones. < / td>
nombre nombre Especifica el nombre del elemento.
obligatorio obligatorio Indica que el campo del formulario debe completarse antes de enviarse.
tamaño número Especifica el número de opciones que se deben mostrar al usuario.

Conclusiòn

El elemento HTML "select" crea un campo de formulario que muestra una lista de valores predeterminados. Un usuario puede elegir uno o varios valores de la lista. Los campos "select" son √∫tiles cuando desea que un usuario seleccione un valor de una lista predefinida de valores potenciales.

Este tutorial explica, con referencia a un ejemplo, còmo puede utilizar la etiqueta "select" etiqueta para crear un campo de formulario de lista desplegable en HTML.

¿Desea obtener más informaciòn sobre la programaciòn HTML? Consulte nuestra guìa de còmo aprender HTML . Esta guìa contiene los mejores consejos sobre còmo aprender HTML y una lista de recursos de aprendizaje para ayudarlo a desarrollar sus conocimientos.