Admin: 1 версия

2010-05-26T08:24:47Z

1 версия

в 18:52, 25 мая 2010

2010-05-25T18:52:56Z

Новая страница

== Accessing form Fields==

<p>Every form field is contained in the form"s elements collection.</p>
<p>You can access the various fields in the collection by using their name attributes or their positions in the collection:</p>



<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:==

<p><input/> is the main HTML input element.</p>
<p>The type attribute of <input/> determines what type of input control is displayed:</p>
<OL><LI><input type= "text"/> is a single-line text box.</LI><LI><input type= ""radio"/> is a radio button.</LI><LI><input type= ""checkbox"/> is a check box.</LI><LI><input type= ""file"/> is a file upload text box.</LI><LI><input type= ""password"/> is a password text box (where characters are not displayed as you type).</LI><LI><input type= ""button"/> is a generic button that can be used to cause a custom action.</LI><LI><input type= ""submit"/> is a button whose sole purpose is to submit the form.</LI><LI><input type= ""reset"/> is a button whose sole purpose is to reset all fields in the form to their default values</LI><LI><input type= ""hidden"/> is an input field that isn"t displayed on screen.</LI><LI><input type= ""image"/> is an image that is used just like a Submit button.</LI><LI><select/> renders either a combo box or a list box composed of values defined by <option/> elements</LI><LI> renders a multiline text box in a size determined by the rows and cols attributes.</LI></OL>
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==

<p>An HTML form is defined by using the <form/> element, which has several attributes:</p>
<OL><LI>method -- Indicates whether the browser should sent a GET request or a POST request</LI><LI>action -- Indicates the URL to which the form should be submitted</LI><LI>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.</LI><LI>accept -- Lists the mime types the server will handle correctly when a file is uploaded</LI><LI>accept-charset -- Lists the character encodings that are accepted by the server when data is submitted</LI></OL>
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==

<p>All form fields (except for hidden fields) contain common properties, methods, and events:</p>
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==

<p>First, use getElementById() and pass in the form"s ID:</p>



<source lang="javascript">
var oForm = document.getElementById("form1");</source>

← Предыдущая	Версия 08:24, 26 мая 2010
(нет различий)

JavaScript Tutorial/Form/Introduction - История изменений

Admin: 1 версия

в 18:52, 25 мая 2010