HTML - Forms

HTML - Form

HTML forms have become an integral part of the web. Forms enable website users to enter and submit data via the website. Forms are created by using the <form> tag. The <form> element declares the form, but you also need to place form-associated elements inside this element (or reference the form via the form-associated element's form attribute). The elements you use will depend on what you want the form to do.
A form will take input from the site visitor and then post it to a back-end application. The back-end application will perform required processing on the passed data based on defined inside the application.

Form Attributes

Sr.No	Attribute & Description
1	action Backend script ready to process your passed data.
2	method Method to be used to upload data. The most frequently used are GET and POST methods.
3	target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.

Sr.No

Attribute & Description

action

Backend script ready to process your passed data.

method

Method to be used to upload data. The most frequently used are GET and POST methods.

target

Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.

Form Controls

There are different types of form controls that we can use to collect data using HTML form.

Text Input Controls
Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Hidden Controls
Clickable Buttons
Submit and Reset Button

Text Input Controls

We use three types of text input on forms −

Single-line text input controls − This control is used to get only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
Password input controls − This is also a single-line text input and used to define a password field. They are also created using HTMl <input> tag.
Multi-line text input controls − This is used to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Example of Single-line text input

<!DOCTYPE html>
<html>
   <head>
      <title>Single Text Input Control</title>
   </head>	
   <body>
      <form >
         Name: <input type = "text" name = "fname" />
         <br>
         Course: <input type = "text" name = "course" />
      </form>
   </body>	
</html>

Output

Example of Password input

<!DOCTYPE html>
<html>
   <head>
      <title>Password input Control</title>
   </head>	
   <body>
      <form >
         Name: <input type = "text" name = "fname" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>	
</html>

Output

Attributes

Following is the list of attributes for <input> tag for creating text and password field.

Sr.No	Attribute & Description
1	type Indicates the type of input control and for text and password input control it will be set to text and for password set topassword.
2	name Used to give a name to the control which is sent to the server to be recognized and get the value.
3	value This can be used to provide an initial value inside the control.
4	size Allows to specify the width of the text-input control in terms of characters.
5	maxlength Allows to specify the maximum number of characters a user can enter into the text box.

Multiple-Line Text Input Controls

This is used when the user give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Example of rowspan

<!DOCTYPE html>
<html>
   <head>
      <title>Multiple-Line Input Control</title>
   </head>	
   <body>
      <form>
         Address : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter Full address here...
         </textarea>
      </form>
   </body>	
</html>

Output

Attributes

Following is the list of attributes for <textarea> tag.

Sr.No	Attribute & Description
1	name Used to give a name to the control which is sent to the server to be recognized and get the value.
2	rows Indicates the number of rows of text area box.
3	cols Indicates the number of columns of text area box

Sr.No

Attribute & Description

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

rows

Indicates the number of rows of text area box.

cols

Indicates the number of columns of text area box

Checkbox Control

Checkboxes 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

<!DOCTYPE html>
<html>
   <head>
      <title>Checkbox Control Example</title>
   </head>	
   <body>
    <p>Hobby:</p>
      <form>
         <input type = "checkbox" name = "cricket" value = "on"> Cricket
         <input type = "checkbox" name = "football" value = "on"> Football
      </form>
   </body>	
</html>

Output

Hobby:

Attributes

Following is the list of attributes for <checkbox> tag.

Sr.No	Attribute & Description
1	type Indicates the type of input control and for checkbox input control it will be set to checkbox..
2	name Used to give a name to the control which is sent to the server to be recognized and get the value.
3	value The value that will be used if the checkbox is selected.
4	checked Set to checked if you want to select it by default.

Radio Button Control

Radio buttons are used just one option is to be selected among many options, . It is created using HTML <input> tag but type attribute is set to radio.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Radio Box Control</title>
   </head>
   <body>
     <p>Gender:</p>
      <form>
         <input type = "radio" name = "gender"> Male
         <input type = "radio" name = "gender"> Female
      </form>
   </body>
</html>

Output

Gender:

Attributes

Following is the list of attributes for radio button.

Sr.No	Attribute & Description
1	type Indicates the type of input control and for checkbox input control it will be set to radio.
2	name Used to give a name to the control which is sent to the server to be recognized and get the value.
3	value The value that will be used if the radio box is selected.
4	checked Set to checked if you want to select it by default.

List Box Control

A list box, also called drop down box 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

<!DOCTYPE html>
<html>
   <head>
      <title>List Box Control Example</title>
   </head>	
   <body>
    Course:
      <form>
         <select name = "dropdown">
            <option value = "SEL" selected>Select one...</option>
            <option value = "MCA" selected>MCA</option>
            <option value = "BCA">BCA</option>
         </select>
      </form>
   </body>	
</html>

Output

Course:

Attributes

Following is the list of important attributes of <select> tag −

Sr.No	Attribute & Description
1	name Used to give a name to the control which is sent to the server to be recognized and get the value.
2	size This can be used to present a scrolling list box.
3	multiple If set to "multiple" then allows a user to select multiple items from the menu.

Sr.No

Attribute & Description

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

size

This can be used to present a scrolling list box.

multiple

If set to "multiple" then allows a user to select multiple items from the menu.

Following is the list of important attributes of <option> tag −

Sr.No	Attribute & Description
1	value The value that will be used if an option in the select box box is selected.
2	selected Specifies that this option should be the initially selected value when the page loads.
3	label An alternative way of labeling options

Sr.No

Attribute & Description

value

The value that will be used if an option in the select box box is selected.

selected

Specifies that this option should be the initially selected value when the page loads.

label

An alternative way of labeling options

File Upload Box

If we want to upload a file on web site then need to use a file upload box, also known as a file select box. This is created using the <input> element but type attribute is set to file.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>File Upload Box Example</title>
   </head>
   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>	
</html>

Output

Attributes

Following is the list of important attributes of file upload box −

Sr.No	Attribute & Description
1	name Used to give a name to the control which is sent to the server to be recognized and get the value.
2	accept Specifies the types of files that the server accepts.

Sr.No

Attribute & Description

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

accept

Specifies the types of files that the server accepts.

Input Type color element

<input type="color">This is used to define for input fields that should contain a color, a color picker can show up in the input field.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Color picker Control</title>
   </head>
   <body>
     <p>Pick Color:  </p>
      <form>
         <input type = "color" name = "color"> 
      </form>
   </body>
</html>

Output

Input Type Date element

<input type="date">This is used to define a date picker can show up in the input field.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Date picker Control</title>
   </head>
   <body>
     <p>Date of Birth:  </p>
      <form>
         <input type = "Date" name = "date"> 
      </form>
   </body>
</html>

Output

Date of Birth:

Input Type Email element

<input type="email">This is used to define for input fields that should contain an e-mail address, the e-mail address can be automatically validated when submitted.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Email picker Control</title>
   </head>
   <body>
     <p>Email ID:  </p>
      <form>
         <input type = "Email" name = "email"> 
      </form>
   </body>
</html>

Output

Email ID:

Input Type Number element
<input type="number">This is used to define a numeric input field.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Email picker Control</title>
   </head>
   <body>
     <p>Class:  </p>
      <form>
         <input type = "number" name = "number" min ="1" max ="10"> 
      </form>
   </body>
</html>

Output

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. The type attribute can take the following values −

Sr.No	Type & Description
1	submit This creates a button that automatically submits a form.
2	reset This creates a button that automatically resets form controls to their initial values.
3	button This creates a button that is used to trigger a client-side script when the user clicks that button.
4	image This creates a clickable button but we can use an image as background of the button.

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

Example for order registration form

<!DOCTYPE html>
<html>
   <head>
      <title>Order Registration Form</title>
   </head>
   <body>
<form id="register">
<h1>Register your details</h1>
  <fieldset> 
    <legend>Personal Details</legend> 
    <div> 
        <label>First Name <input id="given-name" name="given-name" type="text" placeholder="First name only" required 

autofocus> 
		</label>
    </div>
    <div> 
        <label>Last Name <input id="family-name" name="family-name" type="text" placeholder="Last name only" required 

autofocus> 
		</label>
    </div>
    <div> 
    	<label>Date of Birth <input id="dob" name="dob" type="date" required>
		</label>
    </div> 
    <div> 
        <label>Email  <input id="email" name="email" type="email" 

placeholder="example@domain.com" required>
		</label> 
    </div> 
    <div> 
        <label>URL 
        <input id="url" name="url" type="url" placeholder="http://mysite.com/">
		</label> 
    </div>    
    <div> 
        <label>Telephone <input id="phone" name="phone" type="tel" 

placeholder="Eg. +91 9835404035" required>
		</label> 
    </div> 
	<div>
		<label>Shoe size <input id="shoes" name="shoes" type="number" min="5" max="18" step="0.5" 

value="9">
		</label>
	</div>
	<div>
		<label>Flying Skill level (1 low - 100 high)
		<input id="skill" name="skill" type="range" min="1" 

max="100" value="0">
		<output name="output" 
onforminput="value=a.value">0</output>
		</label>
	</div>
  </fieldset>

  <fieldset> 
    <legend>Billing address</legend> 
    <div> 
        <label>Address 
        <textarea id="address" name="address" rows=5 required></textarea>
		</label> 
    </div> 
    <div> 
        <label>Post code 
        <input id="postCode" name="postCode" type="text" required>
		</label> 
    </div> 
    <div> 
        <label>Country 
        <input id="country" name="country" list="country-names" type="text" required> 
        <datalist id="country-names"> 
        	<option label="England" value="England"></option> 
        	<option label="India" value="India"></option> 
        	<option label="Ireland" value="Ireland"></option> 
        	<option label="Scotland" value="Scotland"></option> 
        	<option label="Wales" value="Wales"></option> 
        </datalist>
		</label> 
    </div> 
  </fieldset> 
  <fieldset> 
    <legend>Card details</legend> 
    <fieldset> 
      <legend>Card type</legend> 
      <div class="card-type"> 
          <input id="visa" 

name="cardtype" type="radio"> 
          <label 

for="visa">VISA</label> 
          <input id="mastercard" 

name="cardtype" type="radio">
          <label 

for="mastercard">Mastercard</labe

l> 
          <input id="amex" 

name="cardtype" type="radio"> 
          <label 

for="amex">AMEX</label>
      </div> 
    </fieldset>
    <div> 
        <label>Name
        <input id="cardName" 

name="cardName" type="text" 

placeholder="Name as it appears 

on your card" required>
		</label>  
    </div>
    <div> 
        <label>Card number 
        <input id="cardNo" 

name="cardNo" type="number" 

required title="The sixteen digit 

number across the middle of your 

card."> 
		</label>
    </div>
    <div> 
        <label>Security code 
        <input id="security" 

name="security" type="number" 

required pattern="[0-9]{3}" 

title="The last three digits on 

the back of your card.">
		</label> 
    </div>
    <div> 
        <label>Expiry Date 
        <input id="expiry" 

name="expiry" type="month">
		</label>
    </div>
  </fieldset> 
  <fieldset> 
  	<div> 
	    <button 

type=submit>Place Order</button> 
    </div> 
  </fieldset> 
   </form> 
  </body>
</html>

Output

Fill your details
Personal Details
First Name
Last Name
Date of Birth
Email
URL
Telephone
Shoe size
Flying Skill level (1 low - 100 high) 0
Billing address
Address
Post code
Country
Card details
Card type
VISA Mastercard AMEX
Name
Card number
Security code
Expiry Date

«1 2 3 4 5 6 7 8 9 10 »

Ad Code

HTML - Forms

Form Attributes

Example of Single-line text input

Output

Example of Password input

Output

Attributes

Multiple-Line Text Input Controls

Example of rowspan

Output

Attributes

Checkbox Control

Example

Output

Attributes

Radio Button Control

Example

Output

Attributes

List Box Control

Example

Output

Attributes

File Upload Box

Example

Output

Attributes

Example

Output

Example

Output

Example

Output

Example

Output

Example for order registration form

Output

Fill your details

Posted by RK Tutorials

You may like these posts

Post a Comment

0 Comments

Topics

Most Popular

Facebook

About Me

Followers

Total views

Advertisement

Ad

Ad Code

Footer Menu Widget

Contact form