| Text |
| Text is used to access text field of a form. A text field is created when we use input tag with type as text property, a text field is generated a text field should have a name for it’s easier recognition. This text field can be used to type the textual data like name, address etc. |
| Example |
| <html>
<head><title> Text Element </title> </head> <body bgcolor=green text=”yellow”> <h4 align=center> Click on Desired Button</h4> <input type =”text” name=”t1″ id=”tt1″ style=”position:absolute;background:white;color:black;width:100;”><br><br> <input type =”Button” name=”b1″ value=”Color” onclick=”colo()”> <input type =”Button” name=”b1″ value=”Size” onclick=”sz()”> <input type =”Button” name=”b1″ value=”Value” onclick=”values()”> <input type =”Button” name=”b1″ value=”Position” onclick=”pos()”> <script language=”JavaScript”> function colo() { a=prompt(“Enter Color name , you want “,””) document.all.tt1.style.background=a; }
function sz() { a=prompt(“Enter size , you want “,””) if(isNaN(parseInt(a))) { alert(“Wrong entry”) } else { document.all.tt1.style.width=a; } }
function values() { alert(“Value in Text box is “+document.all.tt1.value); }
function pos() { a=prompt(“Enter X Position , you want “,””) b=prompt(“Enter Y Position , you want “,””) document.all.tt1.style.pixelLeft=a; document.all.tt1.style.pixelTop=b; } </script> </body> </html> |
| Click here to view result of this program in browser |
| Button |
| Button is used to access Button of a form which is neither a reset nor a submit button. When we want to create a button on the web page we use input tag with type as button, we can attach an event with this button, like onclick. A button also should have name for it’s recognition and value which will be displayed on the button so that user can understand that for what purpose this button is. We can understand this all by below given example. |
| Example: |
| <html>
<head><title> Text Element </title> </head> <body bgcolor=green text=”yellow”> <h4 align=center> Click on Desired Button</h4> <input type =”button” name=”bb1″ id=”tt1″ value=”I am witness”style=”position:absolute;background:gray;color:black;width:150;”><br><br> <input type =”Button” name=”b1″ value=”ForeColor” onclick=”fcolo()”> <input type =”Button” name=”b2″ value=”BackColor” onclick=”bcolo()”>
<input type =”Button” name=”b3″ value=”Size” onclick=”sz()”> <input type =”Button” name=”b4″ value=”Value” onclick=”values()”> <input type =”Button” name=”b5″ value=”Position” onclick=”pos()”> <script language=”JavaScript”> function bcolo() { a=prompt(“Enter Color name , you want “,””) document.all.tt1.style.background=a; } function fcolo() { a=prompt(“Enter Color name , you want “,””) document.all.tt1.style.color=a; }
function sz() { a=prompt(“Enter size , you want “,””) if(isNaN(parseInt(a))) { alert(“Wrong entry”) } else { document.all.tt1.style.width=a; } }
function values() { alert(“Value in Text box is “+document.all.tt1.value); a=prompt(“Enter New Message “,””) document.all.tt1.value=a; }
function pos() { a=prompt(“Enter X Position , you want “,””) b=prompt(“Enter Y Position , you want “,””) document.all.tt1.style.pixelLeft=a; document.all.tt1.style.pixelTop=b; }
</script> </body> </html> |
| Click here to view result of this program in browser |
| Submit |
| Submit is used to access submit element of a form. When user fed data in the form entries like his name, address, qualification etc. this data has no meaning until it is sent to the server where the program to analyze this data is available and where it will be stored in a database program. Submit button send the data to server. |
| Example: |
| <html>
<head><title> Text Element </title> </head> <body bgcolor=green text=”yellow”> <h4 align=center> Click on Desired Button</h4> <form name=”f1″> <input type =”submit” name=”bb1″ id=”tt1″ style=”position:absolute;background:gray;color:black;width:150;”> <br><br> <input type =”Button” name=”b1″ value=”ForeColor” onclick=”fcolo(f1)”> <input type =”Button” name=”b2″ value=”BackColor” onclick=”bcolo(f1)”> <input type =”Button” name=”b3″ value=”Size” onclick=”sz(f1)”> <input type =”Button” name=”b4″ value=”Value” onclick=”values(f1)”> <input type =”Button” name=”b5″ value=”Position” onclick=”pos(f1)”> </form> <script language=”JavaScript”> function bcolo(f1) { a=prompt(“Enter Color name , you want “,””) f1.elements.bb1.style.background=a; } function fcolo() { a=prompt(“Enter Color name , you want “,””) f1.elements.bb1.style.color=a; }
function sz() { a=prompt(“Enter size , you want “,””) if(isNaN(parseInt(a))) { alert(“Wrong entry”) } else { f1.elements.bb1.style.width=a; } }
function values() { alert(“Value is “+document.all.tt1.value); a=prompt(“Enter New Message “,””) f1.elements.bb1.value=a; }
function pos() { a=prompt(“Enter X Position , you want “,””) b=prompt(“Enter Y Position , you want “,””) document.all.tt1.style.pixelLeft=a; document.all.tt1.style.pixelTop=b; } </script> </body> </html> |
| Click here to view result of this program in browser |
| Reset |
| reset is used to access reset element of a form. When a form is filled by the user many times it happens that a user want to fill it again or the same form should appear without sending the previous data fed to server then we use reset button, it will remove all the data fed in the different controls and a fresh form will appear. |
| Example: |
| <html>
<head><title> Text Element </title> </head> <body bgcolor=green text=”yellow”> <h4 align=center> Click on Desired Button</h4> <form name=”f1″> <input type =”reset” name=”bb1″ id=”tt1″ style=”position:absolute;background:gray;color:black;width:150;”><br><br> <input type =”Button” name=”b1″ value=”ForeColor” onclick=”fcolo(f1)”> <input type =”Button” name=”b2″ value=”BackColor” onclick=”bcolo(f1)”>
<input type =”Button” name=”b3″ value=”Size” onclick=”sz(f1)”> <input type =”Button” name=”b4″ value=”Value” onclick=”values(f1)”> <input type =”Button” name=”b5″ value=”Position” onclick=”pos(f1)”> </form> <script language=”JavaScript”> function bcolo(f1) { a=prompt(“Enter Color name , you want “,””) f1.elements.bb1.style.background=a; } function fcolo() { a=prompt(“Enter Color name , you want “,””) f1.elements.bb1.style.color=a; } function sz() { a=prompt(“Enter size , you want “,””) if(isNaN(parseInt(a))) { alert(“Wrong entry”) } else { f1.elements.bb1.style.width=a; } } function values() { alert(“Value in Text box is “+document.all.tt1.value); a=prompt(“Enter New Message “,””) f1.elements.bb1.value=a; } function pos() { a=prompt(“Enter X Position , you want “,””) b=prompt(“Enter Y Position , you want “,””) document.all.tt1.style.pixelLeft=a; document.all.tt1.style.pixelTop=b; } </script> </body> </html> |
| Click here to view result of this program in browser |
| Checkbox |
| checkbox is used to access checkbox of a form. When we use input tag with type as checkbox a square box appears with a white area , when user click on that box a tick sign appears and on clicking again on the same box the tick sign disappears. We can program this checkbox using the JavaScript code. |
| Example: |
| <html>
<head><title> Text Element </title> </head> <body bgcolor=green text=”yellow”> <h4 align=center> Click on Desired Button</h4> <form name=”f1″> <input type =”checkbox” name=”bb1″ id=”tt1″ checked style=”position:absolute;background:gray;color:black;width:15;”><br><br> <input type =”Button” name=”b2″ value=”BackColor” onclick=”bcolo(f1)”> <input type =”Button” name=”b4″ value=”Value” onclick=”values(f1)”> <input type =”Button” name=”b5″ value=”Position” onclick=”pos(f1)”> </form> <script language=”JavaScript”> function bcolo(f1) { a=prompt(“Enter Color name , you want “,””) f1.elements.bb1.style.background=a; } function fcolo() { a=prompt(“Enter Color name , you want “,””) f1.elements.bb1.style.color=a; }
function sz() { a=prompt(“Enter size , you want “,””) if(isNaN(parseInt(a))) { alert(“Wrong entry”) } else { f1.elements.bb1.style.width=a; } }
function values() { alert(“Value is “+document.all.tt1.checked); }
function pos() { a=prompt(“Enter X Position , you want “,””) b=prompt(“Enter Y Position , you want “,””) document.all.tt1.style.pixelLeft=a; document.all.tt1.style.pixelTop=b; } </script> </body> </html> |
| Click here to view result of this program in browser |
| Radio |
| radio is used to access radio element of a form. When we use input tag with type as radio a circular white area appears , when we click on it a black dot appears in the white area and when we click on other circular white area the black dot gets transferred from previous circular white area to new one. Radio buttons are used to get a single option from multiple options like sex, either a person can be male or female. So we should use radio in that case. All the related radios created should have same name. |
| Example: |
| <html>
<head><title> Text Element </title> </head> <body bgcolor=green text=”yellow”> <h4 align=center> Click on Desired Button</h4> d<form name=”f1″> <input type =”radio” name=”bb1″ id=”tt1″ style=”background:gray;color:black;width:15;”> <input type =”radio” name=”bb1″ id=”tt1″ style=”background:gray;color:black;width:15;”> <br><br> <br><br> <input type =”Button” name=”b2″ value=”BackColor” onclick=”bcolo(f1)”> <input type =”Button” name=”b5″ value=”Total” onclick=”tot(f1)”> <input type =”Button” name=”b6″ value=”Name” onclick=”nam(f1)”> </form> <script language=”JavaScript”> function bcolo(f1) { a=prompt(“Enter Color name , you want “,””) b=prompt(“Which Radio First or Second “,””) if (parseInt(b)==1) { f1.elements.bb1[0].style.background=a; } else { f1.elements.bb1[1].style.background=a; } }
function tot() { alert(“Total number of Radios “+f1.elements.bb1.length); }
function nam() { alert(“Name of Radio “+f1.elements[0].name); } </script> </body> </html> |
| Click here to view result of this program in browser |
| Textarea |
| Text is used to access text area of a form. A text area is created when we use textarea tag , this control can be used to feed notes , suggestions etc. where a large amount of data from user is required. |
| Example: |
| <html>
<head><title> Text Element </title> </head> <body bgcolor=green text=”yellow”> <h4 align=center> Click on Desired Button</h4> <form name=”f1″> <Textarea rows=5 cols=10 name=”bb1″ id=”tt1″ style=”color:black;background:white;position:absolute;”> This is text area </textarea> <br><br><br><br><br><br> <input type =”Button” name=”b2″ value=”BackColor” onclick=”bcolo()”> <input type =”Button” name=”b3″ value=”ForeColor” onclick=”fcolo(f1)”> <input type =”Button” name=”b5″ value=”Font Size” onclick=”fs()”> <input type =”Button” name=”b6″ value=”Name” onclick=”nam(f1)”> <input type =”Button” name=”b6″ value=”Data Inside” onclick=”data()”> </form> <script language=”JavaScript”> function bcolo() { a=prompt(“Enter Color name , you want “,””) document.all.tt1.style.background=a; }
function fcolo(f1) { a=prompt(“Enter Color name , you want “,””) document.all.tt1.style.color=a; }
function fs() { a=prompt(“Enter Font Size , you want “,””) document.all.tt1.style.fontSize=a; }
function nam() { alert(“Name of TextArea “+f1.elements[0].name); }
function data() { alert(document.all.tt1.value) } </script> </body> </html> |
| Click here to view result of this program in browser |
| Select |
| Select is used to access select element of a form. |
| Example: |
| <html>
<head><title> Text Element </title> </head> <body bgcolor=green text=”yellow”> <h4 align=center> Click on Desired Button</h4> <form name=”f1″> <input type =”reset” name=”bb1″ id=”tt1″ style=”position:absolute;background:gray;color:black;width:150;”><br><br> <input type =”Button” name=”b1″ value=”ForeColor” onclick=”fcolo(f1)”> <input type =”Button” name=”b2″ value=”BackColor” onclick=”bcolo(f1)”>
<input type =”Button” name=”b3″ value=”Size” onclick=”sz(f1)”> <input type =”Button” name=”b4″ value=”Value” onclick=”values(f1)”> <input type =”Button” name=”b5″ value=”Position” onclick=”pos(f1)”> </form> <script language=”JavaScript”> function bcolo(f1) { a=prompt(“Enter Color name , you want “,””) f1.elements.bb1.style.background=a; } function fcolo() { a=prompt(“Enter Color name , you want “,””) f1.elements.bb1.style.color=a; }
function sz() { a=prompt(“Enter size , you want “,””) if(isNaN(parseInt(a))) { alert(“Wrong entry”) } else { f1.elements.bb1.style.width=a; } }
function values() { alert(“Value in Text box is “+document.all.tt1.value); a=prompt(“Enter New Message “,””) f1.elements.bb1.value=a; }
function pos() { a=prompt(“Enter X Position , you want “,””) b=prompt(“Enter Y Position , you want “,””) document.all.tt1.style.pixelLeft=a; document.all.tt1.style.pixelTop=b; }
</script> </body> </html> |
| Click here to view result of this program in browser |
| Select option |
| Select option is used to access select options of a form. |
| Example: |
| <html>
<head><title> Select Element </title> </head> <body bgcolor=blue text=”yellow”> <h4 align=center> Click on Desired Button</h4> <form name=”f1″> <select name=”bb1″ id=”tt1″ style=”color:black;background:white;” > <option > Delhi <option> UP <option> Bihar <option selected> Haryana <option> Punjab <option> Maharastra <option> Uttranchal </select> <br><br><br><br><br><br> <input type =”Button” name=”b2″ value=”BackColor” onclick=”bcolo()”> <input type =”Button” name=”b3″ value=”ForeColor” onclick=”fcolo(f1)”> <input type =”Button” name=”b5″ value=”Font Size” onclick=”fs()”> <input type =”Button” name=”b6″ value=”Name” onclick=”nam(f1)”> <input type =”Button” name=”b7″ value=”Index Selected” onclick=”ind()”> </form> <script language=”JavaScript”> function bcolo() { a=prompt(“Enter Color name , you want “,””) document.all.tt1.style.background=a; }
function fcolo(f1) { a=prompt(“Enter Color name , you want “,””) document.all.tt1.style.color=a; }
function fs() { a=prompt(“Enter Font Size , you want “,””) document.all.tt1.style.fontSize=a; }
function nam() { alert(“Name is : “+f1.elements[0].name); }
function ind() { alert(document.all.tt1.selectedIndex) } </script> </body> </html> |
| Click here to view result of this program in browser |
| Select list |
| Select is used to access select element of a form. A list of selection is used when we want user to select the given options rather then feeding it , it saves the user time and server time also in checking and validating the data, like date of birth of a person, we can feed the dates and make the user to select the desired one from the list rather than typing it from keyboard. |
| Example: |
| <html>
<head><title> Select Element </title> </head> <body bgcolor=blue text=”yellow”> <h4 align=center> Click on Desired Button</h4> <form name=”f1″> <select name=”bb1″ id=”tt1″ size=4 multiple style=”color:black;background:white;” > <option > Delhi <option> UP <option> Bihar <option selected> Haryana <option> Punjab <option> Maharastra <option> Uttranchal </select> <br><br><br><br><br><br> <input type =”Button” name=”b2″ value=”BackColor” onclick=”bcolo()”> <input type =”Button” name=”b3″ value=”ForeColor” onclick=”fcolo(f1)”> <input type =”Button” name=”b5″ value=”Font Size” onclick=”fs()”> <input type =”Button” name=”b6″ value=”Name” onclick=”nam(f1)”> </form> <script language=”JavaScript”> function bcolo() { a=prompt(“Enter Color name , you want “,””) document.all.tt1.style.background=a; }
function fcolo(f1) { a=prompt(“Enter Color name , you want “,””) document.all.tt1.style.color=a; }
function fs() { a=prompt(“Enter Font Size , you want “,””) document.all.tt1.style.fontSize=a; }
function nam() { alert(“Name is : “+f1.elements[0].name); } </script> </body> </html> |