Forms in HTML:

You always find a form in any website. For example a contact us form. You may also have filled so many forms for example you can apply online for any bank exam, competitive exam, or also so many of you filled online matrimonial form. So how could you make this type of form?

In HTML you have a special element to do this. The <form> opening and </form> closing tag is used to create a form. A form is a collection of text box, buttons, check box and radio buttons. So in this topic we will learn about these fields which I mentioned above.

There is list of some common form element which will used often to make a form.

  • Text Field
  • Password Field
  • Radio Button
  • Checkbox control
  • Textarea
  • Select Field
  • Button
  • Submit and Reset

The INPUT Element:

This is the most important element of form. If you want to use text, checkbox, or radio button so you have to put these fields inside input element.

The Text Field:

When you want to receive information from user at that time this field will be used. It’s a rectangular box in which you have to type some text which is related to that text field.

Attributes:

Text field have some attributes which are as follows:

type: defines the type of input control

name: name of control

value: displays when form get loads

size: defines the width of text field in terms of characters

maxlength: to specify maximum no of character

Example:

Note:

The predefined width of text field is 20 characters. But if you want to extend the width of text field you have to apply style to it.

The Password Field:

As the field name password means it is to make password and you already know that password is not display in actual character either it displays as astrisk “*” or in black filled circle.

Attributes: The attributes of Password field is same as Text field.

Example:

 

Radio Buttons in a Form:

In a form radio button is use to select only one option from many option. So when you want to make a form in which you have multiple option but you want to select only one at that time use radio button control.

Attributes:

type: defines the type of input control

name: name of control

value: if the option is selected than the value is sent to server

checked: indicates that the option is selected when form loads

 Example:

Following is a simple example

Example:

Following is with “checked” attribute

Checkboxes in a Form:

In a form checkboxes is used to select one or more option at a time. So if there is a multiple selection pattern in a always use checkboxes.

Attributes: All attributes are same as Radio button control.

Example:

Example:

Following is with “checked” attribute means the check box which set as checked will display checked on browser

 

The Textarea Field:

The textarea field is used in a form to take multiple lines from user. If you ever fill a form like in which they require user details for example billing , so at that time you can use Textarea field for that.

Whatever text you written in between <textarea> and </textarea> tag it will display by default when page loads.

Attributes:

Following are attributes of Textarea:

name: specify the name of textarea

rows: defines the no of rows of textarea

cols: defines the no of columns of textarea

Example:

Example:

In following example we set the number of columns and rows.

Note:

By default the “Address” word will be display at the bottom of textarea but you can change it by applying Style to it. By following example you can understand it.

Example:

The Select Field:

To make a drop down list we use <select> opening and </select> closing tag in form and <option></option> tag will come inside it. Option tag is use to input values of drop down list. In any dropdown list you can select one option or you can also select multiple options.

Attributes:

name: specify the name of select box

size: used to display no of option in scrolling list

multiple: if set “yes” so that user can select multiple option from list

value: it is use to send value to the server when selected

selected: it is used inside option and the value is always selected in which you apply this attribute

Example:

Following is a simple example of drop down list

Example:

Following example is for multiple selections

 

Example:

Following example is for selected option

Buttons in Form:

In HTML you can make different types of buttons. To add a button to your form you have to use <input> tag. In <input> tag you have to specify the type of button. In HTML there are three types of button.

They are as follows:

button: it is a very simple button which triggers the script when user click that button

submit: it will automatically submit data when user press the enter key on keyboard

reset: it will reset or clear all the fields of form

Example:

In following example we used “button”:

Example:

In following example we used “submit” and “reset”

Action and Method Attribute in a Form:

Action and method are very important attribute in a form. By giving an action we send data from this page to another page and by method we can give the type of method which we learn in our PHP tutorial. In action we give the path of another page so create that page also otherwise it will give you “404” means “Object not found” error.

Example:

File Upload Field:

If a user wants to upload a file from his desktop or PC in a form like he wants to upload his photos, any .jpg or .pdf file for this file attribute of <input> tag will used.

One thing you should know that if you are uploading a file than you have to use “enctype=”multipart/form-data” attribute in form tag.

When you use this field on browser you have seen a button with “Browse” value and a text box with value “No file selected” and when you select a file the file name will be display there.

Example:

Hidden Control in Form:

If you want to send data from one page to another page and you want that user should not see that data so this time you have to send data in a hidden format. For that “hidden” type is used in <input> tag.

Example:

 

Leave a Reply

Your email address will not be published. Required fields are marked *