...

Web Technologies - HTML

Back to Course

Lesson Description


Lession - #153 HTML Forms



When you wish to collect information from a site visitor, HTML Forms are necessary. For example, during user registration, you could want to collect information such as a user's name, email address, credit card number, and so on.
A form will collect information from site visitors and then send it to a back-end programme such as CGI, ASP Script, or PHP script, among others. Based on the established business logic inside the application, the back-end application will do the necessary processing on the provided data. Text fields, textarea fields, drop-down menus, radio buttons, checkboxes, and other form components are accessible.

Form Attributes

Apart from common attributes, following is a list of the most frequently used form
attributes −


<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>


Attributes

Following is the list of attributes for <input> tag for creating text field.
Sr.No Attribute & Description
1

action

The backend script is now ready to process the data you supplied it.

2

method

The method that will be utilised to upload data. The GET and POST methods are the most often utilised.

3

target

Specify the target window or frame in which the script's output will be shown. It accepts values such as _blank, _self, _parent, and so on.

4

enctype

You may use the enctype property to tell the browser how to encrypt data before sending it to the server. Among the possible values are −

application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios.

mutlipart/form-data − This is the usual approach used by most forms in simple circumstances.

5

mutlipart/form-data

This is used to upload binary data in the form of files such as images, word documents, and so on.


Note − You can refer to Perl & CGI for a detail on how form data upload works.

HTML Form Controls

There are different types of form controls that you 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

On forms, there are three sorts of text input.
  • Single-line text input controls - are used for elements that only require one line of user input, such as search boxes or names. They are made with the HTML <input> tag.
  • Password input controls - This is a single-line text input that masks the character as soon as the user inputs it. They are also made with the HTMl <input> tag.
  • Multi-line text input controls - are used when the user is needed to provide information that is longer than a single phrase. The HTML <textarea> element is used to construct multi-line input controls.


Single-line text input controls-

This control is used for objects that just require one line of user input, such search boxes or names. They are made with the HTML <input> tag. Example
Here is a basic example of a single-line text input used to take first name and last name −

  
<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
  
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
  
</html>




Attributes

Following is the list of attributes for <input> tag for creating text field.
Sr.No Attribute & Description
1

type

Used to give the control a name before sending it to the server to be identified and returned the value.

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 may be used to set an initial value within the control.

4

size

Allows you to define the text-input control's width in characters.

5

maxlength

Allows you to limit the number of characters a user may enter into the text field .



Password input controls

This is similarly a single-line text input, but the character is hidden as soon as the user types it. They are also made with the HTML input>tag, but the type attribute is set to password.
Example
Here is a basic example of a single-line password input used to take user password -

  <!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
  
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
  
</html>



Attributes

Following is the list of attributes for <input> tag for creating password field.
Sr.No Attribute & Description
1

type

Used to give the control a name before sending it to the server to be identified and returned the value.

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 may be used to set an initial value within the control.

4

size

Allows you to define the text-input control's width in characters.

5

maxlength

Allows you to limit the number of characters a user may enter into the text field .


Multiple-Line Text Input Controls

This is used when the user is asked to provide information that is longer than a single phrase. The HTML textarea> element is used to construct multi-line input controls.

  
<!DOCTYPE html>
<html>

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


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

The number of rows in the text area box is indicated by this parameter.

3

cols

The number of columns in the text area box is indicated by this parameter.


Checkbox Control

When more than one choice must be selected, checkboxes are utilised. They are also made with the HTML input> tag, but the type attribute is set to checkbox.
Example: Here is an example HTML code for a form with two checkboxes −

<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
  
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
  
</html>


Attributes

Following is the list of attributes for radio button.
Sr.No Attribute & Description
1

type

Used to give the control a name before sending it to the server to be identified and returned the value.

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 may be used to set an initial value within the control.

4

checked

If you want it to be selected by default, set it to <i>checked </i>.


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:
Here is example HTML code for a form with two radio buttons −
  
<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>


Attributes

Following is the list of attributes for radio button.
Sr.No Attribute & Description
1

type

Used to give the control a name before sending it to the server to be identified and returned the value.

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 may be used to set an initial value within the control.

4

checked

If you want it to be selected by default, set it to <i>checked </i>.


Select Box Control

A select 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
Here is example HTML code for a form with one drop down box

  
<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
  
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
  
</html>

Attributes

Following is the list of attributes for <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.


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


File Upload Box

A file upload box, commonly known as a file choose box, is required if you wish to allow a user to upload a file to your website. The input> element is used again, but the type property is set to file.


<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
      <input type = "file" name = "fileupload" accept = "image/*"/>
      </form>
   </body>
  
</html>

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.

Controls through Buttons

There are several techniques to make clickable buttons in HTML. You can also use the <input>tag to create a clickable button by setting its type attribute to button. The type property can be set to any of the following values:
Sr.No Type & Description
1

submit

This is used to create a button that automatically submits a form.

2

reset

This is used to create a button that automatically resets form controls to their initial values.

3

button

This is used to create a button that is used to trigger a client-side script when the user clicks that button.

4

image

This is used to create a clickable button but we can use an image as background of the button.



<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</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 = "/html/images/logo.png" />
      </form>
   </body>
  
</html>

Controls for Hidden Forms

Hidden form controls are used to conceal data inside a page that can subsequently be transferred to the server. This control is hidden within the code and is not visible on the real page. For example, the following hidden form is used to maintain track of the current page number. When a user clicks next page, the value of the hidden control is communicated to the web server, which determines which page will be displayed next depending on the previous page.
Example
Here is an example HTML code that demonstrates the use of a hidden control.



<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</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>