How to insert HTML forms controls and their attributes?

Forms in HTML

Any organisation can communicate with people through its website and if this organisation provides some services (like user registration, online job application etc) to the general public, then this organisation has to provide online facility of collecting information from people who are willing to apply. This information over website can be easily collected with the help of forms which we are going to study.

HTML forms are required over website of organization to collect user input. These form elements are used in dynamic pages. The data can be entered through the form input elements and submit to the action page.

HTML Forms are required, when you want to collect some data from the site visitor. For example, user registration for job.

As a manager of a company, you would like to collect information such as name, email address, age, qualification, date of birth etc of user whom you are going to hire. This information is collected with the help of form. Forms are nothing but a replica of any physical form which is structured into soft copy form.

A form will take input from the site visitor and then will post it to a back-end application such as PHP script or any other script. The back-end application will perform required processing on the passed data based on defined logic inside the application.

HTML uses a tag <form> to collect data from the user. This tag has an opening tag as <form> and closing tag as </form>.

General syntax of form is

<body>
	<form action = "Script URL" method = "GET or POST">
		User fills data by filling online form
	</form>
</body>

HTML Form Attributes

HTML form attributes are required to structure a form in web page. An HTML form frequently uses following attributes:

S.No.AttributeDescription
1action  Backend script ready to process your data.
2method  Used to upload data. The most frequently used are GET and POST methods.
3target  Specify the target window, where is to display data, in own window or in another tab. It takes values like _blank, _self, _parent etc.

Controls in HTML Form

Form controls are basically those attributes which make a form complete. They help form to take a best structure. You can say they are actual building blocks of a form. There are different types of form controls that you can use to collect data using HTML form:

  • Text Input Controls in HTML
  • Checkboxes Controls in HTML
  • Radio Box Controls in HTML
  • Select Box Controls in HTML
  • File Select boxes in HTML
  • Hidden Controls in HTML
  • Button controls (Submit and Reset Button in HTML)

Text Input Controls in HTML

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 in HTML

Single line text input controls are used when it is require to get single line information only. For example name of user, parentage, search etc. These input controls are created by HTML tag <input>. Let us take an example of collecting name and parentage of user.

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
Name: <input type = "text" name = "name_user" placeholder="Enter name" />
<br>
Parentage: <input type = "text" name = "name_parent" placeholder="Enter Parentage"/>
</form>
</body>
</html>

It results as:

Single line text input controls in HTML, www.programmingtutorial.in

In above result, we have used two text boxes in which name and parentage is required to enter. A placeholder is also used in both the text boxes. Placeholder holds the temporary values of text and diminishes while the text is entered.

S. No.AttributeDescription
1typeIndicates the type of input control and for text input control it will be set to text.
2NameIt is used to give a name to the control which is sent to the server to be recognized and get the value.
3ValueThis can be used to provide an initial value inside the control.
4SizeIt allows to specify the width of the text input control in terms of characters.
5maxlengthAllows to specify the maximum number of characters a user can enter into the text box.

Password input controls in HTML

This is also a single line text input but it masks the character or converts into asterisks as soon as a user enters it. They are also created using HTML <input> tag but type of attribute is set to password.

Let us take an example of user ID and password entry:

<!DOCTYPE html>
<html>
<head>
<title>ID and password code</title>
</head>
<body>
<form >
User ID: <input type = "text" name = "ID" placeholder="Enter Id" />
<br><br>
Password: <input type = "password" name = "Enter password" placeholder="Password"/>
</form>
</body>
</html>

It results as

Password input controls in HTML, www.programmingtutorial.in

Multiple Line Text Input Controls in HTML

Multiple line text input control is used when the user is required to give information which cannot be controlled in single line. Multi line input controls are created using HTML <textarea> tag. Let us take an example in which user enters his address.

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

It results

Multiple Line Text Input Controls in HTML, www.programmingtutorial.in

Rows and cols indicates number of rows and columns of textarea respectively.

Checkbox controls in HTML

While filling online form the condition may arise when user need to select more than one options. In that case, checkbox control is used to collect information. For example, to select the computer languages are known to user.

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control for computer languages</title>
</head>
<body>
<form>
<input type = "checkbox" name = "C language" value = "on"> C Language
<input type = "checkbox" name = "HTML" value = "on"> HTML
<input type = "checkbox" name = "CSS" value = "on"> CSS
</form>
</body>
</html>
Checkbox controls in HTML, www.programmingtutorial.in

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

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

Radio Button Control in HTML

When there many options and you have to select any one of them then, Radio buttons are used. They are created using HTML <input> tag but type attribute is set to radio. An example below shows code of radio.

<!DOCTYPE html>
<html>
<head>
<title>Radio button Controls for computer languages</title>
</head>
<body>
<form>
<input type = "radio" name = "language" value = "C"> C 
<input type = "radio" name = "language" value = "HTML"> HTML
<input type = "radio" name = "language" value = "CSS"> CSS
</form>
</body>
</html>
Radio Button Control in HTML, www.programmingtutorial.in

File Upload Box in HTML

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.

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box in HTML</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
File Upload Box in HTML, www.programmingtutorial.in

Select Box Control or drop-down in HTML

A select box produces a drop-down box in which user selects any one option out of many options in drop-down list in first attempt. In second attempt, another option can be selected. The HTML tag <select> is used with many option values.

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control in HTML</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "HTML">HTML</option>
<option value = "CSS">CSS</option>
<option value = "javaScript">javaScript</option>
</select>
</form>
</body>
</html>

Select Box Control or drop-down in HTML, www.programmingtutorial.in

Button Controls in HTML

Buttons in any web page are the important part of code. These are used to submit form to the server. 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.

S. No.TypeDescription
1submit  This creates a button that submits a form.
2resetThis creates a button that resets form controls to their initial values.
3buttonThis creates a clickable button.
4imageThis creates a clickable image button.
<!DOCTYPE html>
<html>
<head>
<title>Button controls in HTML</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = “D:\Programming Tutorial\logo.jpeg" />
 </form>
 </body>
 </html>
Button Controls in HTML, www.programmingtutorial.in

Hidden form controls in HTML

Hidden form controls are used to hide some content of form which can be later push to the server.

<!DOCTYPE html>
<html>
<head>
<title>Hidden tag in HTML</title>
</head>
<body>
<form>
<p>One input tag is hidden</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Hidden form controls in HTML, www.programmingtutorial.in