HTML5: How to specify where to display the response after submitting the form?
Solution:
HTML Code:
<!DOCTYPE html><!-- HTML5 document type declaration -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Declares document character encoding -->
<title>How to specify where to display the response after submitting the form</title><!-- Sets the title of the webpage -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<form action="https://www.w3resource.com/html-css-exercise/basic/solution/button-formtarget-answer-demo.php" method="POST"><!-- Start of form element with action and method attributes -->
First name: <input type="text" name="fname"><br><!-- Input field for entering first name -->
Last name: <input type="text" name="lname"><br><!-- Input field for entering last name -->
<button type="submit">Submit</button><!-- Submit button labeled "Submit" -->
<button type="submit" formtarget="_blank">Submit to a new window/tab</button><!-- Submit button labeled "Submit to a new window/tab" with formtarget attribute set to "_blank" to specify that the response should be displayed in a new window or tab -->
</form><!-- End of form element -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->
Explanation:
- This HTML document starts with a doctype declaration indicating it's an HTML5 document.
- Inside the <html> tags, the document structure begins.
- The <head> section contains metadata about the document, such as character encoding and the title.
- The <body> section is where the visible content of the webpage resides.
- Within the body section, there's a <form> element created with the action attribute set to the URL where the form data will be submitted and the method attribute set to "POST".
- Inside the form, there are input fields for entering first name and last name.
- There are two <button> elements within the form:
- The first button has the type attribute set to "submit" and is labeled "Submit". It submits the form data.
- The second button also has the type attribute set to "submit" and is labeled "Submit to a new window/tab". It has the formtarget attribute set to "_blank", indicating that the response should be displayed in a new window or tab when the form is submitted.
- The HTML document ends with the closing </html> tag.
Live Demo:
See the Pen button-formtarget-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics