working with forms
a form is created using form element
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>Form</TITLE>
</HEAD>
<BODY>
starting of form
<FORM>
FORM
</FORM>
ending of form
</BODY>
</HTML>
Working with the Input Element
the Input element is used to display the text boxes on a form.
these fields are used to provide input from the user.
<!DOCTYPE HTML >
<HTML>
<BODY>
<HEAD>
<TITLE>input</TITLE>
</HEAD>
<FORM>
Enter your name:<INPUT>
</FORM>
</BODY>
</HTML>
Using the INPUT element, you can add the following fields on a form
Text field
Password field
Hidden field
Checkbox field
Radio button field
Submit button field
Reset button field
Working with Text field
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>textname</TITLE>
</HEAD>
<BODY>
<FORM>
Enter your username:<INPUT type=”text” name= “username” >
</FORM>
</BODY>
</HTML>
you can also fix length of your text field using the maxlength attribute of the input element.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>textmaxlen</TITLE>
</HEAD>
<BODY>
<FORM>
Enter your 2 digit code number:<INPUT type=”text” name= “username” size="2" maxlength="2">
</FORM>
</BODY>
</HTML>
you can also set the default value of the text field, which is to be displayed when the webpage loads, using the value attribute of the input element.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>textvalue</TITLE>
</HEAD>
<BODY>
<FORM>
Enter your two digit code number:<INPUT type=”text” name= “username” size="2" maxlength="2" value="00">
</FORM>
</BODY>
</HTML>
Working with a Password Field
password field is used in a situation when you need to secure the text entered in the field.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>password</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password">
</FORM>
</BODY>
</HTML>
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>pwname</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password" name="pw">
</FORM>
</BODY>
</HTML>
the server identifies the password field through the name pw.
you can use the size attribute to set the size of the password field.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>pwsize</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password" name="pw" size="10">
</FORM>
</BODY>
</HTML>
only ten characters appear on the password fields.
you can also specify the maximum length of the password field by specifying the length in the maxlength attribute.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>pwmaxlen</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password" name="pw" size="10" maxlength="4">
</FORM>
</BODY>
</HTML>
you can enter only 4 characters in a field.
you can define the defult value for the password field with the help of value attribute.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>pwvalue</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password" name="pw" size="10" maxlength="4" value="dreamtech">
</FORM>
</BODY>
</HTML>
Creating a Hideen field
a browser does not display the hidden field.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>Using Hidden fields</TITLE>
</HEAD>
<BODY>
<FORM>
User name:<INPUT id="name" type="text"/><BR/>
<INPUT type="hidden" id="country" value="India" /><BR/>
<INPUT type="submit" onclick="alert('Hello, ' + document.getElementById('name').value + ' from '+ document.getElementById('country').value)" value="Submit">
</FORM>
</BODY>
</HTML>
Creating a checkbox field.
check boxes allows you to select one or more number of items from the list of items.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>checkbox</TITLE>
</HEAD>
<BODY>
<FORM>
Select one of the three choices:<BR/>
<INPUT type="checkbox" name="option1" value="Milk"> Milk<BR>
<INPUT type="checkbox" name="option2" value="Butter" checked="checked"> Butter<BR>
<INPUT type="checkbox" name="option3" value="Cheese"> Cheese<BR>
</FORM>
</BODY>
</HTML>
Creating a Radio button field
radio button is used to select an option from the given list.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>radio button</TITLE>
</HEAD>
<BODY>
<FORM>
Select one of the three choices:<BR/>
<INPUT type="radio" name="group1" value="Milk"> Milk<BR>
<INPUT type="radio" name="group1" value="Butter" checked> Butter<BR>
<INPUT type="radio" name="group1" value="Cheese"> Cheese
</FORM>
</BODY>
</HTML>
Creating a Submit button field
submit button is used to submit the details entered in a form to the server.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>submit button</TITLE>
</HEAD>
<BODY>
<FORM><BR>
username:<INPUT type="text" name="username" value="dreamtech"><BR/>
password:<INPUT type="password" name="password" value="kogent"><BR/>
<INPUT type="submit" name=”submit” value="click!"><BR/>
</FORM>
</BODY>
</HTML>
Creating Reset button field
the reset button is used to reset the values of all the fields of a form.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>reset button</TITLE>
</HEAD>
<BODY>
<FORM><BR>
username:<INPUT type="text" name="username" value="dreamtech"><BR/>
password:<INPUT type="password" name="password" value="kogent"><BR/>
<INPUT type="submit" name=”submit” value="click!">
<INPUT type="reset" name=”reset” value="reset">
</FORM>
</BODY>
</HTML>
Using the SELECT and OPTION Elements
the select element is used to provide information to the users that have multiple options to select.
the select element contains the option element to display the list of options.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>select</TITLE>
</HEAD>
<BODY>
<FORM>
Select any one fruit from the drop-down list<BR/>
<SELECT>
<OPTION value="mango">mango</OPTION>
<OPTION value="orange">orange</OPTION>
<OPTION value="apple">apple</OPTION>
<OPTION value="banana">banana</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
Using the OPTGROUP Element
the optgroup element is used to group the list of options and display in the drop - down list.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>optgroup</TITLE>
</HEAD>
<BODY>
<FORM>
Select one item from a list of fruits, vegetables, and trees:
<SELECT>
<OPTGROUP label=”fruits”>
<OPTION value="mango">mango</OPTION>
<OPTION value="orange">orange</OPTION>
<OPTION value="apple">apple</OPTION>
</OPTGROUP>
<OPTGROUP label=”Vegetables”>
<OPTION value="cabbage">cabbage</OPTION>
<OPTION value="tomato">tomato</OPTION>
<OPTION value="potato">potato</OPTION>
</OPTGROUP>
<OPTGROUP label=”trees”>
<OPTION value="deodar">deodar</OPTION>
<OPTION value="teak">teak</OPTION>
<OPTION value="banyan">banyan</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
</BODY>
</HTML>
Working with the TEXTAREA Element.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>textarea</TITLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA>
Enter your text here
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Using FIELDSET and LEGEND Elements
the fieldset element is used to group related controls in a single box and the legend element provide the caption for that box.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>grouping</TITLE>
</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND>Login window</LEGEND>
<LABEL>
username<INPUT type=”text”>
</LABEL>
<BR/>
<LABEL>
password<INPUT type=”password”>
</LABEL>
<BR/>
<LABEL>
<INPUT type="submit" name=”submit” value="click!">
</LABEL>
</FIELDSET>
</FORM>
</BODY>
</HTML>
Using the button element
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Using the BUTTON element
</TITLE>
</HEAD>
<BODY>
<P>Simple Submit Button</P>
<BUTTON type="submit">SUBMIT</BUTTON>
<HR/>
<P>Chagning the font of the button text.</P>
<BUTTON type="submit" style="color:red;font-size:20px;">
<B>SUBMIT</B>
</BUTTON>
</BODY>
</HTML>
the button element also allows you to display the images on the button control.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Using the BUTTON element
</TITLE>
</HEAD>
<BODY>
<P>Displaying Image on Button </P>
<BUTTON type="submit" >
<IMG src="back.png" width="50" height="50">
</BUTTON>
<BUTTON type="submit" >
<IMG src="next.png" width="50" height="50">
</BUTTON>
</BODY>
</HTML>
Using the DATALIST Element.
you can create a list of predefined options in a text field using the DATALIST element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the DataList Element</TITLE>
</HEAD>
<BODY>
<P>Enter the name of the your favorite car:</P>
<INPUT type="text" name="favCar" list="cars">
<DATALIST id="cars">
<OPTION value="BMW">
<OPTION value="Porsche">
<OPTION value="Audi">
<OPTION value="Ford">
<OPTION value="Ferrari">
<OPTION value="Mercedes">
</DATALIST>
</BODY>
</HTML>
Using the KEYGEN element
the keygen element is used to generate the key paire at the time of submitting the form
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the KEYGEN element</TITLE>
</HEAD>
<BODY>
<FORM action="keygen.html" method="post" enctype="text/plain">
First name: <INPUT type="text" name="fname" /><BR />
Last name: <INPUT type="text" name="lname" /><BR />
<KEYGEN name="key" challenge="0987654321" keytype="RSA">
<INPUT type="submit" value="Submit" />
</FORM>
</BODY>
</HTML>
when you click the submitt button to submit the form, a password dialog box apprears asking you to enter the password before leaving the page.
you need to enter the master password and click the OK button of the password dialog box to submitt the form to he server.
Using the output element
the output element is used to display the result of mathematical calculations.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>Using the OUTPUT Element</TITLE>
<SCRIPT type="text/javascript">
function add()
{
document.forms["form"]["resultadd"].value=23+123;
}
</SCRIPT>
</HEAD>
<BODY onload="add()">
<H1>OUTPUT Element.</H1>
<FORM name="form">
Adding the two numbers:
<OUTPUT name="resultadd">
</OUTPUT>
</FORM>
</BODY>
</HTML>
you can provide the numbers you want to add at runtime using JavaScript.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>Using the OUTPUT Element</TITLE>
<SCRIPT type="text/javascript">
function add()
{
num1=parseInt(prompt("Enter first number.",0));
num2=parseInt(prompt("Enter second number.",0));
document.forms["form"]["resultadd"].value=num1+num2;
}
</SCRIPT>
</HEAD>
<BODY onload="add()">
<H1>OUTPUT Element.</H1>
<FORM name="form">
Adding the two numbers:
<OUTPUT name="resultadd">
</OUTPUT>
</FORM>
</BODY>
</HTML>
Using the PROGRESS Element
you can view the progress of the current task with the help of the PROGRESS element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the PROGRESS Element</TITLE>
</HEAD>
<BODY>
Current task is
<PROGRESS value="200" max="500">
</PROGRESS>
completed.
</BODY>
</HTML>
Using the METER Element
If you want to display a range of scalable measurement, you can use the METER element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the METER element</TITLE>
</HEAD>
<BODY>
<METER value="5" min="0" max="10" style="width:200px"></METER> Passing Score <BR />
<METER value="7" min="0" max="10" style="width:200px"></METER>Your score<BR />
</BODY>
</HTML>
Using the enctype, action, and method attributes
the enctype attribute is used to specify the format of the form's content at the time of submission.
the action attribute is used to specify the address of the server to send the content of the form.
the method attribute is used to specify the name of the method using which the content is sent to the server.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Using the enctype, action, and method Attributes </TITLE>
</HEAD>
<BODY>
<FORM action="action.html" method="get" enctype="text/plain" >
First name: <INPUT type="text" name="fname" /><BR />
Last name: <INPUT type="text" name="lname" /><BR />
<INPUT type="submit" value="Submit" />
</FORM>
</BODY>
</HTML>
action.html
<!DOCTYPE HTML>
<HEAD>
<TITLE>Form Submitted</TITLE>
</HEAD>
<BODY>
<H1> The form is successfully submitted. </H1>
</BODY>
</HTML>
a form is created using form element
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>Form</TITLE>
</HEAD>
<BODY>
starting of form
<FORM>
FORM
</FORM>
ending of form
</BODY>
</HTML>
Working with the Input Element
the Input element is used to display the text boxes on a form.
these fields are used to provide input from the user.
<!DOCTYPE HTML >
<HTML>
<BODY>
<HEAD>
<TITLE>input</TITLE>
</HEAD>
<FORM>
Enter your name:<INPUT>
</FORM>
</BODY>
</HTML>
Using the INPUT element, you can add the following fields on a form
Text field
Password field
Hidden field
Checkbox field
Radio button field
Submit button field
Reset button field
Working with Text field
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>textname</TITLE>
</HEAD>
<BODY>
<FORM>
Enter your username:<INPUT type=”text” name= “username” >
</FORM>
</BODY>
</HTML>
you can also fix length of your text field using the maxlength attribute of the input element.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>textmaxlen</TITLE>
</HEAD>
<BODY>
<FORM>
Enter your 2 digit code number:<INPUT type=”text” name= “username” size="2" maxlength="2">
</FORM>
</BODY>
</HTML>
you can also set the default value of the text field, which is to be displayed when the webpage loads, using the value attribute of the input element.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>textvalue</TITLE>
</HEAD>
<BODY>
<FORM>
Enter your two digit code number:<INPUT type=”text” name= “username” size="2" maxlength="2" value="00">
</FORM>
</BODY>
</HTML>
Working with a Password Field
password field is used in a situation when you need to secure the text entered in the field.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>password</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password">
</FORM>
</BODY>
</HTML>
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>pwname</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password" name="pw">
</FORM>
</BODY>
</HTML>
the server identifies the password field through the name pw.
you can use the size attribute to set the size of the password field.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>pwsize</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password" name="pw" size="10">
</FORM>
</BODY>
</HTML>
only ten characters appear on the password fields.
you can also specify the maximum length of the password field by specifying the length in the maxlength attribute.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>pwmaxlen</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password" name="pw" size="10" maxlength="4">
</FORM>
</BODY>
</HTML>
you can enter only 4 characters in a field.
you can define the defult value for the password field with the help of value attribute.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>pwvalue</TITLE>
</HEAD>
<BODY>
<FORM>
Enter Password : <INPUT type="password" name="pw" size="10" maxlength="4" value="dreamtech">
</FORM>
</BODY>
</HTML>
Creating a Hideen field
a browser does not display the hidden field.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>Using Hidden fields</TITLE>
</HEAD>
<BODY>
<FORM>
User name:<INPUT id="name" type="text"/><BR/>
<INPUT type="hidden" id="country" value="India" /><BR/>
<INPUT type="submit" onclick="alert('Hello, ' + document.getElementById('name').value + ' from '+ document.getElementById('country').value)" value="Submit">
</FORM>
</BODY>
</HTML>
Creating a checkbox field.
check boxes allows you to select one or more number of items from the list of items.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>checkbox</TITLE>
</HEAD>
<BODY>
<FORM>
Select one of the three choices:<BR/>
<INPUT type="checkbox" name="option1" value="Milk"> Milk<BR>
<INPUT type="checkbox" name="option2" value="Butter" checked="checked"> Butter<BR>
<INPUT type="checkbox" name="option3" value="Cheese"> Cheese<BR>
</FORM>
</BODY>
</HTML>
Creating a Radio button field
radio button is used to select an option from the given list.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>radio button</TITLE>
</HEAD>
<BODY>
<FORM>
Select one of the three choices:<BR/>
<INPUT type="radio" name="group1" value="Milk"> Milk<BR>
<INPUT type="radio" name="group1" value="Butter" checked> Butter<BR>
<INPUT type="radio" name="group1" value="Cheese"> Cheese
</FORM>
</BODY>
</HTML>
Creating a Submit button field
submit button is used to submit the details entered in a form to the server.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>submit button</TITLE>
</HEAD>
<BODY>
<FORM><BR>
username:<INPUT type="text" name="username" value="dreamtech"><BR/>
password:<INPUT type="password" name="password" value="kogent"><BR/>
<INPUT type="submit" name=”submit” value="click!"><BR/>
</FORM>
</BODY>
</HTML>
Creating Reset button field
the reset button is used to reset the values of all the fields of a form.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>reset button</TITLE>
</HEAD>
<BODY>
<FORM><BR>
username:<INPUT type="text" name="username" value="dreamtech"><BR/>
password:<INPUT type="password" name="password" value="kogent"><BR/>
<INPUT type="submit" name=”submit” value="click!">
<INPUT type="reset" name=”reset” value="reset">
</FORM>
</BODY>
</HTML>
Using the SELECT and OPTION Elements
the select element is used to provide information to the users that have multiple options to select.
the select element contains the option element to display the list of options.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>select</TITLE>
</HEAD>
<BODY>
<FORM>
Select any one fruit from the drop-down list<BR/>
<SELECT>
<OPTION value="mango">mango</OPTION>
<OPTION value="orange">orange</OPTION>
<OPTION value="apple">apple</OPTION>
<OPTION value="banana">banana</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
Using the OPTGROUP Element
the optgroup element is used to group the list of options and display in the drop - down list.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>optgroup</TITLE>
</HEAD>
<BODY>
<FORM>
Select one item from a list of fruits, vegetables, and trees:
<SELECT>
<OPTGROUP label=”fruits”>
<OPTION value="mango">mango</OPTION>
<OPTION value="orange">orange</OPTION>
<OPTION value="apple">apple</OPTION>
</OPTGROUP>
<OPTGROUP label=”Vegetables”>
<OPTION value="cabbage">cabbage</OPTION>
<OPTION value="tomato">tomato</OPTION>
<OPTION value="potato">potato</OPTION>
</OPTGROUP>
<OPTGROUP label=”trees”>
<OPTION value="deodar">deodar</OPTION>
<OPTION value="teak">teak</OPTION>
<OPTION value="banyan">banyan</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
</BODY>
</HTML>
Working with the TEXTAREA Element.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>textarea</TITLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA>
Enter your text here
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Using FIELDSET and LEGEND Elements
the fieldset element is used to group related controls in a single box and the legend element provide the caption for that box.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>grouping</TITLE>
</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND>Login window</LEGEND>
<LABEL>
username<INPUT type=”text”>
</LABEL>
<BR/>
<LABEL>
password<INPUT type=”password”>
</LABEL>
<BR/>
<LABEL>
<INPUT type="submit" name=”submit” value="click!">
</LABEL>
</FIELDSET>
</FORM>
</BODY>
</HTML>
Using the button element
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Using the BUTTON element
</TITLE>
</HEAD>
<BODY>
<P>Simple Submit Button</P>
<BUTTON type="submit">SUBMIT</BUTTON>
<HR/>
<P>Chagning the font of the button text.</P>
<BUTTON type="submit" style="color:red;font-size:20px;">
<B>SUBMIT</B>
</BUTTON>
</BODY>
</HTML>
the button element also allows you to display the images on the button control.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Using the BUTTON element
</TITLE>
</HEAD>
<BODY>
<P>Displaying Image on Button </P>
<BUTTON type="submit" >
<IMG src="back.png" width="50" height="50">
</BUTTON>
<BUTTON type="submit" >
<IMG src="next.png" width="50" height="50">
</BUTTON>
</BODY>
</HTML>
Using the DATALIST Element.
you can create a list of predefined options in a text field using the DATALIST element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the DataList Element</TITLE>
</HEAD>
<BODY>
<P>Enter the name of the your favorite car:</P>
<INPUT type="text" name="favCar" list="cars">
<DATALIST id="cars">
<OPTION value="BMW">
<OPTION value="Porsche">
<OPTION value="Audi">
<OPTION value="Ford">
<OPTION value="Ferrari">
<OPTION value="Mercedes">
</DATALIST>
</BODY>
</HTML>
Using the KEYGEN element
the keygen element is used to generate the key paire at the time of submitting the form
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the KEYGEN element</TITLE>
</HEAD>
<BODY>
<FORM action="keygen.html" method="post" enctype="text/plain">
First name: <INPUT type="text" name="fname" /><BR />
Last name: <INPUT type="text" name="lname" /><BR />
<KEYGEN name="key" challenge="0987654321" keytype="RSA">
<INPUT type="submit" value="Submit" />
</FORM>
</BODY>
</HTML>
when you click the submitt button to submit the form, a password dialog box apprears asking you to enter the password before leaving the page.
you need to enter the master password and click the OK button of the password dialog box to submitt the form to he server.
Using the output element
the output element is used to display the result of mathematical calculations.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>Using the OUTPUT Element</TITLE>
<SCRIPT type="text/javascript">
function add()
{
document.forms["form"]["resultadd"].value=23+123;
}
</SCRIPT>
</HEAD>
<BODY onload="add()">
<H1>OUTPUT Element.</H1>
<FORM name="form">
Adding the two numbers:
<OUTPUT name="resultadd">
</OUTPUT>
</FORM>
</BODY>
</HTML>
you can provide the numbers you want to add at runtime using JavaScript.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>Using the OUTPUT Element</TITLE>
<SCRIPT type="text/javascript">
function add()
{
num1=parseInt(prompt("Enter first number.",0));
num2=parseInt(prompt("Enter second number.",0));
document.forms["form"]["resultadd"].value=num1+num2;
}
</SCRIPT>
</HEAD>
<BODY onload="add()">
<H1>OUTPUT Element.</H1>
<FORM name="form">
Adding the two numbers:
<OUTPUT name="resultadd">
</OUTPUT>
</FORM>
</BODY>
</HTML>
Using the PROGRESS Element
you can view the progress of the current task with the help of the PROGRESS element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the PROGRESS Element</TITLE>
</HEAD>
<BODY>
Current task is
<PROGRESS value="200" max="500">
</PROGRESS>
completed.
</BODY>
</HTML>
Using the METER Element
If you want to display a range of scalable measurement, you can use the METER element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the METER element</TITLE>
</HEAD>
<BODY>
<METER value="5" min="0" max="10" style="width:200px"></METER> Passing Score <BR />
<METER value="7" min="0" max="10" style="width:200px"></METER>Your score<BR />
</BODY>
</HTML>
Using the enctype, action, and method attributes
the enctype attribute is used to specify the format of the form's content at the time of submission.
the action attribute is used to specify the address of the server to send the content of the form.
the method attribute is used to specify the name of the method using which the content is sent to the server.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Using the enctype, action, and method Attributes </TITLE>
</HEAD>
<BODY>
<FORM action="action.html" method="get" enctype="text/plain" >
First name: <INPUT type="text" name="fname" /><BR />
Last name: <INPUT type="text" name="lname" /><BR />
<INPUT type="submit" value="Submit" />
</FORM>
</BODY>
</HTML>
action.html
<!DOCTYPE HTML>
<HEAD>
<TITLE>Form Submitted</TITLE>
</HEAD>
<BODY>
<H1> The form is successfully submitted. </H1>
</BODY>
</HTML>
No comments:
Post a Comment