HTML5: How to define one or more forms the select field belongs to?

Last update on February 12 2024 12:52:31 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to define one or more forms the select field belongs to</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<form method="POST" action="https://www.w3resource.com/html-css-exercise/basic/solution/select-form-answer-demo.php" id="form1"><!-- Start of first form with method, action, and id attributes -->
First name: <input type="text" name="fname"><br><!-- Text input field for first name -->
<input type="submit"><!-- Submit button for the form -->
</form><!-- End of first form -->
<br><!-- Line break for spacing -->
<select name="languages" form="form1"><!-- Start of dropdown menu with name and form attributes -->
<option value="PHP">PHP</option><!-- First option in the dropdown menu -->
<option value="ASP">ASP</option><!-- Second option in the dropdown menu -->
<option value="Ruby">Ruby on Rails </option><!-- Third option in the dropdown menu -->
</select><!-- End of dropdown menu -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a form and a dropdown menu.
The form collects user input for the first name and submits it to a PHP script when the submit button is clicked.
The dropdown menu allows users to select a programming language.
The dropdown menu is associated with the first form using the form attribute. This means that when the form is submitted, the selected value in the dropdown menu will also be included in the form data.
Associating form elements like this allows for better organization and management of form data, especially when dealing with multiple forms on a single page.

Live Demo:

See the Pen select-form-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page