Form Used By A Website
An html form provides data gathering fuctionality to a web page . This is very useful if thr website is used to advertise and sell products . HTML forms provide a full range of gui controls . Additinaly , Html forms can automatically submit data collected in its controls to a web server.
The data submitted can be processed at the web server by cgi programs , server side Javascripts , Java servlets and so on.
Javascript can allow the validation of data entered into a form at the client side. JavaScript can be used to ensure that only valid data is returned to a web server for futher processing.Form Object
When we creating an interactive web site for the internet it is necessary to capture user input and process this input . Based on the result of this processing , appropriate information from a website can be dispatched to be viewed . Both the capturing of user input and the rendering of appropriate web pages takes place in the client side , browser 's window.
Traditionally , user input is captured in a form . It can provides the <form> .......</form> tags with an html form can be created to capture user input.
As soon as the <form>.....</form> tags are encountered in an html program by a javascript enabled browser , the browser creates a 'forms array' in memory . This array tracks the number of form objects described in the html program.
Each form objects in the HTML page will be described between its own <form >.......</form > tags . Should there be multiple ( i.e multiple occurrences of the <form>....... </form> tags) described in the html page then the forms array will have multiple (indexed) element each holding a reference to an html form object.
The first form object described in the html file being held as array index[0] , the second form objects described in the html file being held in the array index and so on. by referencing a specific index number of the forms array a specific form object can be accessed . The Javascript forms array also holds information about each objects used within the <form>......</forms> tags.Example for form
<HTML>
<HEAD> <TITLE> forms</TITLE>
<SCRIPT language = "javascript">
function ver(form1)
{
v = form1.elements[3].name =="button1")
{
alert(' first form name : ' + document. forms[1].name );
alert('no. of form element'+ document . forms[0] . name + ' = ' +v);
}
else if (form1.elements[4].name =="button2")
{
alert('second form name : ' + document.forms[1].name);
alert('form1.elements[i].name + ' is at position ' +1);
}
for (i=0; i<v;i++)
alert(form1.elements[i].name + ' is at position ' +i);
}
</script></head>
<body>
<form name = yfc form1">
first form : <b> yfc form1 </b> <BR/><BR/>
first form : <input name = "text 1" type = "text" value ="" /><BR/><BR/>
<INPUT Name = "Radio1 " type = "Radio" value=""/> fresher
<INPUT Name = "Radio2 " type = "Radio" value=""/> experienced <BR/><BR/>
</form>
<form name ="yfc form2">
Second form :<B> yfc form2 </B><BR/><BR/>
Name : <INPUT NAME ="text2" type ="text" value ="" /> <BR/><BR/>
password : <INPUT Name ="pass2" type ="password" value ="" /> <BR/><BR/>
<INPUT Name = "check1" Type = "Checkbox " Value = "" /> Employed
<INPUT Name = "check2" Type = "Checkbox " Value = "" /> studying <BR/><BR/>
<INPUT Name = "button2" onclick="ver(form)" type="button" value ="click2"/>
</forms>
</body>
</HTML>
Example the use of a form object element Array
<HTML>
<HEAD><TITLE>forms</TITLE>
<SCRIPT language = 'javascript'>
function a(f2)
{
f2.check.checked = true;
alert("The checkbox just got checked");
f2.check.checked = false;
f2.radio[0].checked = true;
f2.radio[1].checked = false;
alert("The checkbox just got checked");
}
</SCRIPT></Head>
<body>
<form>
client name : <input name = "text" Type ="Text" value = "" /><BR/><BR/>
client address : <input name = "text1" Type ="Text" value = "" /><BR/><BR/>
client email address : <input name = "text2" Type ="Text" value = "" /><BR/><BR/>
<input name = "radio" type ="radio" value ="" />male
<input name = "radio" type ="radio" value ="" />female<BR/><BR/>
<Input name ="check" type="checkbox" value=""/>Employed <BR/><BR/>
<Input name="bt"onclick ="chk(this . form)" type= "button"
value = "set element arrray value"
</form></body>
</HTML>
Form object's methods
Html forms can be made up of a variety of html
elements that accept the user input . The <form></form> html tags
enclose the html elements that make up the form . Once a javascript enebled
browser encounters these tags is an Html file the javascript enebled browser
creates a form browser in memory , i.e held as an element of the form array.
The form object has properties like name , method , and action.
Method
The method property of a form is used to specify
the method used to send data captured by various form element back to the web
server . The menthod used can be either get or post
The get method sends the data captured by form
elements to a web server encoded into a url that point to a web server. The
data captured in form element is appended to the url.
This technique is used when there is a small
amount of data being sent back to the web server . The maximum amount of data
that can be sent back to the web server using the method is 1024 bytes.
The post method sends the data captured by form
element back to the web server as a seperate bit - stream of data. When there
is a large amount of data to be sent back to the web server .
If the method attribute is not specified within
the <form> </form> tags , the default method used by the browser to
send data back to the web server is the Get method , i.e ,as an encoded URL.
Action
The action attributes of the
<form>............</form> tags points to the url (address) of a
program on the web server that will process the form data captured and being
sent back . The server side program that processes this data can be written in
any scripting language that the web server understands.
Text element
Text element are data entry fields used
in html forms . Text fields accept a single line of text entry.
Properties
The text object has the following properties :
1.
name
2.
value
Methods
The text object has the following methods:
1.
focus()
2.
Blur()
3.
Select()
Events
1.
Focus()
2.
Blur()
3.
Select()
4.
Change()
Javascript provides the following events handlers for the
text objects events:
1.
onfocus ()
2.
onBlur()
3.
onSelect()
4.
onChange()
Syntax
<input name
=" <Name of the object>" Type = "text"
Value="<Defaultvalue>">
Example:
<Input name
="txt_age" Type="Text"Value="18">
Password Element
The password element is a unique type of text
entry field . All keystrokes for th field are displayed as an asterisk
[*] . This makes the password element idea for accepting input of confidental
information , such as a password , bank account number or a personal
identification.
Properties
The pasword object has the following
properties :
1.
Default Value
2.
name
3.
value
Methods
The pasword object has the following
methods:
1.
Focus()
2.
Blur()
3.
Select()
Events
1.
Focus()
2.
Blur()
3.
Select()
4.
Change()
Javascript provides the following events
handlers for the text objects events:
1.
onfocus ()
2.
onBlur()
3.
onSelect()
4.
onChange()
Syntax
<input
name =" <Name of the object>" Type = "Password"
Value="<Defaultvalue>">
Example:
<Input name ="txt_usr_pswd"
Type="password"Value="">
Button Element
An HTML button element is a commonly used form object . It is generally used to trigger appropriate form level processing.
Properties
1.
name
2.
Value
Method
1.
click()
Event
1.
click
Javascript provides the following events handler
for the button object's events:
1.
OnClick()
Syntax
<input
name =" <Name of the object>" Type = "Button"
Value="<Defaultvalue>">
Example:
<Input name ="btn_check"
Type="Button"Value="Verify....">
Example for mathematical Expression
<Html>
<Head><Title>
</title>
<SCRIPT
language="javascript">
Function cals(form)
{
form .results.value = eval(form.entry.value);
}
</SCRIPT></HEAD>
<BODY><FORM> Enter a mathematical expression:
<INPUT Type ="text" name="entry"
value=""/>
<INPUT type ="button" Value
="calculate" onclick="calculate(this .form);"
/><BR/>
result:
<INPUT Type ="text"
name="result" onfocus = "this.blur();"/>
</form>
</body>
</HTML>
Checkbox Element
A checkbox is an HTML form object that behaves as a toggle switch . This means a checkbox can be in either one of two states , either checked or unchecked. A checkbox is used tu return a single specific value to a web server . Either T or F or 1 or 0 can be returned depending upon whether the checkbox is checked or unchecked . Based on the value returned from the html form .
Properties
- Name
- Value
- Checked
Method
- Click()
Event
- Click()
Syntax:
<input name =" <Name of the object>" Type = "checkbox" Value="<yes/no>"CHECKED>
Example:
<Input name ="Employed" Type="checkbox"Value="yes"checked>
Checked="Checked"/>
Radio Element
The radio button element has two states and can toggle between them . The one special exception is that when several radio button are combined into a radio (button) group only a single radio button can be selected at any given time.
Properties
- Checked
- index
- length
- name
- Clicked ( )
- Clicked ( )
Syntax:<input Type =" Name="<Radiogroupname>" Value= "<1/0>"
Checked="Checked"/>
.
0 comments:
Post a Comment