HTML Form

  • The HTML <form> element is used to collect user input data.
  • For example, during the user registration you would like to collect information such as name, father name, mother name, date of birth email, address, credit card, etc.

syntax:-
<form>
.
form elements
.
</form>

      There are different types of forms are used in HTML are.

  • Text Input Controls
  • Check boxes Controls
  • Radio Box Controls
  • Select Box Controls
  • File Select boxes
  • Clickable Buttons

Text Input Controls

There are three types of text input used on forms.

  • Single-line text input controls
  • Password input controls
  • Multi-line text input controls

Single-line text input controls

They are created using HTML <input> tag. Type attribute is text.

First Program in HTML
<!DOCTYPE html>
<html>
<body>
<p>Input "text" type:</p>
<form>
<label>Enter first name:</label>
<input type="text" name="firstname"><br><br>
<label>Enter last name:</label>
<input type="text" name="lastname">

</form>
</body>
</html>

Output

Input “text” type:





Password input controls

They are also created using HTML <input> tag. Type attribute is password.

Example of Password input controls
<!-- DOCTYPE html -->
<html>
<body>
<p>Input "password" type:</p>
<form>
<label>Enter User name</label><br>
<input type="text" name="firstname" ><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>
</body>
</html>

Output

Input "password" type:






Multi-line text input controls

Multi-line input controls are created using HTML <textarea> tag.

Example of Multi-line input controls
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>

Output

Form in HTML
Enter your address:

Checkbox Control

  • Check box controls are used when more than one option is required to be selected. 
  • They are also created using HTML <input> tag but type attribute is set to checkbox.
Example of checkbox
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="singing" name="singing" value="singing"/>
<label for="singing">singing</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>

</body>
</html>

Output

Hobby:


Radio Button Control

  • Radio buttons are used when out of many options, just one option is required to be selected.
  • They are also created using HTML <input> tag but type attribute is set to radio.
Example of Radio Button Control​
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<label for="gender">Gender: </label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male<br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>

</body>
</html>

Output


Male
Female

Drop down box

  • A drop down box, also called Select Box Control which provides option to list down various options in the form of drop down list, from where a user can select one or more options.
Example of drop down box
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<label>Choose your Favorite courses</label>
<select>
<option>ADCA</option>
<option>DCA</option>
<option>DFA</option>
<option>'O'LEVEL</option>
<option>TALLY</option>
<option>BCA</option>
<option>CCC</option>
</select>
</form>

</body>
</html>

Output

File Upload Box

  • If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box.
  • This is also created using the <input> element but type attribute is set to file.
Example of File Upload
<!DOCTYPE html>
<html>
<body>

<p>File upload</p>

<form>
<label for="myfile">Select a file:</label>
<input type="file" id="newfile" name="newfile"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

Output

File upload



Button Controls

  • There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button.
Example of Button Controls
<!DOCTYPE html>
<html>
<body>

<form>
<label >First name:</label>
<input type="text" id="name" name="name"><br><br>
<label >Last name:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output





What is HTML
  • HTML is the standard  for Hypertext Markup Language for Web pages.
  • The HTML elements tell the browser ...
    Click Here
Previous topic next topic What is an Element in HTML
  • An Hypertext Markup Language(HTML) element ...
    Click Here
Previous topic next topic HTML Headings
  • The HTML headings are used to define the heading ...
    Click Here
Previous topic next topic HTML Formatting Elements
  • The <b>  element is use for bold text, without ...
    Click Here
Previous topic next topic HTML Comments
  • The HTML Comment are describe the extra feature about ...
    Click Here
Previous topic next topic HTML Attributes
  • Every HTML element can have attributes.
  • The HTML Attribute ...
    Click Here
Previous topic next topic HTML Images
  • The <img> tag is empty
Note: The empty ...
Click Here
Previous topic next topic HTML Links
  • HTML links are hyperlinks.
  • HTML link default color is ...
    Click Here
Previous topic next topic HTML Table
  • An HTML table is defined with the <table> tag.
  • ...
    Click Here
Previous topic next topic Table Backgrounds You can set the table background using one of the ...
Click Here
Previous topic next topic Table Header, tbody and Footer
  • Tables are categories into three parts: ...
    Click Here
Previous topic next topic Basic to Advance table design in HTML Example 1 <!DOCTYPE> <html> <body> ...
Click Here
Previous topic next topic HTML div tag
  • The <div>  element is used for style blocks ...
    Click Here
Previous topic next topic HTML Lists
  • The list is the way to present the data ...
    Click Here
Previous topic next topic HTML Form
  • The HTML <form> element is used to collect user ...
    Click Here
Previous topic next topic HTML Iframe Tag
  • <iframe> an inline frame with an HTML tag ...
    Click Here
English Hindi