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:
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>.
<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:
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:
The result will be:
<form>Name: <input type=text size = 40><form>
The result will be:
<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:
<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></form>
Your browser will show:
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 . . .