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

element

The HTML <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>

Note: <form> tag does not create a form for you, but it is required for action and method (GET, POST etc.). It is a container for all input fields.

HTML element

<input> tag is basic and most used element in the form.

An <input> element can be displayed in many ways, depending on the type attribute.

We will see all types in next tutorial.

but let’s

Text Fields

type="text" in input tag creates the text field for you. Defines single-line input.

See the Pen input text html by Arpit (@soniarpit) on CodePen.

Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

HTML Element

Notice <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.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

The <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.

The <input type="radio"> defines a radio button.

See the Pen radio button by Arpit (@soniarpit) on CodePen.

Checkbox Control

It is used to select multiple choice from given item.

The <input type="checkbox"> defines a checkbox.

See the Pen rNWmzdO by Arpit (@soniarpit) on CodePen.

Submit Button

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.

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is specified in the form’s action attribute.

See the Pen submit button by Arpit (@soniarpit) on CodePen.

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Name Attribute for

Notice that each input field must have a name attribute to be submitted.

If the 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