La tarea es especificar varios formularios a los que pertenece el campo de selección. En una redacción simple, tenemos que averiguar a qué forma pertenece la selección específica. Puede lograr esta tarea utilizando el atributo de formulario.
- seleccionar elemento: se utiliza para crear una lista desplegable en HTML.
- elemento de formulario: se utiliza para crear un formulario para la entrada del usuario.
- atributo de formulario: este atributo le indicará al usuario a qué formulario pertenece el elemento de selección.
Acercarse –
- Primero, cree la página HTML con el elemento de selección dentro del elemento de formulario.
- Cree un elemento de selección fuera del formulario y especifique a qué formulario pertenece con la ayuda del atributo de formulario .
Ejemplo 1 –
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksForGeeks
</h1>
<p>
The form attribute specifies which
form the drop-down list belongs to:
</p>
<form id="carform">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<button>Submit</button>
</form>
<br>
<label for="cars">Choose a car:</label>
<select id="cars" name="carlist" form="carform">
<option value="volvo">Volvo</option>
<option value="maruti">Maruti</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Producción –
Explicación: en el ejemplo anterior, hemos creado el formulario sin el menú desplegable, pero después de crear el menú desplegable con el elemento de selección, lo hemos asignado a la parte del formulario con la ayuda del atributo de formulario.
Ejemplo 2 –
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-size: 20px;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksForGeeks
</h1>
<p>
The form attribute specifies which
form the drop-down list belongs to:
</p>
<form id="countryName">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<button>Submit</button>
</form>
<br>
<label for="country">Choose a country:</label>
<select id="country" name="carlist" form="countryName">
<option value="India">India</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="Australia">Australia</option>
</select>
</body>
</html>
Producción –
Publicación traducida automáticamente
Artículo escrito por volumezero9786 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA