En este artículo, aprenderemos a establecer el valor predeterminado para el elemento de selección HTML y también comprenderemos su implementación a través de los ejemplos.
La etiqueta de selección en HTML se utiliza para crear una lista desplegable de opciones que se pueden seleccionar . La etiqueta de opción contiene el valor que se usaría cuando se selecciona. El valor predeterminado del elemento de selección se puede establecer utilizando el atributo ‘seleccionado’ en la opción requerida. Este es un atributo booleano. La opción que tiene el atributo ‘seleccionado’ se mostrará de forma predeterminada en la lista desplegable. Incluso podemos establecer el atributo seleccionado después de cargar la página con la ayuda de Javascript.
Sintaxis:
<option value="value" selected>Option Name</option>
Ejemplo 1: Este ejemplo ilustra el uso del atributo seleccionado al especificar la opción preseleccionada que se mostrará primero en la lista desplegable.
HTML
<!DOCTYPE html> <html> <head> <title>Set the default value for <select> element</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b> How to set the default value for an HTML <select> element? </b> <p>The Starter option will be selected by default</p> <p>Choose your plan below:</p> <select name="plan" id="plan"> <option value="free">Free</option> <option value="starter" selected>Starter </option> <option value="professional">Professional</option> <option value="corporate">Corporate</option> </select> </body> </html>
Producción:
atributo seleccionado
Ejemplo 2: Esto también se puede usar para agregar mensajes como ‘Seleccione una opción’ en la lista. Esta opción tendría el atributo oculto y deshabilitado además de seleccionado.
HTML
<!DOCTYPE html> <html> <head> <title>Set the default value for <select> element</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b>How to set the default value for an HTML <select> element? </b> <p>The Select an Option would be shown by default.</p> <p>Choose your plan below:</p> <select name="plan" id="plan"> <option value="none" selected disabled hidden>Select an Option</option> <option value="free">Free</option> <option value="starter">Starter </option> <option value="professional">Professional</option> <option value="corporate">Corporate</option> </select> </body> </html>
Producción:
Atributo seleccionado deshabilitado
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA