Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
HTML Tutorial
About Lesson

HTML Forms

In this tutorial, we will learn about forms and its elements and attributes in HTML with the help of examples.


Forms

Form is used to collect user input to send to a server for further processing.
The <form> element is used to create an HTML form.
There are various input elements inside form elements like text fields, text area, radio buttons, checkboxes, and more.

Syntax :

<form>...Form element...</form>

Form Attributes

Attribute Description
action Backend script ready to process user passed data
method Used to upload data. The two most common methods are GET and post methods.
target Specifies where to open the link. e.g. in a new tab or window
type Specifies how the form-data should be encoded when submitted.
Possible values are: multipart/form-data: this is used when you want to upload binary data.
Application/x-www-form-urlencoded: this is a standard method most used forms use in simple scenarios.

Form Elements

The <form> element can contain one or more form elements :

  1. Text input
  2. Label
  3. Checkboxes
  4. Select box
  5. Radio box
  6. Submit and Reset button
  7. <fieldset> and <legend>
  8. Datalist

 

1. Text Input

There are 3 ways of text input :

  • Single-line text input : This is used for items that require only one line of user input, such as search boxes or names. The text input control are created using <input> tag.
  • Password input : it makes the character hide the user’s personal information. the password input control are created using <input> tag.
  • Multi-line text input : the multi-line input are created using HTML <textarea> tag.
Attribute Description
type Indicate the type of input control and for text input
name Used to give a name that is sent to the server to recognize and get the value
size Used to specify the width , in the character of an input field
value Specifies and initial value for an input field
placeholder Specifies a short hint that describes the expected value of an input field
max-length Specifies the maximum number of characters allowed in an input field

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Input Elements</title>
  </head>
  <body>
    <form>
      Name : <input type = "text" name = "name"/>
      <br>
      Age : <input type = "number" name = "age"/>
      <br>
      Password : <input type = "password" name = "placeholder"/>
      <br>
      Description : <textarea rows = "5" cols = "30" name =
"description" placeholder = "Enter Description"></textarea>
    </form>
  </body>
</html>

Output

Name :
Age :
Password :
Description :

 

2. <label> Elements

The <label> element defines a label for many form elements.
The <label> tag is useful for screen-reader users because the screen-reader will read out loud when the label when the user is focused on the input element.
The for attribute of the <label> element should be equal to the id attribute of the <input> tag to add together.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>label Element</title>
  </head>
  <body>
    <form>
      <label for = "fname">First Name : </label><br>
      <input type = "text" name = "fname" id = "fname"/><br>
      <label for = "lname">Last Name : </label><br>
      <input type = "text" name = "lname" id = "lname"/><br>
    </form>
  </body>
</html>

Output


 

3. <textarea> Element

The <textarea> element defines a multi-line input-field.

Attributes used inside <textarea> element.

  1. Row : It specifies the number of textarea box.
  2. Cols : It specifies the number of columns of the textarea box.

 

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Textarea Element</title>
  </head>
  <body>
    <form>
      Description : <textarea rows = "5" cols = "50"
name = "description" placeholder = "Enter Description"></textarea>
    </form>
  </body>
</html>

Output

Description :

 

4. Checkbox Attribute

The checkbox is used to define the checkbox.
It is used inside the <input> elements but the type attribute is set to the checkbox.
A checkbox lets a user select more than one option that is required to be selected.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Checkbox Attribute</title>
  </head>
  <body>
    <form>
      <input type = "checkbox" name = "sport1" value =
"cricket" id = "sport1"/><br>
      <label for = "sport1">Play Cricket</label><br>
      <input type = "checkbox" name = "sport2" value =
"football" id = "sport2"/><br>
      <label for = "sport2">Play Football</label><br>
    </form>
  </body>
</html>

Output


 

5. Select box Element

The <Select> Element provides various options in the form of a drop-down list.
It is also known as a drop-down box.
By default, the first item in the drop-down list is selected.
The <option> tag is used to define an option that can be selected. To define a pre-selected option, add the selected attribute to the option.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Select element</title>
  </head>
  <body>
    <form>
      <p>Select your favourite sport :</p>
      <select name = "dropdown">
        <option value = "Cricket" selected>Cricket</option>
        <option value = "Football">Football</option>
        <option value = "Baseball">Baseball</option>
      </select>
    </form>
  </body>
</html>

Output

Select your favourite sport :

CricketFootballBaseball

 

6. Radio Button

The <input type = “radio”> is used to define a radio button.
Radio buttons are used to select one of the limited options.
It is used inside the <input> elements but the type attribute is set to the radio.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Button</title>
  </head>
  <body>
    <form>
      <input type = "radio" name = "sport" value = "cricket" id =
"sport1"/>
      <label for = "sport1">Play Cricket</label><br>
      <input type = "radio" name = "sport" value = "football" id =
"sport2"/>
      <label for = "sport2">Play Football</label><br>
      <input type = "radio" name = "sport" value = "other" id =
"other"/>
      <label for = "other">Other</label><br>
    </form>
  </body>
</html>

Output



 

7. Submit and reset button

The <input type = “submit”> is used to define a button for submitting the form data. The Submit button only works with the help of server for processing input data.
The <input type = “reset”> is used to define a button for reset the form data.
If you change the input value and the click the Reset button, the form-data will be reset to the default value.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Submit and Reset Button</title>
  </head>
  <body>
    <form>
      <label for = "fname">First Name :</label>
      <input type = "text" name = "fname" id = "fname"/>
      <br>
      <label for = "lname">Last Name :</label>
      <input type = "text" name = "lname" id = "lname"/>
      <br>
      <input type = "Submit" value = "Submit"/>
      <input type = "Reset" value = "Reset"/>
    </form>
  </body>
</html>

Output


 

8. <fieldset> and <legend> Element

The <fieldset> defines a group related data in a form.
The <legend> element is used to define a caption for the <fieldset> element.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Fieldset and legend Element</title>
  </head>
  <body>
    <fieldset>
      <legend>Personal info :</legend>
      <label for = "fname">First Name :</label>
      <input type = "text" name = "fname" id = "fname"/>
      <br>
      <label for = "lname">Last Name :</label>
      <input type = "text" name = "lname" id = "lname"/>
      <br>
      <input type = "Submit" value = "Submit"/>
      <input type = "Reset" value = "Reset"/>
    </fieldset>
  </body>
</html>

Output

Image not found

 

8. <datalist> Element

The <datalist> element is used to specify a list of pre-defined options for an <input> tag.
Users can see a drop-down list of options as they input data.
The list attribute of <input> tag must refer to the id attribute of the <datalist> element.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Datalist Element</title>
  </head>
  <body>
    <form>
      <input list = "Sports" >
      <datalist id = "Sports">
        <option value = "Cricket">Cricket</option>
        <option value = "Football">Football</option>
        <option value = "Baseball">Baseball</option>
        <option value = "Basketball">Basketball</option>
      </datalist>
    </form>
  </body>
</html>

Output

 

Exercise Files
No Attachment Found
No Attachment Found
error: Content is protected !!