HTML-Booklet

A structure will take contribution from the site guest and afterward will present it on a back-end application, for example, CGI, ASP Script or PHP content and so on. The back-end application will perform required preparing on the passed information dependent on characterized business rationale inside the application. 

The HTML <form>tag is utilized to make a HTML structure and it has following grammar.

<form activity = “Content URL” technique = “GET|POST”
structure components like info, text area and so forth. 
</form> 

HTML Form Controls 

There are various sorts of structure controls that you can use to gather information utilizing HTML structure.

1.Text Input Controls 
2.Check boxes Controls 
3.Radio Box Controls 
4.Select Box Controls 
5.Record Select boxes 
6.Concealed Controls 
7.Interactive Buttons 
8.Submit and Reset Button 

Text Input Controls 

There are three sorts of text input utilized on structures. 

Single-line text input controls−This control is utilized for things that require just one line of client input, for example, search boxes or names. They are made utilizing the HTML <input> tag.

Secret key information controls−This is likewise a solitary line text input yet it covers the character when a client enters it. They are likewise made utilizing HTMl <input> tag. 

Secret word input controls 

This is additionally a solitary line text input yet it covers the character when a client enters it. They are additionally made utilizing the HTML <input>tag however type ascribe is set to secret phrase. 

Model 

Here is a fundamental case of a solitary line secret key information used to take client secret key 

Multi-line text input controls − This is utilized when the client is required to give subtleties that might be longer than a solitary sentence. Multi-line input controls are made utilizing the HTML <text area> tag. 

<!DOCTYPE html>
<html>
<head>
<title>Secret word input controls</title>
</head>
<body>
<form >
First name:<input type=”text” name=”first_name”/>
<br>
Last name:<input type=”text” name=”last_name”/
<br>
Password:<input type=”Password” name=”Password”/>
</form>   
</body>
</html>

Output:

First name:
Last name:
Password:

Single-line text input controls 

This control is utilized for things that require just one line of client input, for example, search boxes or names. They are made utilizing the HTML <input> tag. 

Model 

Here is an essential case of a solitary line text input used to take first name and last name. 

<!DOCTYPE html>
<html>
<head>
<title>Single-line text input controls</title>
</head>
<body>
<form>
User Name :<input type=”text” name=”user_name”/>
<br>
Password:<input type=”password” name=”password”/>
</form>   
</body>
</html>

Output:

Username:Password:

Numerous Line Text Input Controls 

This is utilized when the client is required to give subtleties that might be longer than a solitary sentence. Multi-line input controls are made utilizing the HTML <textarea> tag. 

Model 

Here is a fundamental case of a multi-line text input used to take thing depiction.

<!DOCTYPE html>
<html>
<head>
<title>Numerous Line Text Input Controls</title>
</head>
<body>
<form>
Description :<br/>
<textarea rows = “5” cols = “40” name = “description”>
<p>Type description here…</p>
</textarea>
</form>   
</body>
</html>

Output:

Description:

Checkbox Control 

Checkboxes are utilized when more than one choice is required to be chosen. They are likewise made utilizing the HTML <input> tag however the sort credit is set to checkbox.. 

Model 

Here is a model HTML code for a structure with two checkboxes. 

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type=”checkbox” name=”Male” value=”on”> Male
<input type=”checkbox” name=”Female” value=”on”> Female
</form>   
</body>
</html>

Output:

Male

Female

 

Radio Button Control 

Radio catches are utilized when out of numerous choices, only one alternative is required to be chosen. They are likewise made utilizing the HTML <input> tag yet the sort credit is set to radio. 

Model 

Here is a model HTML code for a structure with two radio catches. 

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type=”radio” name=”Male” value=”on”> Male
<input type=”radio” name=”Female” value=”on”> Female
</form>   
</body>
</html>

Output:

Male

Female

 

Select Box Control 

A select box, additionally called drop down box which gives a choice to list down different alternatives as drop down rundown, from where a client can choose at least one choices. 

Model 

Here is a model HTML code for a structure with one drop down box. 

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name=”dropdown”>
<option value=”Male” selected>Male</option>
<option value=”Female”>Female</option>
</select>
</form>   
</body>
</html>

Output:

Document Upload Box 

In the event that you need to permit a client to transfer a document to your site, you should utilize a record transfer box, otherwise called a record select box. This is likewise made utilizing the <input> component yet type credit is set to document. 

Model 

Here is model HTML code for a structure with one record transfer box.

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

Output:

 

Concealed Form Controls 

Concealed structure controls are utilized to shroud information inside the page which later on can be pushed to the server. This control stows away inside the code and doesn’t show up on the genuine page. For instance, the accompanying concealed structure is being utilized to keep the present page number. At the point when a client taps the following page then the estimation of concealed control will be sent to the web server and there it will choose which page will be shown next dependent on the passed current page. 

Model 

Here is a model HTML code to show the use of shrouded control.

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is Document 12</p>
<input type=”hidden” name=”page name” value=”12″/>
<input type=”submit” name =”submit” value=”Submit”/>
<input type=”reset” name=”reset”  value=”Reset”/>
</form>   
</body>
</html>

Output:

This is Document 12

 

Share