HTML5: How to specify the value to be sent to a server?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata about the document -->
<meta charset="utf-8"><!-- Specifies the character encoding of the document -->
<title>How to specify the value to be sent to a server</title><!-- Sets the title of the document -->
</head><!-- Ends the head section -->
<body><!-- Contains the content of the document -->
<form method="post" action="https://www.w3resource.com/html-css-exercise/basic/solution/input-list-answer-demo.php"><!-- Defines a form with method "post" and action URL -->
<select name="animal"><!-- Defines a drop-down list with the name "animal" -->
<option value="carnivorous">Lion</option><!-- Defines an option "Lion" with the value "carnivorous" -->
<option value="largest cat species">Tiger</option><!-- Defines an option "Tiger" with the value "largest cat species" -->
<option value="large mammals">Elephant</option><!-- Defines an option "Elephant" with the value "large mammals" -->
<input type="submit"><!-- Defines a submit button -->
</form><!-- Ends the form -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document begins with a declaration of its type and version (<!DOCTYPE html>).
The <html> element encloses the entire HTML document.
The <head> section contains metadata about the document, such as character encoding and title.
The <meta charset="utf-8"> tag specifies the character encoding of the document as UTF-8.
The <title> tag sets the title of the document.
Inside the <body> section, there is a <form> element defining a form with method "post" and action URL.
The <select> element defines a drop-down list with the name "animal".
The <option> elements inside the <select> define the different options in the drop-down list, each with a corresponding value.
When the form is submitted, the selected option's value will be sent to the server.

Live Demo:

See the Pen option-value-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page