Learn how to work with Forms in HTML

Forms are used widely on the Web pages. Web sites collects feedback information, registration details through the forms from the users. If you ever signed up for free web pages, free email services you may be already aware and familiar with forms.

Forms mainly consists of elements. These elements are as follows

(1) Text Field
(2) Button
(3) Combo box
(4) List box
(5) Text Area
(6) Check box
(7) Radio Buttons

As usual in order to design web pages with forms, you should learn a new tag called <INPUT>. type attribute is applied to get a desired element. If you require Text Field, you should give the code which will look like this
<INPUT type = “text”> and to get Check boxes, the code is same except the value of the type attribute will be checkbox. The <INPUT> tag applies to all elements except Combo boxes, list boxes and Text Area.

Try out the code given below and observe the result:

<HTML>
<HEAD><TITLE>HTML Forms</TITLE></HEAD>
<BODY>
<FORM action = "mailto:yourname@server.com" method = "post">
Enter your Name: <input type = "text" name = "t1" 

maxlength = 20 size = 25>
Enter your Password: <input type = "password" name = "p1">
Select a Language:
<input type = "checkbox" name = "t1" checked>Java
<input type = "checkbox" name = "t2" checked>C++
<input type = "checkbox" name = "t3" checked>Oracle
<input type = "checkbox" name = "t4" checked>C-Sharp
Select your sex:-
<input type = "radio" name = "r1">Male
<input type = "radio" name = "r1">Female
<CENTER><input type = "submit" name = "s1">
<input type = "reset" name = res1"></CENTER>
<SELECT name = "s1">
<OPTION>India
<OPTION>USA
<OPTION>UK
</SELECT>

Note: If you give the size attribute in the <SELECT> tag, you will get a list box. The difference between a combo box and List Box is that with combo box you can select one item at a time while with a list box you can select more than one item.

Leave a Comment