HTML部分
<!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
//在HTML中，表单是由<form>元素来表示的，在javascript中，表单对应的是HTMLFormElement 继承自HTMLElement
//HTMLElement有下列独有的属性和方法。
//acceptCharset 服务器能够处理的字符集，等价于HTML中accept-Charset特性
//action 接收请求的URL，等价于HTML中的action特性
//elements 表单中所有控件的集合（HTMLCollection).
//enctype 请求编码类型，等价于HTML中的enctype特性
//length 表单中的控件数量
//method 要发送HTPP请求类型，通常是GET或POST,等价于HTML中的method特性
//name 表单的名称，等价于HTML的name特性
//submit 提交表单
//target 用于发送请求或者接收响应的窗口名称，等价于HTML的target特性
// document.getElementById("form1") document.forms - document.forms[0] document.forms["form1"]
var form = document.getElementById("form1");
form.addEventListener('submit', function (event) {
//避免表单多次提交
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 {
event.returnValue = false;
}
}, false);
//form.submit(); 提交表单 form.reset(); 重置表单
//14.1.3 表单字段
var colorFields = form.elements['color'];
// alert(colorFields.length);
var firstColorFiled = colorFields[0];
var firstFormFiled = form.elements[0];
//alert(firstColorFiled == firstFormFiled);
//表单字段共有属性
//disabled boolean 当前字段是否被禁用
//form 只想当前字段所属表单的指针，只读
//name 当前字段的名称
//readOnly boolean 表示改字段是否是只读
//tabIndex 表是当前字段的切换tab 序号
//type 当前字段的类型，如 checkbox radio 等
//value 当前字段将提交给服务器的值
var field = form.elements[0];
field.value = 'Another value';
field.focus();
field.disabled = true;
field.type = 'checkbox';
// alert(form.form ==form);
//14.2.1 选择文本
var textbox = document.forms[0].elements['textbox1'];
// textbox.select();
// textbox.addEventListener('focus',function(event){
// (event?event:window.event).target.select();
// },false);
//选择事件
// textbox.addEventListener('select',function(event){
// //alert('Text selected:'+textbox.value);
// //取得选择的文本
// alert(textbox.value.substring(textbox.selectionStart,textbox.selectionEnd));
// },false);
//选择部分文本
textbox.value = 'Hello world!';
textbox.focus(); //获得焦点才生效
//textbox.setSelectionRange(0,textbox.value.length);
textbox.setSelectionRange(0, 3); //谷歌浏览器支持
// textbox.setSelectionRange(4,7);
//选择所有文本 IE浏览器支持
// var range = textbox.createTextRange();
// range.collapse(true);
// range.moveStart('character',0);
// range.moveEnd('character',textbox.value.length);
// range.select();
//14.2.2 过滤输入
textbox.addEventListener('keypress', function (event) {
//var target = event?event.target:window.event.target;
var charCode = null;
if (typeof event.charCode == 'number') {
charCode = event.charCode;
} else {
charCode = event.keyCode;
}
//非数字阻止继续冒泡执行
if (!/d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey) {
(event ? event : window.event).preventDefault();
}
}, false);
//阻止复制的内容不合规
textbox.addEventListener('paste', function (event) {
var text = (event.clipboardData || window.ClipboardData).getData('text');
if(!/^d*$/.test(text)){
(event?event:window.event).preventDefault();
}
}, false);
//14.2.4 HTML5约束验证API
//<input type='text' name='username' required /> 必填字段
var isRequiredSupported = 'required' in document.createElement('input'); //检验浏览器是否支持required属性
//检验字段有效性
if(document.forms[0].checkValidity()){
//表单有效
}
form.noValidate =true;//禁用验证
// 14.3 选择框脚本
//select 方法
//add(newOption,relOption) 向控件插入新元素，其位置在相关项relOption
//multiple 布尔值 表示是否允许多选项选择
//options 控件中所有<option>元素的HTLCollection
//remove(index) 移除指定位置的项
//selectedIndex 基于0的选中项的索引，如果没有选中项 则值为-1. 对于多选的控件，只保持选中项的第一项索引
//size 选择框中可见的行数
//DOM中每个option的元素都有一个HTMLOptionElement 对象表示，有如下属性
//index 当前选项在options集合中的索引
//label 当前选择项的标签
//selected 布尔值，表示当前项是否被选中
//text 选项的文本
//value 选项的值
//14.3.1 选择选项
var selectbox = document.getElementById("selectbox");
var selectedOption = selectbox.options[selectbox.selectedIndex];
selectbox.options[1].selected =true;
//14.3.2 添加选项
var newOption = document.createElement('option');
newOption.appendChild(document.createTextNode('Option Text'));
newOption.setAttribute('value','Option value');
selectbox.appendChild(newOption);
//14.3.3 移除选项
// selectbox.removeChild(selectbox.options[0]);
// selectbox.remove(0);
selectbox.options[0] =null;
//14.3.4 移动和重排选项
var selectbox2 = document.getElementById('selectbox2');
selectbox2.appendChild(selectbox.options[0]); //selectbox.option[0] 添加到第二select的时候会从第一个select 移除
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1]);
//14.4 表单序列化
//14.5 富文本编辑
frames['richedit'].document.designMode ='on';
frames["richedit"].document.execCommand('bold',false,null);
frames['richedit'].document.execCommand('italic',false,null);
frames['richedit'].document.execCommand('createlink',false,'http://www.wrox.com');
frames['richedit'].document.execCommand('formateblock',false,'<h1>');