HTML Forms:

Forms are another very important element of HTML. We often create a form in our web pages either as an enquiry form or as an enrolment form or as a feedback form or whatever. A simple form is created in the following way:

Following are the components of forms that we create in HTML:

Textbox
Radio Button
Checkbox
Date box
Drop-down Menu
Text area
Buttons

Folowwing is the diagram showing all these form components:

Textbox: Textbox is a simple input tool that collects the text. It can be used for name, father’s name, mother’s name, address etc.

Syntax:

  <form>
	<label>Enter your name:</label>
	<br>
	<input type="text">
  </form>

Output:

Here, <label>Enter your name<label> is the label. <input> is the tag and type is the attribute of <input> tag. Some other attributes are as under-

placeholder: to give a hint about what to input.
name: to give a logical name to the textbox.
value: to put a certain value already in the textbox.
readonly: to make a textbox read only (un-writable). It is not given any value.

NOTE: If attribute value is used, readonly is a must in order to avoid any further inputs.

Radio Button: Radio buttons are created to restrict user to choose only one option out of many. For example- Gender.

Syntax:

  <form>
	<label>Gender:</label>
	<br>
	<input type="radio" name="gender"> <label>Male</label><br>
	<input type="radio" name="gender"> <label>Female</label><br>
	<input type="radio" name="gender"> <label>Transgender</label>
  </form>

Output:

Here, <label>Male<label>, <label>Female<label> and <label>Transgender<label> are the labels. <input> is the tag and-

type: is the attribute of <input> tag. Value to the type attribute is radio.
name: is another attribute of <input> tag here. Value to the name tag can be anything related to the inputs but all names for a set of radio buttons must be same.

Checkbox: Checkboxes allow user to choose many out of many options given in the form. For example- Hobbies.

Syntax:

  <form>
	<label>Hobbies:</label>
	<br>
	<input type="checkbox" name="hobby"> <label>Playing</label><br>
	<input type="checkbox" name="hobby"> <label>Singing</label><br>
	<input type="checkbox" name="hobby"> <label>Dancing</label>
  </form>

Output:

Here, <label>Playing<label>, <label>Singing<label> and <label>Dancing<label> are the labels. <input> is the tag and-

type: is the attribute of <input> tag. Value to the type attribute is checkbox.
name: is another attribute of <input> tag here. Value to the name attribute can be anything related to the inputs but all names for a set of checkboxes should be same.

Date box: Date box is created to allow user to input a specific date. For example- Date of birth.

Syntax:

  <form>
	<label>Date of Birth:</label>
	<br>
	<input type="date" name="dob">
  </form>

Output:

Here, <label>Date of Birth<label> is the label. <input> is the tag and-

type: is the attribute of <input> tag. Value to the type attribute is date.
name: is another attribute of <input> tag here. Value to the name attribute can be anything related to the input.

Drop-down Menu: Drop-down menus are created to allow the user to select one single choice from a lot of options. For example- states in a country or districts in a state.

Syntax:

  <form>
	<label>Nationality:</label>
	<br>
	<select name="nat">
		<option>India</option>
		<option>Sri Lanka</option>
		<option>Bangladesh</option>
	</select>
  </form>

Output:

Here, <label>Nationality</label> is the label. <select> is the tag for creating a drop-down and <option> is the tag for creating list items.

name: is the attribute to <select> tag for defining that the drop-down is for selecting a country.

Text area: Text area is an important form component that lets the user input large text. For example- user’s feedback etc.

Syntax:

  <form>
	<label>Your feedback:</label>
	<br>
	<textarea rows="6" cols="100"></textarea>
  </form>

Output:

Here, <label>Your feedback</label>, <textarea> is the tag for creating a larger textbox. rows is the attribute for defining the height and cols is the attribute for defining width.

NOTE: Unlike of <input> tag, <textarea> is a container tag, hence it must be closed.

Buttons: Buttons are created as the final component of any form. A button lets the user trigger some events like submission of data, upload/download or any kind of alert/message.

Syntax:

  <form>
	<input type="button" value="Submit">
	<input type="button" value="Reset">
  </form>

Output:

Here there is no any label. <input> is the tag and type is the attribute for defining that the input component is a button. value is another attribute that defines the name of button.

Action attribute in <form>: Since every form element is packed inside of <form> . . . </form> container, we use an attribute action to tell the form what to do once the submit button is pressed.

Syntax:

  <form action="https://ourtutorials.in/">
	<input type="submit" value="Submit">
  </form>

Output: