The box below contains the HTML for the page you have chosen to edit. Add your own HTML to customize this page: <HTML> <HEAD> <TITLE>Form</TITLE> <SCRIPT LANGUAGE="JavaScript"> function allowReset() { return window.confirm("Go ahead and clear the form?") } function allowSend() { return window.confirm("Go ahead and mail this info?") } </SCRIPT> </HEAD> <BODY background="notebookback.gif" text="black"><center><h1>Lesson 8</h1></center> <p><center><H3>FORMS</H3></center> <ul> <br> <table border=0> <td bgcolor=black align=center valign=top> <br><p> <br><p> <br><p> <a href=javaproject.html>HOME</a><br><p> <a href=lesson1.html>LESSON 1</a><p> <a href=lesson2.html>LESSON 2</a><p> <a href=lesson3.html>LESSON 3</a><p> <a href=lesson4.html>LESSON 4</a><p> <a href=lesson5.html>LESSON 5</a><p> <a href=lesson6.html>LESSON 6</a><p> <a href=lesson7.html>LESSON 7</a><p> <a href=lesson9.html>LESSON 9</a><p> <a href=lesson10.html>LESSON 10</a><p> </td> <td></td><td></td><td></td> <td align=left bgcolor=lightyellow> <p><h3><i> A little about forms......</i></h3></P><BR> <p> Forms and their elements are the primary , two-way gateways between users and JavScript scripts. A form element provides the only way that users can enter textual information or make a selection froma predetermined set of choices, whether those choices appear in the form of an on/off checkbox, one of a set of mutually exclusive radio buttons, or a selection from a list.</P> <p> This lesson is one of my favorites! As you can see below the form I have made has a few good features like Reset and submit. These two are called objects, while the <b>onReset</b> and <b>onSubmit</b> used in the code to enable these features are known as 'event handlers'. Then again, the place where you will input your name, address and so on is called a Text object.</P> The text object is the primary medium for capturing user-entered text. The font in these text objects are fixed and left aligned in the field. </P> <p>The basic syntax to create a text object is:</p> <b> INPUT<pre> TYPE="text"<P> NAME="fieldName"<P> VALUE="contents"<P> SIZE="characterCount"<P></pre></P></b> <p>The code for the form underneath is formulated so as to mail the details to my e-mail address. Fill the form and click submit to see what happens. You will be required to give a confirmation. Try it!</P> <FORM METHOD=POST ACTION="mailto:hetuda@hotmail.com" onReset="return allowReset()" onSubmit="return allowSend()"> Enter your first name:<INPUT TYPE="text" NAME="firstName"><p> Enter your last name:<INPUT TYPE="text" NAME="lastName"><p> Enter your address:<INPUT TYPE="text" NAME="address"><p> Enter your date of birth:<INPUT TYPE="text" NAME="dob"><P> Enter the country you live in:<INPUT TYPE="text" NAME="country"><P> Enter your occupation:<INPUT TYPE="text" NAME="occupation"><P> <INPUT TYPE="radio" NAME="gender" CHECKED>Male <INPUT TYPE="radio" NAME="gender">Female<p> <INPUT TYPE="checkbox" NAME="retired">I am retired<p> <INPUT TYPE="reset"> <INPUT TYPE="submit"> </FORM> <P>Now try it again. Fill it and click on 'RESET'.</P> <A HREF="formcode.txt">Have a look at the code - its easy to understand.</A> <p><h3>ELEMENTS</h3></P> <p> Let's now get down to basics of what forms consist of. All the text fields, buttons, radio buttons, checkboxes, selection lists and so on in a form are known as elements. The elements property is an array of all items defined within the current HTML document. For example, if a form defines three <b>"INPUT"</b> items, the<b> elements property</b> for that form is an array consisting of three entries, one for each item. The order of the entries in an elements array depends entirely upon their order in the HTML document - the first INPUT item in the a form is <b>elements[0]</b>, the second is <b> elements[1]</b>, and so on.</P> <p>Similarly the <b>value property</b> for a text element is the string that maybe be entered into it.</P> <p>It is always a good idea to keep meaningful<B> names</B> for each form element in order to be able to use those names in references throughout the script. Check my code again and see the names I've given for each INPUT element.</P> <A HREF="lesson9.html">LESSON 9</A> </td> </table> </BODY> </HTML>
The box below contains the HTML for the page you have chosen to edit.
Add your own HTML to customize this page:
