HTML forms are useful to collect user information. It is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc.
HTML <form> element
<form> element used to create an HTML form for the user input.
It provides various interactive controls for submitting information to a web servers such as text fields, text areas, password fields, etc.
<form> . form elements . </form>
<form> tag does not create a form for you, but it is required for
method (GET, POST etc.). It is a container for all input fields.
HTML <input> element
<input> tag is basic and most used element in the form.
<input> element can be displayed in many ways, depending on the
We will see all types in next tutorial.
type="text" in input tag creates the text field for you. Defines single-line input.
Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.
HTML <label> Element
<label> tag in above example. The
<label> tag defines a label for many form elements.
It is considered better to have label in form. As it makes the code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to have an attribute in the label tag that must be the same as
id attribute of the input tag.
for attribute of the
<label> tag should be equal to the
id attribute of the
<input> element to bind them together.
<label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) – because when the user clicks the text within the
<label> element, it toggles the radio button/checkbox.
Radio Button Control
Radio button allow user to click only one choice. For example male or female.
<input type="radio"> defines a radio button.
It is used to select multiple choice from given item.
<input type="checkbox"> defines a checkbox.
Submit button used to submit the data to server. The form-handler is typically a file on the server with a script for processing input data.
<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is specified in the form’s
type = submit , specifying that it is a submit button
value attribute can be anything which we write on button on web page.
name attribute can be omit here.
Name Attribute for <input>
Notice that each input field must have a
name attribute to be submitted.
name attribute is omitted, the value of the input field will not be sent at all.
Following example will not submit the value of the “First name” input field:
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="Submit"> </form>
Hope you enjoyed. Thank you 🙂
Previous: #20 HTML Entities, Symbols, Emojis
Next: #22 HTML Form Attribute