Form in HTML16 min read

1. What is a form in html ?

  • A Form in HTML can be defined as a tool that is used to collect all the input information from the user for further processing.
  • The forms are created using controls like text boxes, click buttons, radio buttons, checkboxes, list boxes, etc for entering or selecting data vià GUI (Graphical User Interface) controls.
  • A form is the physical carrier of data and information and it also carries the authority for action.
  • One may have more than one form in the document to collect related information from each form.

Generally, forms are classified as,

  • Registration forms
  • Subscription forms
  • Response forms
  • Ordered Entry forms
  • Complaint form

After completion of data entry, one must submit the data for further processing using say SUBMIT button. This helps the browser to send the data to the webserver to process using JavaScript, VBScript, ASP, JSP, PERL, CGI program, etc. In the end, it must acknowledge the user by means of some response. Thus forms are useful for

  • Interacting with users on the web to gather necessary data and hence known as User Interface.
  • Upload this data from user to server i.e data filled by the user becomes a database for a web page designer

2. Principles on guidelines to design a form in HTML

A form design is a highly intuitive human-computer interaction method whereby data fields are formatted in a manner similar to paper-based forms. Form interaction is effective for both the input and presentation of information and hence one should design it very effectively. The general considerations of form design are given below:

  1. The order of data items should be proper and must be in the same sequence as that of source documents ie, the screen should simulate the paper document,
  2. Forms title, Label title, commands button caption should be meaningful,
  3. Ease of data entry,
  4. The size of the form should fit within the window.
  5. Highlighting the important things by means of Bold, Blinking. Underline etc )
  6. Use proper color, sound, menu (Popup, Pushdown, cascading, iconic, menu bars, etc), Dialog box, function keys, and icons to a different parts of forms of the system according to requirement.
  7. The balanced layout between screens and Spacing among different fields or labels.
  8. Easy navigation by showing how to move forward and backward.
  9. Whenever there is a need for compromise then sacrifice decorations but retain the clarity.

Example

Design a Form in HTML to Accept the Student Information for Admission Using GUI Controls. Use Suitable Fields where

  1. Automatic Generation of Form Number through Coding.
  2. Automatic Generation of Date and Time through Coding.
  3. Text Boxes for Accepting Student Name.
  4. A textbox with a multiline facility says for Address.
  5. Combo box to select a course.
  6. Options button to select sex.
  7. Frame to group various control.
  8. Checkbox to select more than one option.
  9. Command button to take necessary action.

Building a Form in HTML

A form is the physical carrier of data and information and it also carries the authority for action i.e. forms make it possible to create a document that enables the user to enter data and process the data on submission to a web server. In short, HTML forms allow you to create Interactive Web Pages where users can fill out a form, submit it, and then depending on the value submitted web pages that can be customized for you.

Users can build or construct a form in HTML using the following major tags

  1. A container tags <FORM>..</FORM>
  2. A singular tag <INPUT>

3. How to define a form in HTML

The forms are used to get input from the user. A form is defined or created with the pair tag <FORM>..</FORM>.

Syntax: <FORM Attributel = “Value” Attribute2 = “Value” ……… >

Form Attribute

The form tag has the following attributes,

  1. 1) ACTION: It informs the browser of the location of the server program to which the form input has to be submitted.
    • <FORM ACTION=”mailto:[email protected]>
    • If you do not specify the ACTION attribute, the URL of the current document is considered
  2. 2) METHOD: This attribute specifies the method by which the browser sends the data in the form field to the server for further processing. The method attribute has two choices.
    • i) Method=”GET” – This method is useful while
      • a) Sending a small amount of data value back to the server or
      • b) When one would like to retrieve the data from the database by means of the query.
      • c) This method is not very secure since data input appears in the URL.
      • d) It may create problems with a foreign language environment i.e. it is difficult to append the contents of languages other than English in URL.
    • ii) Method=”POST”
      • a) This is a default method value.
      • b This method is useful while sending a large amount of data value back to the server.
      • c) This method is secure as form contents are not in the URL. It is even possible to send the content of the file using this method.
  3. NAME: Corresponds to the name of the FORM.
  4. TARGET: The name of the frame or window. The form submission response is sent to the server. Corresponds to the FORM TARGET attribute.

4. The (INPUT Tag)

The primary tag that is used in a form in HTML is the <INPUT> tag. The input tag allows users to input data to the Web server using various types of input fields.

Types of Field Types

Following are specific types of GUI controls that can be used by the INPUT tag.

  1. Text
  2. Password
  3. Radio
  4. Checkbox
  5. Button
  6. Hidden
  7. Image
  8. File

Syntax: <INPUT TYPE=FIELD_TYPE NAME=NAME_OF_FORM_OBJECT>

Each of the above form elements/objects can be named. These names can be used by scripting languages like JavaScript, VBScript, etc for referring to them.

5. TEXT Fields

This is one of the most common types of form fields to enter data. The Text Object is a property of the form object. One can enter alphabetic, number, or alphanumeric data. Consider the following example,

<INPUT TYPE=”TEXT” NAME = FNAME SIZE=”25″ MAXLENGTH = 35>

In the above example,

FNAME is a name given to the textbox and one can view at a time maximum of 25 characters on screen though one can accept a maximum of 35 characters only. When MAXLENGTH attribute is not specified then one can accept an unlimited number of characters.

A form to Accept Name and Class of Student

<HTML> 
 
 <HEAD>
 <TITLE> DEMO OF TEXT FIELD </TITLE> 
 <HEAD> 
 
 <BODY> 
  
  <FORM NAME="STUDENT" METHOD="POST">
  
  <B>NAME</B> <INPUT TYPE ="TEXT" NAME = FNAME SIZE = "25" MAXLENGTH = 35> <BR> 
  <B>CLASS</B> <INPUT TYPE ="TEXT" NAME = CLASS SIZE = "10" MAXLENGTH = 15> 
  
  </FORM>
 
 </BODY> 

</HTML>

6. Password Fields

This control is similar to that of Text field Control and useful for security purposes i.e. when a user enters a password or security number or a credit card number. Password text is not echoed on the screen and displays only * for each character typed in.

<INPUT TYPE=PASSWORD NAME=”PWORD” SIZE=”9″ MAXLENGTH=13>

In the above example,

PWORD is a name given to the textbox and one can view at a time maximum of 8 characters on screen though one can accept a maximum of 13 characters only. When MAXLENGTH attribute is not specified then one can accept an unlimited number of characters.

Example

A Form to Accept ATM Number and Pin Number

<HTML> 

 <HEAD>
 <TITLE> DEMO OF PASSWORD FIELD </TITLE> 
 </HEAD> 
 
 <BODY>
  
  <FORM NAME="BANK" METHOD="POST">
    
  <B>ATM NUMBER</B>
  <INPUT TYPE=TEXT NAME = ATMNO SIZE="10" MAXLENGTH= 10> <BR> <B>PIN NUMBER</B>
  <INPUT TYPE= PASSWORD NAME = PIN SIZE= "6" MAXLENGTH = 6> 
    
  </FORM>
  
 </BODY>
 
</HTML>

7. Radio Fields

These controls help the user to select one of the options out of many and hence it is also called Option Button control. One must assign the same name to all radio buttons you would like to group. Thus one can have any number of radio buttons but in order to group them their name should be the same.

<INPUT TYPE=RADIO NAME = “SEX” VALUE=”M” CHECKED> Male

<INPUT TYPE=RADIO NAME = “SEX” VALUE=”F”> Female

In the above example,

  • NAME=”SEX” denotes the name given to the radio button. Observe that the names of both radio buttons are given the same name in order to group them.
  • VALUE: Here value specifies what value is to be passed to the server. If the user clicks on the Male radio option then the value “M” is passed and if he selects Female then value F is passed to the webserver.
  • CHECKED: By default, none of the radio buttons is selected. If the user wants to set the default option then the CHECKED attribute should be specified.

To Select Donor Sex

<HTML> 

 <HEAD>
 <TITLE> DEMO OF RADIO </TITLE> 
 </HEAD> 
 
 <BODY> 
 
  <H2> DONOR </H2> 
    
   <H4> 
  
    <FORM NAME="DONOR" METHOD="POST">
      
     <INPUT TYPE=RADIO NAME = "SEX" VALUE= "M" CHECKED> Male <BR>
     <INPUT TYPE=RADIO NAME = "SEX" VALUE="F"> Female 
       
    </FORM>
  
   </H4>
  
 </BODY>
 
</HTML>

8. Checkbox Fields

These controls help the user to select one or many or none of the options. One must assign the same name to all checkbox buttons that you would like to group. Thus one can have any number of checkbox buttons but in order to group them their name should be the same.

  • <INPUT TYPE=CHECKBOX NAME=”DOCUMENT” VALUE=”SSC”> SSC
  • <INPUT TYPE=CHECKBOX NAME=”DOCUMENT” VALUE=”HSSC”> HSC
  • <INPUT TYPE=CHECKBOX NAME=”DOCUMENT” VALUE=”DEGREE”> DEGREE

In the above example,

  • NAME=”DOCUMENT” denotes the name given to the checkbox button. Observe that the names of all checkbox fields are the same in order to group them.
  • VALUE: Here value specifies what value is to be passed to the server. Here each checkbox is individually identified within the checkbox group by means of a unique value. In the end, all values that have been selected are passed to the webserver.

Example

To check the kind of document submitted by students while admission

<HTML> 
 
 <HEAD> 
  <TITLE>DEMO OF CHECKBOX</TITLE> 
 </HEAD> 
 
 <BODY> 
   
  <H2> DOCUMENT SUBMITTED <H2> 
 
  <H4>
 
   <FORM NAME="CHECKBOX" METHOD="POST">
 
   <INPUT TYPE=CHECKBOX NAME = "DOCUMENT" VALUE="SSC"> SSC <BR> 
   <INPUT TYPE=CHECKBOX NAME="DOCUMENT" VALUE="HSSC"> HSC <BR> 
   <INPUT TYPE=CHECKBOX NAME="DOCUMENT" VALUE="DEGREE"> DEGREE <BR> 
   <INPUT TYPE=CHECKBOX NAME = "DOCUMENT" VALUE= "CASTE"> CASTE CERTIFICATE <BR>
   <INPUT TYPE=CHECKBOX NAME = "DOCUMENT" VALUE="TC"> TC <BR> 
   <INPUT TYPE=CHECKBOX NAME = "DOCUMENT" VALUE="DEGREE"> MIGRATION 
  
   </FORM>
  
  </H4>
  
 </BODY>
 
</HTML>

Difference between a Radio button and Checkbox Button

Sr. No.Radio ButtonCheckbox Button
1)It helps to select only one option. It helps to select multiple options.
2)One must select at least one of the buttons. It is not necessary to select an option if not required.
3)One can set the default option button while loading forms. One can not set in HTML a default choice to be selected.
4)Clicking a non-selected radio button will deselect the earlier selected button in the list. Each checkbox is independent of all other checkboxes in the list, so clicking one box does not uncheck the others.
5)One must have at least two radio buttons.One can have only one checkbox that the user can turn on or off and known as a stand-alone check box.
6)If only one radio button is in the form and selected then we can not deselect it by pressing the same radio button i.e. it does not support the concept of the toggle feature.One can select or deselect a single check box. It supports the concept of the toggle feature.
7)It follows the concept of exclusive logic. It follows the concepts of non-exclusive logic.

9. Button Fields

The button field represents a push button on an HTML form. HTML supports two types of button

  1. Submit
  2. Reset

9.1 Submit Button

On clicking submit button browser sends the information of the form to the web server specified in the ACTION attribute for processing. The SUBMIT button can be created using the following code,

  • <INPUT TYPE=SUBMIT VALUE=”Submit”>

Using the VALUE attribute you can change the label of the button to one of your choices. You can have multiple submit buttons within a FORM along with a unique NAME attribute. When the user clicks the Submit button the control is transferred to the first line of code. One can also align the submit button at the browser window by value.

Example

Form to submit data for processing

<HTML> 
 
 <HEAD>
 <TITLE> DEMO OF SUBMIT BUTTON </TITLE> 
 </HEAD> 
 
 <BODY> 
 
  <FORM NAME="STUDENT" METHOD="POST">
    
   <B>NAME</B> 
   <INPUT TYPE = "TEXT" NAME = FNAME SIZE="25" MAXLENGTH CLASS = 35> <BR> 
   <B>NAME</B>
   <INPUT TYPE = "TEXT" NAME = CLASS SIZE = "10" MAXLENGTH INPUT TYPE = 15> <BR> 
   <INPUT TYPE = SUBMIT VALUE = Submit>
  
  </FORM>
 
 </BODY> 

</HTML>

9.9.2 Reset Button

The RESET button, which is usually used along with the submit button helps

  1. Clear all form field values or
  2. Resets back to the value of the form including default values if any when loaded for the first time.

The RESET button can be included as follows:

  • <INPUT TYPE= RESET VALUE=Reset_Values >

10. Image Field

It works like submit button but instead of clicking on the text push button image control support clicking on the image to perform the desired operation. One needs to specify the SRC attribute for the image.

Syntax

<input type = “…” name = “… igif” onclick = “submitf. ormes” border “a”>

11. HIDDEN Field

The hidden field is usually used to transfer some constant data that need not be changed when transferred to the webserver. Hidden control which is non-visible on the browser can be created using the following code

<INPUT TYPE = HIDDEN NAME = “Object_Name” VALUE = “Hidden Value”>

When the form is submitted, the name and value of the object are sent as the hidden object is useful for storing previous form information when there are several pages of forms.

12. FILE Field

It lets users enter or select the file name via the Browse button either from the local computer or a network. When users finally press submit button Ok the contents of the file are sent to the webserver.

Example

Form to accept file name using FILE control

<HTML>

 <HEAD>
  <TITLE> DEMO OF FILE CONTROL </TITLE> 
 </HEAD> 
 
 <BODY> 
 
  <FORM NAME="UPLOAD" METHOD="POST"> 
    <B> File to be uploaded </B>
  <INPUT TYPE = FILE NAME=UPLOAD FILE> <BR> 
  <INPUT TYPE = SUBMIT VALUE=OK>
  
 </BODY> 

</HTML>

13. TextArea Tag

In terms of appearance and behavior, it looks like the TEXT field. TEXT field is used to accept a single line of text whereas TEXTAREA is useful to accept several lines including paragraphs. Users can control how large it should be by specifying the number of rows and columns by using attributes ROWS and COLS respectively. Some browser automatically word-wrap the text specified in TEXTAREA. It is basically useful to accept Addresses or some comments/suggestions/Complaints.

The pair <TEXTAREA>..</TEXTAREA> tags supports following attributes

  • ROWS: It helps to set the number of rows of text that should be visible at a time without horizontal scrolling
  • COLS: It helps to set the number of characters of text that should be visible at a time without vertical scrolling
  • NAME: To specify the name of the TEXTAREA field

Example

Form to Accept student Name and Address

<HTML>
 
 <HEAD>
  <TITLE> DEMO OF TEXTAREA FIELD </TITLE> 
 <HEAD> 
   
  <BODY>
  
   <FORM NAME="STUDENT" METHOD="POST"> 
     
    <B>NAME</B>
     <INPUT TYPE="TEXT" NAME FNAME SIZE="10" MAXLENGTH 15> <BR>
    <B> ADDRESS </B> <BR>
    <TEXTAREA NAME = ADDRESS, ROWS = 4 > </TEXTAREA>
       
   </FORM> 
     
  </BODY>
     
</HTML>

14. Select Tag

It is used to create a list of options in a box called a list box or drop-down list box, or selection list or selection box. If there are too many options then instead of specifying the radio button it is advisable to use a select tag that also supports selecting more than one option. One must specify the item/option list using the OPTION tag within the SELECT tag. The pair tag <SELECT>..</SELECT> tags support the following attributes,

  • MULTIPLE: It helps the user to select more than one option from the list box. (Use the Control key for multiple selections)
  • SIZE: It helps to specify the number of visible items at a time. It shows a Listbox if the size value is greater otherwise it shows items in a drop-down Listbox.
  • NAME: It helps to specify the name to Listbox.

.

15. OPTION TAG

It can only occur within a SELECT tag. It helps to specify the list of options in the list and supports the following attributes

  • SELECTED: Indicates the option is initially selected.
  • VALUE: It specifies the value to be passed to the webserver when a particular option is selected.
<HTML>

 <HEAD>
  <TITLE> DEMO OF SELECT TAG </TITLE> 
 </HEAD> 
 
  <BODY>
   
   <FORM NAME="SELECT" METHOD="POST"> 
    
    <B> SELECT COURSE </B> <BR> 
    
     <SELECT NAME=COURSE SIZE=1> 
   
      <OPTION VALUE=1 SELECTED> MCA </OPTION> 
      <OPTION VALUE=2> M.Sc (IT) </OPTION> 
      <OPTION VALUE=3> M.Sc. (C/S) </OPTION> 
      <OPTION VALUE=4> MCM </OPTION>
   
   </FORM>
  
  </BODY>

</HTML>

Share:

Leave a Reply