HTML Tutorial 5: Basic Elements on An HTML Form (Part 1)

Few months ago, I started writing about HTML. There are already 4 tutorials published on HTML. I know this is not sufficient for an HTML learner. Because learning HTML requires much resources and practice. However I will try to write about HTML whenever I'm able to manage time. 

You can also read the previously published HTML Tutorial:

• Tutorial 1

• Tutorial 2

• Tutorial 3

• Tutorial 4

Today's HTML tutorial is very easy, funny and useful. Today I will discuss about the basic elements of an HTML form. This is the part 1 that includes Text Fields, Password Field, Radio Buttons & Checkboxes. 

How to Start: 

You can practice using notepad. Press Start + R > Type Notepad > Enter. Now copy or type the code from here. And save them as form.htm or use any other name. But the name should end with either .htm or .html. Then open the file in a browser. 

Let's begin - 

Usually an HTML form contains input elements like text fields, checkboxes, radio buttons, submit buttons etc. To create an HTML form you must use the <form> tag. Look at the structure below:

<form>

input elements

</form> 

Though you skip the <form> tag, modern browsers can identify your form. But this is a basic rule for creating html forms. So you should start with <form> and end with </form>. 

Text Fields:

<input type="text"> indicates a one-line input field to enter text. 

<form>

First name: <input type=text><br>

Last name: <input type=text>

</form>

The result will be as below: 

First name:

Last name:

Note: <br> tag is used to create line break. Otherwise both fields will appear in a single line. The default width of a text field is 20 character. You can increase it as below: 

<form>Name: <input type=text size = 40><form>

The result will be: 

Name:

Password Field:

<input type="password"> defines a password field. Whenever someone types in a password field, the characters are shown as circles. 

<form>

Password: <input type=password>

</form>

The result will be: 

Password:

Radio Buttons:

<input type="radio"> refers to a radio button. Radio button allows user to choose a single item. After selecting an item, you can change it. But once selected, you can't undone it. 

<form>Which one do you like most?<input type=radio name=Mobile>Nokia<br><input type=radio name=Mobile>Samsung<br><input type=radio name=Mobile>Apple</form>

You will get:  

Which one do you like most?

Nokia

Samsung

Apple

Checkboxes:

<input type="checkbox"> defines a checkbox. Somewhat similar to radio buttons. But here an user can choose multiple items. And he can deselect the item any time! 

<form>

What is your Favorite Browser?

<input type=checkbox>Google Chrome<br>

<input type=checkbox>Firefox<br>

<input type=checkbox>Internet Explorer<br>

<input type=checkbox>Opera<br>

<input type=checkbox>Other<br>

</form>

Your browser will show: 

What is your Favorite Browser?

Google Chrome

Firefox

Internet Explorer

Opera

Other

These are some important elements of an HTML form. There are few other elements remaining. I will try to write about those elements in the next post. And then I'll put these all together and show you how to prepare an HTML form. Till then, stay with us . . . 

Stay with Marks PC Solution to get more interesting IT topics!