HTML part
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="form1" id="form1" >
<div>
<ul>
<li><input type="radio" name="color" value="red" />Red</li>
<li><input type="radio" name="color" value="green" />Green</li>
<li><input type="radio" name="color" value="blue" />Blue</li>
</ul>
<ul>
<li>
<!-- type='select-one' -->
<select name="selectbox" id='selectbox'>
<options>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</options>
</select>
</li>
</ul>
<ul>
<li>
<!-- type='multiple' -->
<select multiple id="selectbox2">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</li>
</ul>
<input type="text" pattern="\d+" size='25' maxlength="50" value="initial value" name="textbox1">
<textarea cols="5" rows="5">initial value</textarea>
<input type="time">
<input type="email" />
<input type="url" />
<input type="number" />
<input type="submit" value="Submit Form" name="submit-btn" />
<input type="reset" value="reset Form" />
<!-- <button type="button" value="OK">OK</button>
<button type="submit" value="OK">Submit Form</button> -->
</div>
<div contenteditable id="richedit" style="height: 300px;"></div>
<iframe name="richedit" style="height: 100px;" src="blank.htm"></iframe>
</form>
<script type="text/javascript" src="form.js" ></script>
</body>
</html>
Form.js
// in HTML, is a form of elemental <form> represented, in javascript, to form the corresponding HTMLFormElement is inherited from the HTMLElement
// the HTMLElement has the following unique properties and methods.
// acceptCharset character set can be processed by the server, equivalent to the characteristics of the HTML acceptCharset
// action receiving the URL request, equivalent to the action attribute in the HTML
// set all the elements form controls (HTMLCollection of).
// enctype requested encoding type, enctype characteristics equivalent to the HTML
// number of control length in a form
// method HTPP request type to be transmitted, usually GET or POST, method characteristics equivalent to the HTML
name // name of the form , name characteristics equivalent to the HTML
// submit to submit the form
// target window name for transmitting or receiving a response to the request, target characteristics of the equivalent HTML
// document.getElementById ( "form1") document.forms - document. Forms [0] document.forms [ "Form1"]
var form = document.getElementById ( "Form1");
form.addEventListener ( 'Submit', function (Event) {
// form to avoid multiple submissions
var btn = (event ? event : window.event).target.elements['submit-btn'];
btn.disabled = true;
//验证等操作
var colorFields = form.elements['color'];
alert(colorFields.length);
var firstColorFiled = colorFields[0];
var firstFormFiled = form.elements[0];
alert(firstColorFiled == firstFormFiled);
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}, false);
form.addEventListener('reset', function (event) {
if (event.preventDefault()) {
event.preventDefault();
}
else {
= to false event.returnValue;
}
}, to false);
//form.submit (); submit the form form.reset (); Reset Form
//14.1.3 form field
var colorFields = form.elements [ 'color' ];
Alert // (colorFields.length);
var firstColorFiled colorFields = [0];
var firstFormFiled form.elements = [0];
// Alert (firstColorFiled == firstFormFiled);
// common attributes form field
// disabled boolean whether the current field disabled
// form belongs to the current field pointer is just a form of read-only
// name field of the name of the current
// readOnly boolean indicating whether the change field is read
// tabIndex tab shows the number of the current switching field
// type current field type, such as a checkbox radio etc.
// value the value of the current field will be submitted to the server
var = form.elements field [0];
field.value = 'Another value';
field.focus ();
= to true field.disabled;
Field.Type = 'CheckBox';
// Alert (form.form == form);
//14.2.1 selected text
var textbox = document.forms [0] .elements [ 'textbox1'];
textbox.select // ();
// textbox.addEventListener ( 'Focus', function (Event) {
// (Event Event:? the window.event) .target.select ();
//}, to false);
// selection event
// textbox.addEventListener ( 'sELECT', function (event) {
// // Alert ( 'the text selected:' + textbox.value);
// // obtain selected text
// alert (textbox.value. the substring (textbox.selectionStart, textbox.selectionEnd));
//}, to false);
// selected portion of text
textbox.value = 'the Hello World!';
textbox.focus (); // get the focus to take effect
//textbox.setSelectionRange(0,textbox.value.length);
textbox.setSelectionRange (0,. 3 );// Google browser support
// textbox.setSelectionRange (4,7);
// Select all the text browser support IE
// var = textbox.createTextRange Range ();
// Range. Collapse (to true);
// range.moveStart ( 'Character', 0);
// range.moveEnd ( 'Character', textbox.value.length);
// range.select ();
//14.2.2 filter input
textbox.addEventListener ( 'KeyPress', function (Event) {
// Event var target = event.target:? window.event.target;
var the charCode = null;
IF (typeof event.charCode == 'Number') {
the charCode = event.charCode;
} {the else
the charCode = event.keyCode;
}
// continue bubbling the non-blocking execution digital
IF (! / \ D / .test (the String.fromCharCode (the charCode)) && the charCode> event.ctrlKey. 9 &&!) {
(Event Event:? the window.event) .preventDefault ();
}
}, to false);
// prevent replication noncompliant content
textbox.addEventListener ( 'Paste', function (Event) {
var text = (|| event.clipboardData window.ClipboardData) .getData ( 'text');
! IF (/ ^ \ * $ D /.test(text)) {
? (Event Event: the window.event) .preventDefault ();
}
}, to false);
//14.2.4 the HTML5 constraint validation the API
// <INPUT type = 'text' name = 'username 'required /> required fields
var isRequiredSupported =' required 'in document.createElement (' input '); // check whether the browser supports the required attributes
// test field validation
if (document.forms [0].the checkValidity ()) {
// form is valid
}
form.noValidate = to true; // disable validation
// 14.3 checkbox script
// select method
// add (newOption, relOption) inserting a new element to control its position in the relevant item relOption
// Multiple Boolean value indicating whether to allow multiple options to select
// options control all <option>HTLCollection elements
// remove (index) Removes the specified item location
// the selectedIndex 0 based index of the selected item, the selected item if no value is -1. For multiple choice control, holds only the first index of the selected item
// select the number of lines visible size box
// DOM elements in each option has a HTMLOptionElement object represents, has the following attributes
// index option in the index of the currently set options
// label label option currently
// selected Boolean value that indicates whether the item is currently selected
// text text options
// value value option
//14.3.1 selection options
var selectbox = document.getElementById ( "selectbox");
var selectedOption = selectbox.options [selectbox.selectedIndex] ;
selectbox.options [. 1] = .selected to true;
//14.3.2 added option
var newOption = document.createElement ( 'option' );
newOption.appendChild (document.createTextNode ( 'Option-the Text'));
newOption.setAttribute ( 'value', 'Option-value');
selectbox.appendChild (NewOption);
//14.3.3 remove options
frames [ 'richedit'] document.designMode = 'on'.;
Selectbox.removeChild // (selectbox.options [0]);
// selectbox.remove (0);
selectbox.options [0] = null;
//14.3.4 movement and rearrangement options
var selectbox2 = document.getElementById ( ' selectbox2 ');
selectbox2.appendChild (selectbox.options [0]); //selectbox.option[0] added to the second select when removed from the first select
var optionToMove selectbox.options = [. 1];
selectbox .insertBefore (optionToMove, selectbox.options [-optionToMove.index. 1]);
//14.4 serialized form
//14.5 rich text editing
. Frames [ "RichEdit"] document.execCommand ( 'Bold', to false, null);
Frames [ 'RichEdit'] document.execCommand ( 'Italic', to false, null);.
Frames [ 'RichEdit'] .document.execCommand ( 'createLink', to false, 'HTTP: //www.wrox.com');
frames['richedit'].document.execCommand('formateblock',false,'<h1>');