w3resource

HTML5: How to define an input control?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration specifying the document type -->
<html><!-- Opening tag for the root element of the HTML document -->
<head><!-- Opening tag for the document's header section -->
<meta charset="utf-8"><!-- Metadata tag specifying the character encoding of the document -->
<title>How to define an input control</title><!-- Title of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<form name="example_form" method="POST" action="input-answer-demo.php"><!-- Form element defining a form with name, method, and action attributes -->
<!-- Form inputs -->
  Name: <input type="text" name="name" size="30"><br><!-- Text input field for entering name -->
  Email: <input type="text" name="email" size="30"><br><!-- Text input field for entering email -->
  Place: <input type="text" name="place" size="10"><!-- Text input field for entering place -->
<!-- Submit button -->
<input type="submit" value="Submit"><!-- Submit button to submit the form data -->
</form><!-- Closing tag for the form -->
</body><!-- Closing tag for the document's body section -->
</html><!-- Closing tag for the root element of the HTML document -->

Explanation:

  • This HTML code defines a form with input controls for collecting user information.
  • The <form> element encapsulates the input fields and defines the name, method, and action attributes.
  • Inside the form, there are three text input fields for entering name, email, and place information.
  • Each input field has attributes such as type (defining the input type), name (defining the name of the input), and size (defining the size of the input field).
  • Additionally, there is a submit button (<input type="submit">) to submit the form data.

Live Demo:

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


See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.