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:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,'Courier New',courier,monospace; font-size: 12px;"><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">HTML</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">HEAD</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TITLE</span><span style="color: #0000ff;">&gt;</span>HTML Forms<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">TITLE</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">HEAD</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">BODY</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">FORM</span> <span style="color: #ff0000;">action</span> = <span style="color: #0000ff;">"mailto:yourname@server.com"</span> <span style="color: #ff0000;">method</span> = <span style="color: #0000ff;">"post"</span><span style="color: #0000ff;">&gt;</span>
Enter your Name: <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">input</span> <span style="color: #ff0000;">type</span> = <span style="color: #0000ff;">"text"</span> <span style="color: #ff0000;">name</span> = <span style="color: #0000ff;">"t1"</span> 

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

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.

READ  Learn how to create tables using HTML

Leave a Reply

Your email address will not be published.