Form in HTML

An HTML Form is a document which stores the data of the user on the web site using interactive special element controls for processing and submitting information to the web server, Let us understand the HTML Forms in detail.

What is the HTML Form?

 Form is a tag in HTML which is written as <form> and it is used for collecting user input information and then delivering the user information collected through these forms to the server for further data processing.

An HTML form contains different kinds of details such as username, password, contact number, email id, etc. we can include text fields, radio-buttons, checkboxes, and many more options to design the form for submitting the user input to the database.

Syntax of HTML Form

<form action = “script URL” method = “get/post”> form elements </form>

  • Form action specifies the URL or the source path to where the information is sent.
  • Form method is used to see how the data is sent by (get or post).
  • GET method is used when we send a small amount of data without altering anything on the server.
  • POST method is used when we send a large amount of data with changing the state on the server.
  • The Target attribute is used to specify whether the submitted result will be displayed in the current or new window.
  • Name Attribute is required to be specified in each input field to send the data of the field on the webserver.

Elements Used in HTML Forms

The <form> element in HTML act as container for creating a HTML Form with the help of other HTML elements  and controls such <label>, <input> etc.

Input controls in HTML Form Elements

<Input> elements are commonly used in HTML Forms, It is used to represent the input data and collect the information in different ways from the user, there are several ways to use the input element given below.

 1. Single-line  Text Field Input: The Element defines a single-line input field for text input which allows the user to insert a small amount of input text like name, email, etc  .by using type attribute value as “text“.

Example :

<!DOCTYPE html> 
<html> 
<h2>Example of Text Field input</h2> 
<body> 
  <form> 
    <label for="USER ID">USER ID:</label><br> 
    <input type="text" name="User id" id="User id"> 
  </form> 
</body> 
</html> 

OUTPUT:   2. Password Text Field Input: This is also a single-line text input that prevents the user to see the text entered on the password control field by hiding it with dots for better security. they are created by the <input> element using attribute value as “password”.

Example:

<!DOCTYPE html>
<html>
<head>
      <title>Password text Input Control</title>
   </head>
  
   <body>
   <h2>Example of password text field input </h2>
      <form >
         User ID : <input type = "text" name = "user id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
  
</html>

OUTPUT:

3. Multiple-line Text Field Input: The Element defines multiple line text input fields that allow users to provide a description or text in multiple lines that are required to give details that may be longer than single line sentences. they are created by the<textarea> element and CSS is used for defining rows and cols attributes.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Example of multiple-line text field input</h2>
<p>textarea element defines a multi-line input field.</p>

<label for="Description">Description:</label> 
  <textarea name="Description" rows="5" cols="50">welcome to codedec,the best place to learn programming</textarea>
</form>

</body>
</html>

OUTPUT:

<Label> element in HTML Form

The HTML label tag is used to make the webpage user friendly, It defines the label for many form elements. The attribute of the <label> tag should be equal to the id attribute of the <input> element to put them together. It helps to focus on text control.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>The Label Tag in html form</h2>

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>

</form>

</body>
</html>

OUTPUT:

Checkbox in HTML Forms :

It is the Attribute used with the <input> element to check the multiple predefined options given to the “checkbox” to choose more than one option available.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Checkbox in HTML Forms</h2>

    <form>  
    Course:<br>  
                  <input type="checkbox" id="HTML" name="HTML" value="HTML"/>  
                     <label for="HTML">HTML</label> <br>  
                  <input type="checkbox" id="CSS" name="CSS" value="football"/>  
                     <label for="CSS">CSS</label> <br>  
                  <input type="checkbox" id="Javascript" name="Javascript" value="Javascript"/>  
                     <label for="Javascript">JAVASCRIPT</label>  
    </form>  

</body>
</html>

OUTPUT:

Radio Buttons in HTML Forms

It is the Attribute used with the <input> element to check the predefined option given to the “radio”  button to choose exactly one option required.

Example:

<!DOCTYPE html>
<html>

   <head>
      <title>Example of Radio button </title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "chemistry"> chemistry
         <input type = "radio" name = "subject" value = "biology"> biology
      </form>
   </body>

</html>

OUTPUT:

Select Boxes in HTML Forms

It is the Attribute used to select one or more options from a drop-down list, it is created by the” select “and “option “elements.

Example:

<!DOCTYPE html> 
<html> 
<h3>Example of a Select Box</h3> 
<body> 
  <form> 
    <label for="OTT">OTT:</label> 
    <select name="OTT" id="OTT"> 
      <option value="NETFLIX">NETFLIX</option> 
      <option value="AMAZON PRIME">AMAZON PRIME</option> 
      <option value="HOTSTAR">HOTSTAR</option> 
    </select> 
  </form> 
</body> 
</html> 

OUTPUT:

Reset & Submit Button in HTML Forms

It is an Attribute used to create clickable buttons, the reset element is used to clear the data to the default settings, and the submit element is used to transfer the data to the webserver.

<!DOCTYPE html>
<html>
<body>

<h2>Example of reset & submit button</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="reset">
</form> 

</body>
</html>

OUTPUT:

<Fieldset> element in HTML form

It is an element used to group the information of the HTML Form, it is used with  <legend> attribute to provide a caption to the assembled HTML Form elements.

Example:

<!DOCTYPE html> 
<html> 
<h3>Example of a Select Box</h3> 
<body> 
       <form>  
         <fieldset>  
          <legend>User Info:</legend>  
        <label for="name">user id</label><br>  
    <input type="text" id="name" name="name"><br>  
    <label for="pass"> Password</label><br>  
    <input type="Password" id="pass" name="pass"><br>  
    <input type="submit" value="submit">  
    </fieldset>  
    </form>
</body> 
</html> 

OUTPUT:

Basic Example of HTML Forms

 1. Example of HTML login form with color background:

<html>
  <body style="background-color: yellow;">
    <table>
      <form method="get" name=" register form">
        <tr>
          <td>USER ID</td>
          <td><input type="number" size="3" name="id" /></td>
        </tr>
        <tr>
          <td>USERNAME</td>
          <td><input type="text" size="30" name="name" /></td>
        </tr>
        <tr>
          <td>PASSWORD</td>
          <td><input type="password" name="pass" /></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
          </td>
        </tr>
      </form>
    </table>
  </body>
</html>

OUTPUT:

 2. Example of HTML Registration Form :

<html>
      <body>
      <fieldset><legend> personnel detail </legend>	 
   <table>
          <form method = get action ="ass12.html" name ="form">
    <h1> registration form </h1>
    <tr>
    <th> registration      </th>
    </tr>
    <tr>
        <td> name </td>
        <td> <input type = text size = 30 name = name  autofocus></td>
    </tr>
    <tr>
        <td> father's name </td>
        <td> <input type = text size = 30 name = name placeholder = "father's name " ></td>
    </tr> 
    <tr>
        <td> DOB </td>
        <td> <input type = date name = date></td>
    </tr>
    <tr>
        <td> gender </td>
    </tr>
    <tr>
        <td> <input type = radio name = gender value = 'M'><label> male   </label></td>
    </td>
    <tr>
        <td> <input type = radio name = gender value = 'F'><label> female </label></td>
    </tr>
    <tr>
        <td> address </td>
        <td> <input type = text size = 50 name = address></td>
    </tr>
        </table>
    </fieldset>
    <fieldset><legend> Qualification </legend><fieldset>
  <table>
        <tr>
            <td> degree </td>
      <td> 
          <select name  = Degree>
          <option value = B.E   > bachelor of engineering </option>
          <option value = B.SC  > bachelor of science     </option>
          <option value = BBA   > bachelor of business    </option>
          <option value = B.com > bachelor of commerce    </option>
    		      </select>
      </td>
        </tr>
        <tr>
      <td> Branch </td>
      <td>
          <select name  = Branch >
          <option value = cs     > computer science        </option>
          <option value = IT     > information technology  </option>
          <option value = EI     > electronics and instcn  </option>
          <option value = MI     > mechanical atronics     </option>
          </select>
      </td>
        </tr>
        <tr>
      <td> percentage </td>
      <td>
          <select name  = "per">
          <option value =  7.0 > 70% </option>
          <option value =  8.0 > 80% </option>
          <option value =  9.0 > 90% </option>
          </select>
      </td>
        </tr>
       </table>
  </fieldset>
   <fieldset></legend> sports </legend>
       <table>
        <tr>
      <td> hobbies </td>
        </tr>
              <tr>
      <td><input type = checkbox name = menu value =1>
      <label> cricket </label></td>
        </tr>
        <tr>
      <td><input type = checkbox name = menu value =2>
      <label> chess </label></td>
        </tr>
        <tr>
      <td> <input type = checkbox name = menu value =3>
      <label> handball </label></td>
        </tr>
        <tr>
      <td><input type = checkbox name = menu value =4>
      <label> football </label></td>
        </tr>
   </table>     
  </fieldset>
         <table>
         <tr>
       <td><input type = submit values = register ></td>
   </tr>
   <tr>
       <td><input type = reset value =  register  ></td>
   </tr>
     </form>
  </table>
 </body>
</html>

OUTPUT: