HTML Forms

⟼ HTML Forms are collect different kinds of user input details like name, email address, phone numbers, or details like credit card information, and Other Details etc.

⟼ User input Date most often sent to the server processing. The <form> tag is used to create a HTML form.

Uses for Form Tags .

Let's see the list of tags below.

Tag	Description
<form>	HTML structure to enter.
<input>	It is used for input control.
<textarea>	It is used for multi-line input control.
<label>	It is used for label element.
<fieldset>	It is used for groups the related element in a form.
<legend>	It defines a caption for a <fieldset> element.
<select>	It is used a drop-down list.
<optgroup>	It is used a group of related options in a drop-down list.
<option>	It is used an option in a drop-down list.
<button>	It is used a clickable button.

Syntax1:-

<form action="server url" method="get|post">
  //input controls e.g. textfield, textarea, radiobutton, button
</form>

Syntax2:-

<form>
  //use tag.....
</form>

1) HTML <input> Tag.

It is used to create text fields, to take input Data from user.

An <input> tag can be display in many ways, depending on the type attribute below in list.

Type	Description
<input type="text">	It is Displays a single-line text input field
<input type="radio">	It is Displays a radio button .
<input type="checkbox">	It is Displays a checkbox .
<input type="submit">	It is Displays a Form submit button
<input type="button">	It is Displays a Create clickable button

Syntax:-

<form>
  <input type="text"> 
</form>

Example:-

   <form>  
 First Name:- <input type="text"  name="fname"> <br/> 
 Last Name:- <input type="text"   name="lname" >  
</form>  

Output:-

2) HTML <textarea> Tag

<textarea> Tag is used to insert multiple-line text in a form.The <textarea> size depend on either using "rows" or "cols" attribute..

Where rows attribute specifies the visible number of lines in a text area.

Where cols attribute specifies the visible width of a text area.

Syntax:-

   <textarea rows="2" cols="20">  
   //Enter Text here...  
   </textarea>

 

Example:-

 <form>  
        Enter your Address:<br>  
      <textarea rows="2" cols="20"> </textarea>  
  </form>  
 

Output:-

3) HTML Label Tag

HTML <label> tag is used to adding a label to a user interface form control.

Syntax:-

<form>
      <label for=".....">.......</label>
  //use tag.....
</form>

Example1:- (radio Button)

   <h1>The Label Tag Use</h1>
<p>Click on one of the text labels to toggle the related radio button:</p>
 <form action="">
    <label for="employee">Employee: </label>  
              <input type="radio"  name="employee" value="fresher"/>Fresher  
              <input type="radio"  name="employee" value="experience"/>Experience <br/>  
              <input type="submit" value="Submit">
</form>

Output:-

Example2:- (Checkbox Button)

    <h1>The Label Tag Use</h1>
<p>Click on one of the text labels to toggle the related checkbox button:</p>
<form action="">
    <label for="employee">Employee: </label>  
              <input type="checkbox"  name="employee" value="fresher"/>Fresher  
              <input type="checkbox"  name="employee" value="experience"/>Experience <br/>  
              <input type="submit" value="Submit">
</form>

Output:-

4) HTML <fieldset> Tag:

HTML <fieldset> tag is used for grouping related information of a form.

The <fieldset> tag draws a box around the related information of a form.

Syntax:-

<form>
      <fieldset>
               <legend>....... </legend>
     
      </fieldset>
</form>

Example:-

     <form>  
         <fieldset>
             <legend>Student Information:</legend>
             <label for="name">Name:</label>
                <input type="text" id="name" name="name"><br><br> 
             <label for="contact">Mobile Number:</label>
                <input type="text" id="contact" name="number"><br><br> 
             <label for="email">Email:</label>
                <input type="email" id="email" name="email"><br><br> 
             <label for="birthday">Birthday:</label>
                <input type="date" id="birthday" name="birthday"><br><br> 
            <label>Gender</label><br>  
                <input type="radio"  name="gender" value="male"/>Male  <br>   
                <input type="radio"  name="gender" value="female"/>Female <br>    
                <input type="radio"  name="gender" value="others"/>Others <br>  
                <input type="submit" value="Submit">
        </fieldset>  
     </form>  

Output:-

HTML HTML <fieldset> Tag checkbox Example

Next TopicHTML Iframe

← prev next →

HTML Tutorials

HTML Tags

HTML5 Tutorial

HTML Forms

Uses for Form Tags .

Syntax1:-

Syntax2:-

1) HTML <input> Tag.

Syntax:-

Example:-

2) HTML <textarea> Tag

Syntax:-

Example:-

3) HTML Label Tag

Syntax:-

Example1:- (radio Button)

Example2:- (Checkbox Button)

4) HTML <fieldset> Tag:

Syntax:-

Example:-