Html forms can let you store information from the site visitors. For example, you may want to collect information regarding his name, email and address etc. This information collected is then passed on to back end application for further processing. We use html <form> tag to create forms on a web page.
There are different input elements of a html form:-
- Text fields,
- Radio buttons,
- Drop down menu
- Check box
- File upload
- Submit button
Let’s learn how to create a html form using input elements.
Html input element
Html input <input> element lets you collect information in variety of different ways. e.g.
| Type | Description |
| <input type = “text”> | Will display text input field |
| <input type = “radio”> | Will display radio button field |
| <input type = “submit”> | Will display submit button |
| <input type = “checkbox”> | Will display checkbox button |
| <input type = “file”> | Will display file upload button |
-
Text input element:
As the name indicate, text input element lets you display a text field in a form. There are three different types of text element.
(i) Single line text input element
(ii) Password input element
(iii) Multi line text input element
(i) Single line text input:- We use single line text input element when information required is 1 -2 sentences long. let’s see the below example:
| <!DOCTYPE html> <html> <head> <title>Single line text input element</title> </head> <body> <form > First name: <input type=”text” name=”firstname” /> <br> Last name: <input type=”text” name=”lastname” /> </form> </body> </html> |
The result displayed will be as follows:
|
|
We can use following attributes for single line text input element:
| Attribute | Description |
| type | Type attribute indicate the field element to be used e.g. text field or radio button |
| name | Name attribute is used to indicate value for backend processing |
| size | Size attribute is used to specify maximum width of box |
| maxlength | Maxlength attribute is used to specify maximum number of character a user can enter into the field |
(ii) Password input element: We use password input element to store information in a password protected manner. Text entered is masked as soon as it is entered in to the box. You just have to set attribute type = “password” to display this field. Example is explained below:
| <!DOCTYPE html> <html> <head> <title>Password input element</title> </head> <body> <form > Username: <input type=”text” name=”username” /> <br> Password: <input type=”password” name=”password” /> </form> </body> </html> |
The result displayed will be as follows:
|
|
We can use following attributes for password input element:
| Attribute | Description |
| type | Type attribute indicate the field element to be used e.g. text field or radio button |
| name | Name attribute is used to indicate value for backend processing |
| size | Size attribute is used to specify maximum width of box |
| maxlength | Maxlength attribute is used to specify maximum number of character a user can enter into the field |
(iii) Multi line text input: We use multi line text input element when information required from user is 2 -3 lines long. Html tag <textarea> is used insert multi line text input field. Lets learn with following example how:
| <!DOCTYPE html> <html> <head> <title>Multiple Line text Input element</title> </head> <body> <form> Text box : <br /> <textarea rows=”6″ cols=”45″ name=”description”> Type your text here… </textarea> </form> </body> </html> |
The result will be displayed as:
|
|
We can use following attributes for multi line text input element:
| Attribute | Description |
| name | Name attribute is used to indicate value for backend processing |
| row | specify the number of rows to be used for text box |
| col | specify the number of columns to be used for text box |
-
Radio input element:
We make use of radio buttons when out of many options user is required to select only one option. Let’s learn with following example how to create a radio button.
| <!DOCTYPE html> <html> <head> <title>Radio button element</title> </head> <body> <form> <input type=”radio” name=”Gender” value=”Male”> Male <input type=”radio” name=”Gender” value=”Female”> Female </form> </body> </html> |
The result will be displayed as:
|
|
We can make use of following attributes for radio input element:
| Attribute | Description |
| type | Type attribute indicate the field element to be used e.g. checked button or radio button |
| name | Name attribute is used to indicate value for backend processing |
| value | Value to be used when box is selected |
-
Checkbox input element:
We make use of checkbox input element when user is given an option to choose from multiple options. Here attribute is set to checkbox. Lets see the example:
| <!DOCTYPE html> <html> <head> <title>Checkbox input element</title> </head> <body> <form> <input type=”checkbox” name=”Colors” value=”on”> Orange <input type=”checkbox” name=”Colors” value=”on”> Pink </form> </body> </html> |
The result will be displayed as:
|
|
We can make use of following attributes for radio input element:
| Attribute | Description |
| type | Type attribute indicate the field element to be used e.g. checked button or radio button |
| name | Name attribute is used to indicate value for backend processing |
| value | Value to be used when box is selected |
-
Drop down input element:
As the name indicate, drop down input element can be used to list down your options. User is given an option to choose one out of them. Let’s see this with following example:
| <!DOCTYPE html> <html> <head> <title>Drop down input element</title> </head> <body> <form> <select name=”dropdown”> <option value=”White” selected>White</option> <option value=”Black”>Black</option> <option value=”Pink”>Pink</option> </select> </form> </body> </html> |
The result will be displayed as:
|
|
We can make use of following attributes for drop down input element:
| Attribute | Description |
| name | Name attribute is used to indicate value for backend processing |
| size | Size attribute is used to specify maximum width of box |
| multiple | Multiple attributes lets you choose multiple options |
-
File upload input element:
File upload box is used to upload document files to your server. This can also be created using <input> element where attribute is set as File. Let’s learn with following example how:
| <!DOCTYPE html> <html> <head> <title>File Upload example</title> </head> <body> <form> <input type=”file” name=”Browse” accept=”.doc” /> </form> </body> </html> |
The result will be displayed as:
|
|
We can make use of following attributes for file upload input element:
| Attribute | Description |
| name | Name attribute is used to indicate value for backend processing |
| accept | Accept attribute defines which type of file to be accepted |
Chapter Summery:
- Use html <form> tag to create html forms.
- Use html <input type = “text”> tag to create text input box.
- Use html <input type = “radio”> tag to create radio button.
- Use html <input type = “submit”> tag to create submit button.
- Use html <input type = “checkbox”> tag to create to create checkbox button.
- Use html <input type = “file”> tag to create file upload button.
Interview Question:
- How can you create a html button which can act like a hyperlink?
We can create html hyperlink button in two ways:
Method 1: –
| <FORM ACTION=”[Your link]” METHOD=get> <INPUT TYPE=submit VALUE=”Here type your text you want on button”> </FORM> |
Method 2 :-
| <INPUT TYPE=”submit” VALUE=” Link location” ONCLICK=” http://freetutorialpoint.com/;” /> |
Practice Exercise:
| <!DOCTYPE html> <html> <head> <title> Example</title> </head> <body> </body> |
In above html code:
- Create a drop down list with ‘name = fruits’ in form. Option to be included are Orange, Apple, Banana
- Create a text box with name = Type here
- Create a button with text click here.
- Create a input text box up to 50 character limit.
| Click here to practice above exercise in real time HTML code editor |
|---|