JavaScript Tutorial/Form/Introduction
Содержание
- 1 Accessing form Fields
- 2 A form can contain any number of input elements:
- 3 Change string to big, bold, fixed with form control
- 4 Change string to italics, small, strike with form control
- 5 Change string to subscript and superscript with form control
- 6 Form Basics
- 7 Form Field Commonalities
- 8 Getting form References
Accessing form Fields
Every form field is contained in the form"s elements collection.
You can access the various fields in the collection by using their name attributes or their positions in the collection:
<source lang="javascript">
var firstField = oForm.elements[0]; //get the first form field var myTextbox = oForm.elements["textbox1"];//get the field with the name "textbox1"</source>
A form can contain any number of input elements:
<input/> is the main HTML input element.
The type attribute of <input/> determines what type of input control is displayed:
- <input type= "text"/> is a single-line text box.
- <input type= ""radio"/> is a radio button.
- <input type= ""checkbox"/> is a check box.
- <input type= ""file"/> is a file upload text box.
- <input type= ""password"/> is a password text box (where characters are not displayed as you type).
- <input type= ""button"/> is a generic button that can be used to cause a custom action.
- <input type= ""submit"/> is a button whose sole purpose is to submit the form.
- <input type= ""reset"/> is a button whose sole purpose is to reset all fields in the form to their default values
- <input type= ""hidden"/> is an input field that isn"t displayed on screen.
- <input type= ""image"/> is an image that is used just like a Submit button.
- <select/> renders either a combo box or a list box composed of values defined by <option/> elements
- renders a multiline text box in a size determined by the rows and cols attributes.
10. 1. Introduction 10. 1. 1. <A href="/Tutorial/JavaScript/0200__Form/FormBasics.htm">Form Basics</a> 10. 1. 2. A form can contain any number of input elements: 10. 1. 3. <A href="/Tutorial/JavaScript/0200__Form/GettingformReferences.htm">Getting form References</a> 10. 1. 4. <A href="/Tutorial/JavaScript/0200__Form/AccessingformFields.htm">Accessing form Fields</a> 10. 1. 5. <A href="/Tutorial/JavaScript/0200__Form/FormFieldCommonalities.htm">Form Field Commonalities</a> 10. 1. 6. <A href="/Tutorial/JavaScript/0200__Form/Changestringtobigboldfixedwithformcontrol.htm">Change string to big, bold, fixed with form control</a> 10. 1. 7. <A href="/Tutorial/JavaScript/0200__Form/Changestringtoitalicssmallstrikewithformcontrol.htm">Change string to italics, small, strike with form control</a> 10. 1. 8. <A href="/Tutorial/JavaScript/0200__Form/Changestringtosubscriptandsuperscriptwithformcontrol.htm">Change string to subscript and superscript with form control</a>
Change string to big, bold, fixed with form control
<source lang="javascript">
<html> <head>
<script type="text/javascript">
function showWindow() {
var txt = document.form1.stringField.value;
var clr = "";
var sze = "";
if (document.form1.bigBox.checked) txt = txt.big();
if (document.form1.boldBox.checked) txt = txt.bold();
if (document.form1.fixedBox.checked) txt = txt.fixed();
objWindow = window.open("", "","width=600,height=300");
objWindow.document.write(txt);
objWindow.document.close();
}
</script>
</head> <body>
<form method="post" name="form1" action="null">
String:<input type="text" size="40" maxlength="256" name="stringField" />
Style:
<input type="checkbox" name="bigBox" value="ON" />Big
<input type="checkbox" name="boldBox" value="ON" />Bold
<input type="checkbox" name="fixedBox" value="ON" />Fixed
<input type="button" name="Show" value="Show" onclick="showWindow()" />
</form>
</body> </html></source>
Change string to italics, small, strike with form control
<source lang="javascript">
<html> <head>
<script type="text/javascript">
function showWindow() {
var txt = document.form1.stringField.value;
if (document.form1.italicsBox.checked) txt = txt.italics();
if (document.form1.smallBox.checked) txt = txt.small();
if (document.form1.strikeBox.checked) txt = txt.strike();
objWindow = window.open("", "","width=600,height=300");
objWindow.document.write(txt);
objWindow.document.close();
}
</script>
</head> <body>
<form method="post" name="form1" action="null">
String:<input type="text" size="40" maxlength="256" name="stringField" />
Style:
<input type="checkbox" name="boldBox" value="ON" />Bold
<input type="checkbox" name="fixedBox" value="ON" />Fixed
<input type="checkbox" name="italicsBox" value="ON" />Italics
<input type="checkbox" name="smallBox" value="ON" />Small
<input type="checkbox" name="strikeBox" value="ON" />Strike
<input type="button" name="Show" value="Show" onclick="showWindow()" />
</form>
</body> </html></source>
Change string to subscript and superscript with form control
<source lang="javascript">
<html> <head>
<script type="text/javascript">
function showWindow() {
var txt = document.form1.stringField.value;
if (document.form1.subBox.checked) txt = txt.sub();
if (document.form1.supBox.checked) txt = txt.sup();
objWindow = window.open("", "","width=600,height=300");
objWindow.document.write(txt);
objWindow.document.close();
}
</script>
</head> <body>
<form method="post" name="form1" action="null">
String:<input type="text" size="40" maxlength="256" name="stringField" />
Style:
<input type="checkbox" name="subBox" value="ON" />Sub
<input type="checkbox" name="supBox" value="ON" />Sup
<input type="button" name="Show" value="Show" onclick="showWindow()" />
</form>
</body> </html></source>
Form Basics
An HTML form is defined by using the <form/> element, which has several attributes:
- method -- Indicates whether the browser should sent a GET request or a POST request
- action -- Indicates the URL to which the form should be submitted
- enctype -- The way the data should be encoded when sent to the server. The default is application/x-www-url-encoded, but it may be set to multipart/form-data if the form is uploading a file.
- accept -- Lists the mime types the server will handle correctly when a file is uploaded
- accept-charset -- Lists the character encodings that are accepted by the server when data is submitted
10. 1. Introduction 10. 1. 1. Form Basics 10. 1. 2. <A href="/Tutorial/JavaScript/0200__Form/Aformcancontainanynumberofinputelements.htm">A form can contain any number of input elements:</a> 10. 1. 3. <A href="/Tutorial/JavaScript/0200__Form/GettingformReferences.htm">Getting form References</a> 10. 1. 4. <A href="/Tutorial/JavaScript/0200__Form/AccessingformFields.htm">Accessing form Fields</a> 10. 1. 5. <A href="/Tutorial/JavaScript/0200__Form/FormFieldCommonalities.htm">Form Field Commonalities</a> 10. 1. 6. <A href="/Tutorial/JavaScript/0200__Form/Changestringtobigboldfixedwithformcontrol.htm">Change string to big, bold, fixed with form control</a> 10. 1. 7. <A href="/Tutorial/JavaScript/0200__Form/Changestringtoitalicssmallstrikewithformcontrol.htm">Change string to italics, small, strike with form control</a> 10. 1. 8. <A href="/Tutorial/JavaScript/0200__Form/Changestringtosubscriptandsuperscriptwithformcontrol.htm">Change string to subscript and superscript with form control</a>
Form Field Commonalities
All form fields (except for hidden fields) contain common properties, methods, and events:
disabled property indicate whether the control is disabled as well as to actually disable the control (a disabled control doesn"t allow any user input, but gives no visual indication that the control is disabled). form property a pointer back to the form of which the field is a part. blur() method causes the form field to lose focus (by shifting the focus elsewhere). focus() method causes the form field to gain focus (the control is selected for keyboard interaction). blur event occurs when the field loses focus; the onblur event handler is then executed. focus event occurs when the field gains focus; the onfocus event handler is then executed.
Getting form References
First, use getElementById() and pass in the form"s ID:
<source lang="javascript">
var oForm = document.getElementById("form1");</source>
