La etiqueta < opción > define una opción en una lista de selección . La etiqueta <option> generalmente se usa con el atributo de valor para especificar qué valor debe enviarse al servidor para su posterior procesamiento. Cuando se crea una lista desplegable usando el elemento <select> , la primera opción o la primera opción definida por la etiqueta <option> se ve como la opción seleccionada.
Ejemplo 1: El siguiente ejemplo demuestra que la primera opción será preseleccionada.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#container {
margin: 0 auto;
height: 300px;
width: 650px;
border: 5px solid black;
background-color: rgb(104, 241, 104);
opacity: 0.5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.courses {
height: 60px;
width: 130px;
border: 2px solid black;
font-family: cursive;
}
</style>
</head>
<body>
<div id="container">
<h1 id="heading1">
Welcome to GeeksforGeeks
</h1>
<select class="courses">
<option value="tag">Choose Course</option>
<option value="Option A">Python</option>
<option value="Option B">DSA</option>
<option value="Option C">C++</option>
<option value="Option C">Java</option>
</select>
</div>
</body>
</html>
Salida: La primera opción “Elegir curso” está preseleccionada por defecto. Pero esto no está limitado, también podemos especificar que cualquier otra opción debe ser preseleccionada cuando la página se carga en HTML5. Esto se puede hacer usando el atributo «seleccionado» . Esto se demuestra en el siguiente ejemplo.
preseleccionado
Ejemplo 2: El siguiente ejemplo demuestra la preselección de alguna otra opción utilizando el atributo seleccionado .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#container {
margin: 0 auto;
height: 300px;
width: 650px;
border: 5px solid black;
background-color: rgb(104, 241, 104);
opacity: 0.5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.courses {
height: 60px;
width: 130px;
border: 2px solid black;
font-family: cursive;
}
</style>
</head>
<body>
<div id="container">
<h1 id="heading1">
Welcome to GeeksforGeeks
</h1>
<select class="courses">
<option value="tag">Choose Course</option>
<option value="Option A">Python</option>
<option value="Option B" selected>DSA</option>
<option value="Option C">C++</option>
<option value="Option C">Java</option>
</select>
</div>
</body>
</html>
Salida: Se preselecciona la tercera opción “DSA”. Esto se debe al uso del atributo «seleccionado» que se ha especificado en la etiqueta de opción de «DSA». Podemos preseleccionar cualquier opción con solo especificar el atributo seleccionado en su respectiva etiqueta de opción .
Publicación traducida automáticamente
Artículo escrito por tanyagarg3434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA