Skip to content
Related Articles

Related Articles

Improve Article

HTML Forms

  • Last Updated : 19 Aug, 2021
Geek Week

HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that tell the browser how to properly display the content on the screen. And form is one of them. So, in this article, we will learn what is exactly HTML form what are the elements of forms and how can we use HTML form in our webpage. 

What is HTML <form>?

<form> is a HTML element to collect input data with containing interactive controls. It provides facilities to input text, number, values, email, password, and control fields such as checkboxes, radio buttons, submits buttons, etc. or in other words, form is a container that contains input elements, like text, email, number, radio buttons, checkboxes, submit buttons, etc. Forms are generally used when you want to collect data from the user. For example, a user wants to buy a bag online, so he/she has to first enter their shipping address in the address form and then add their payment detail in the payment form to place an order.

Syntax:

<form>

elements of form...

</form>

Elements of HTML <form>

These are the following HTML <form> elements:

  • <label>: It defines label for <form> elements.
  • <input>: It is used to get input data from the form in various type such as text, password, email, etc by changing it’s type.
  • <button>: It defines a clickable button to control other elements or execute a functionality.
  • <select>: It is used to create a drop-down list.
  • <textarea>: It is used to get input long text content.
  • <fieldset>: It is used to draws a box around other form elements and group the related data.
  • <legend>: It defines caption for fieldset elements.
  • <datalist>: It is used to specify pre-defined list options for input controls.
  • <output>: It display the output of performed calculations.
  • <option>: It is used to define option in drop-down list.
  • <optgroup>: It used to defines group related options in a drop down list.

Textbox in HTML Form

In an HTML form, we use <input> tag by assigning type attribute value to text to input single line input.  It is the most commonly used tag. To define type attribute see the below syntax. 



Syntax:

<input type="text">

Here we can change type value text to password to get the input password 

Example:

HTML




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
  <form>
    Username : <input type="text"><br><br>
    Password : <input type="password"><br><br>
    <input type="button" value="Submit">
  </form>
</body>
</html>

Output:

In the above example, we can see the difference between type text and type password. The username will be visible but the password will not be visible. 

Radio Button in an HTML Form

To create a radio button, we use the <input> tag following by radio type to provide users to choose a limited number of choices.

 Syntax:



<input type="radio" name="radio_button_name">

Note: The radio button must have shared the same name to be treated as a group. 

Example:

In this example, we will create a radio button to choose your gender. 

HTML




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Select your gender</h2>
  <form>
    Male<input type="radio" name="gender">
    Female<input type="radio" name="gender">
  </form>
</body>
</html>

Output:

Checkbox in an HTML Form

To create a checkbox in an HTML form, we use the <input> tag following by the input type checkbox. It is a square box to ticked to activate this. It used to choose more options at a time. 

Syntax:

<input type="checkbox">

Example:

In this example, we use checkboxes to select language. 

HTML




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Choose Language</h2>
  <form>
     <input type="checkbox">Hindi<br>
    <input type="checkbox">English<br>
    <input type="checkbox">Sanskrit<br>
   </form>
</body>
</html>

Output:



Combobox in an HTML Form

Combobox is used to create a drop-down menu in your form which contains multiple options. So, to create an Combobox in an HTML form, we use the <select> tag with <option> tag. It is also known as a drop-down menu. 

Syntax:

<select>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
</select>

Example:

In this example, we will create a dropdown menu to select Nationality. 

HTML




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Select Your Nationality</h2>
  <form>
   <select>
    <option>Indian</option>
    <option>Nepali</option>
     <option>Others</option>
   </select>
  </form>
</body>
</html>

Output:

Submit button in an HTML Form

In the HTML form, submit button is used to submit the details of the form to the form handler. A form handler is a file on the server with a script that is used to process input data.  

Syntax:

 <input type="button" value="submit">

Example: 



HTML




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
  <form>
    Username: <input type="text"><br><br>
    Password: <input type="password"><br><br>
    <input type="button" value="submit">
  </form>
</body>
</html>

Output:
 

TextArea in an HTML Form

In the HTML form, a text area is used to add comments or reviews, or addresses in the form. Or in other words, the text area is a multi-line text input control. It contains an unlimited number of characters, and the text renders in a fixed-width font and the size of the text area is given by the <rows> and <cols> attributes. To create a text area in the form use the <textarea> tag.

Syntax:

<textarea> content </textarea>

Example:

HTML




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
  <form>
    <textarea rows = "3" cols = "40">
      GeeksforGeeks is a online portal
    </textarea>
  </form>
</body>
</html>

Output:

Create an HTML form to input the basic details of a student

In this example, we will take output such as Salutation, First Name, Last Name, Email, Phone, Gender, Date of Birth, and Address. 

To create this form, we need to use the <legend> tag to defined caption, <select> tag for Salutation, <option> tag to define elements of Salutation, <input> tag for First Name, Last Name, Email, Phone, Date of Birth by changing <input> tag type attribute, <textarea> to input address, radio button for gender. After defining all these stuffs, we will use a <button> to submit this form data. 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GfG</title>
  <style>
  </style>
</head>
 
<body>
  <form>
    <fieldset>
      <legend>Personal Details</legend>
      <legend for="salutation">Salutation</legend>
      <select name="salutation">
        <option>--None--</option>
        <option>Mr.</option>
        <option>Ms.</option>
        <option>Mrs.</option>
        <option>Dr.</option>
        <option>Prof.</option>
      </select><br><br>
      <label for="first_name">First name:</label>
      <input type="text" id="first_name" name="fname"><br><br>
      <label for="last_name">Last name:</label>
      <input type="text" id="last_name" name="lname"><br><br>
      <label for="gender">Gender : </label>
      <input type="radio" name="gender"> Male
        <input type="radio" name="gender"> Female
      <br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="dob">Date of Birth:</label>
      <input type="date" id="birthday" name="dob"><br><br>
      <legend for="address">Address : </legend>
      <textarea name="address" cols="30" rows="3"></textarea>
      <br><br>
      <input type="submit" value="Submit">
     </fieldset>
  </form>
</body>
</html>

Output:

Attention reader! All those who say programming isn’t for kids, just haven’t met the right mentors yet. Join the  Demo Class for First Step to Coding Coursespecifically designed for students of class 8 to 12. 

The students will get to learn more about the world of programming in these free classes which will definitely help them in making a wise career choice in the future.




My Personal Notes arrow_drop_up
Recommended Articles
Page :