Skip to main content

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

Basic Elements on An HTML From

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:

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:


input elements


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. 

First name: <input type=text><br>
Last name: <input type=text>
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: 


Password Field:

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

Password: <input type=password>

The result will be: 


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?





<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! 


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>
Your browser will show: 

What is your Favorite Browser?

Google Chrome


Internet Explorer



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!


  1. This comment has been removed by a blog administrator.


Post a Comment

Popular posts from this blog

GTA San Andreas Cheat Code (PDF)

After Vice City, San Andreas is the most popular game released by Grand Theft Auto (GTA). Usually GTA releases role playing game. San Andreas is such a game where you can act like a person. You can do everything. You have to take part in missions and complete them.  To make your missions easier, there are lots of cheat codes. If you can properly apply these codes, the tough parts of the game will be easier. Cheat codes are somewhat like keyboard shortcuts of computer programs.  I've shared 63 cheat codes below. There were more cheat codes in my collection, but I've omitted the less important cheats. Effects or result of the cheats are on the left side, and the codes are on the right side.  You can copy the following codes in your PC. And for your convenience, I've also uploaded a PDF file of these codes. You will find the download link at the bottom.  Effect Cheat Code Adrenaline Mode MUNASEF All Cars Explode ALLCARSGOB

Rules for Bengali Typing in PDF (Bijoy Layout)

Bijoy is the most popular layout for Bangla typing. The layout was developed by Mostafa Jabbar. He is the pioneer of Bangla typing in computer. More than 90% people use his Bijoy layout for Bangla typing. Today, I'm gonna share a PDF file with you that contains the Bijoy Keyboard layout with English fonts! If your keyboard doesn't have bengali fonts then you can print this PDF file to know where the bengali fonts are located in your keyboard. Additionally this file contains all the necessary rules and tips which are essential for Bangla Typing.  Now there are many other software available for Bangla Typing Layout. Such as Avro Easy, Unicode, Unibijoy etc. And there rules are also somewhat different from Bijoy. And some of their layouts follow the same rules like Bijoy. Hopefully this PDF file will support most of the rules when a layout is similar to Bijoy Layout.  Click to enlarge the image Download the PDF file from the button below. Follow

Download Puzzle Flash Game - Save Them

Hey Flash Game Lovers! Today you're getting an amazing puzzle game - Save Them! It's a flash game and the download size is only 382 KB. In this game, you have to move 3 missionaries and 3 cannibals from one side to another through a boat. In any side, if the number of cannibals is more than the number of missionaries, then cannibals will eat the missionaries!  Download Save Them Download the game from the above link. It's a zipped file. Download size is only 382 KB! After downloading the game, you have to unzip it first. Then double click on the SaveThem to start the game.  How to Play? After starting the game, you will get the instruction. You have to make sure that in no side, the number of cannibals is not more than the number of missionaries. This is your only challenge. You have to take them from left side to the right side of the lake through a boat.  Press on a character to jump to the boat. Thus you can take any two of them a