一、Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。
1、type=text
输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。
参数name：同样是表示的该文本输入框名称。
参数size：输入框的长度大小。
参数maxlength：输入框中允许输入字符的最大数。
参数value：输入框中的默认值
特殊参数readonly：表示该框中只能显示，不能添加修改。
<form>
your name:
<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br>
<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改">
</form>
2、type=password
不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。
参数和“type=text”相类似。
<form>
your password:
<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15
</form>
3、type=file
当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：）
提供了一个文件目录输入的平台，参数有name，size。
<form>
your file:
<input type="file" name="yourfile" size="30">
</form>
4、type=hidden
非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。
一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。
<form name="form1">
your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com">
</form>
<script>
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
</script>
5、type=button
标准的一windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码
<form name="form1">
your button:
<input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open(‘http://www.cnbruce.com‘)">
</form>
6、type=checkbox
多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择）
其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。）
<form name="form1">
a:<input type="checkbox" name="checkit" value="a" checked><br>
b:<input type="checkbox" name="checkit" value="b"><br>
c:<input type="checkbox" name="checkit" value="c"><br>
</form>
name值可以不一样，但不推荐<br>
<form name="form1">
a:<input type="checkbox" name="checkit1" value="a" checked><br>
b:<input type="checkbox" name="checkit2" value="b"><br>
c:<input type="checkbox" name="checkit3" value="c"><br>
</form>
7、type=radio
即单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked.
不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。
<form name="form1">
a:<input type="radio" name="checkit" value="a" checked><br>
b:<input type="radio" name="checkit" value="b"><br>
c:<input type="radio" name="checkit" value="c"><br>
</form>
下面是name值不同的一个例子，就不能实现多选一的效果了<br>
<form name="form1">
a:<input type="radio" name="checkit1" value="a" checked><br>
b:<input type="radio" name="checkit2" value="b"><br>
c:<input type="radio" name="checkit3" value="c"><br>
</form>
8、type=image
比较另类的一个，自己看看效果吧，可以作为提交式图片
<form name="form1" action="xxx.asp">
your Imgsubmit:
<input type="image" src="../blog/images/face4.gif">
</form>
9、type=submit and type=reset
分别是“提交”和“重置”两按钮
submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。
<form name="form1" action="xxx.asp">
<input type="text" name="yourname">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
二、标签属性
| 标签属性 | 属性 | 描述 |
|---|---|---|
| ACCESSKEY | accessKey | 设置或获取对象的快捷键。 |
| ATOMICSELECTION | 指定元素及其内容是否可以一不可见单位统一选择。 | |
| AUTOCOMPLETE | autocomplete | 设置或获取对象的自动完成状态。 |
| BEGIN | begin | 设置或获取时间线在该元素上播放前的延迟时间。 |
| canHaveChildren | 获取表明对象是否可以包含子对象的值。 | |
| canHaveHTML | 获取表明对象是否可以包含丰富的 HTML 标签的值。 | |
| CLASS | className | 设置或获取对象的类。 |
| clientHeight | 获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。 | |
| clientLeft | 获取 offsetLeft 属性和客户区域的实际左边之间的距离。 | |
| clientTop | 获取 offsetTop 属性和客户区域的实际顶端之间的距离。 | |
| clientWidth | 获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。 | |
| CONTENTEDITABLE | contentEditable | 设置或获取表明用户是否可编辑对象内容的字符串。 |
| DATAFLD | dataFld | 设置或获取由 dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 |
| DATASRC | dataSrc | 设置或获取用于数据绑定的数据源。 |
| defaultValue | 设置或获取对象的初始内容。 | |
| DIR | dir | 设置或获取对象的阅读顺序。 |
| disabled | 获取表明用户是否可与该对象交互的值。 | |
| DISABLED | disabled | 设置或获取控件的状态。 |
| END | end | 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。 |
| firstChild | 获取对象的 childNodes 集合的第一个子对象的引用。 | |
| form | 获取对象所在表单的引用。 | |
| hasMedia | 获取一个表明元素是否为 HTML+TIME 媒体元素的 Boolean 值。 | |
| HIDEFOCUS | hideFocus | 设置或获取表明对象是否显式标明焦点的值。 |
| ID | id | 获取标识对象的字符串。 |
| isContentEditable | 获取表明用户是否可编辑对象内容的值。 | |
| isDisabled | 获取表明用户是否可与该对象交互的值。 | |
| isMultiLine | 获取表明对象的内容是包含一行还是多行的值。 | |
| isTextEdit | 获取是否可使用该对象创建一个 TextRange 对象。 | |
| LANG | lang | 设置或获取要使用的语言。 |
| LANGUAGE | language | 设置或获取当前脚本编写用的语言。 |
| lastChild | 获取该对象 childNodes 集合中最后一个子对象的引用。 | |
| MAXLENGTH | maxLength | 设置或获取用户可在文本控件中输入的最多字符数。 |
| NAME | name | 设置或获取对象的名称。 |
| nextSibling | 获取对此对象的下一个兄弟对象的引用。 | |
| nodeName | 获取特定结点类型的名称。 | |
| nodeType | 获取所需结点的类型。 | |
| nodeValue | 设置或获取结点的值。 | |
| offsetHeight | 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。 | |
| offsetLeft | 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。 | |
| offsetParent | 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 | |
| offsetTop | 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。 | |
| offsetWidth | 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。 | |
| onOffBehavior | 获取表明指定的 Microsoft® DirectAnimation® 行为是否正在运行的对象。 | |
| outerHTML | 设置或获取对象及其内容的 HTML 形式。 | |
| outerText | 设置或获取对象的文本。 | |
ownerDocument |
设置或获取结点关联的 document 对象。 | |
| parentElement | 获取对象层次中的父对象。 | |
| parentNode | 获取文档层次中的父对象。 | |
| parentTextEdit | 获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。 | |
| previousSibling | 获取对此对象的上一个兄弟对象的引用。 | |
| READONLY | readOnly | 设置或获取表明对象内容是否为只读的值。 |
| readyState | 获取表明对象当前状态的值。 | |
| recordNumber | 获取数据集中生成对象的原始记录。 | |
| scopeName | 获取为该元素定义的命名空间。 | |
| scrollHeight | 获取对象的滚动高度。 | |
| scrollLeft | 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 | |
| scrollTop | 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 | |
| scrollWidth | 获取对象的滚动宽度。 | |
| SIZE | size | 设置或获取控件的大小。 |
| sourceIndex | 获取对象在源序中的依次位置，即对象出现在 document 的 all 集合中的顺序。 | |
| STYLE | 为该设置元素设置内嵌样式。 | |
| SYNCMASTER | syncMaster | 设置或获取时间容器是否必须在此元素上同步回放。 |
| SYSTEMBITRATE | 获取系统中大约可用带宽的 bps。 | |
| SYSTEMCAPTION | 表明是否要显示文本来代替演示的的音频部分。 | |
| SYSTEMLANGUAGE | 表明是否在用户计算机上的选项设置中选中了给定语言。 | |
| SYSTEMOVERDUBORSUBTITLE | 指定针对那些正在观看演示但对被播放的音频所使用的语言并不熟悉的用户来说是否要渲染配音或字幕。 | |
| TABINDEX | tabIndex | 设置或获取定义对象的 Tab 顺序的索引。 |
| tagName | 获取对象的标签名称。 | |
| tagUrn | 设置或获取在命名空间声明中指定的统一资源名称(URN)。 | |
| TIMECONTAINER | timeContainer | 设置或获取与元素关联的时间线类型。 |
| TITLE | title | 设置或获取对象的咨询信息(工具提示)。 |
| TYPE | type | 获取或初始设置对象所代表的 input 控件类型。 |
| uniqueID | 获取为对象自动生成的唯一标识符。 | |
| UNSELECTABLE | 指定该元素不可被选中。 | |
| VALUE | value | 设置或获取控件对象的显示值。当控件对象提交时此值将返回给服务器。 |
| VCARD_NAME | vcard_name | 设置或获取对象的 vCard 值，以便用于自动完成框。 |
| WIDTH | width | 设置或获取对象的计算宽度。 |
三、方法事件
| 事件 | 描述 |
|---|---|
| onactivate | 当对象设置为活动元素时触发。 |
| onafterupdate | 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 |
| onbeforeactivate | 对象要被设置为当前元素前立即触发。 |
| onbeforecut | 当选中区从文档中删除之前在源对象触发。 |
| onbeforedeactivate | 在 activeElement 从当前对象变为父文档其它对象之前立即触发。 |
| onbeforeeditfocus | 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。 |
| onbeforepaste | 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。 |
| onbeforeupdate | 当成功更新数据源对象中的关联对象前在数据绑定对象上触发。 |
| onblur | 在对象失去输入焦点时触发。 |
| onchange | 当对象或选中区的内容改变时触发。 |
| onclick | 在用户用鼠标左键单击对象时触发。 |
| oncontextmenu | 在用户使用鼠标右键单击客户区打开上下文菜单时触发。 |
| oncontrolselect | 当用户将要对该对象制作一个控件选中区时触发。 |
| oncut | 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。 |
| ondblclick | 当用户双击对象时触发。 |
| ondeactivate | 当 activeElement 从当前对象变为父文档其它对象时触发。 |
| ondrag | 当进行拖曳操作时在源对象上持续触发。 |
| ondragend | 当用户在拖曳操作结束后释放鼠标时在源对象上触发。 |
| ondragenter | 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。 |
| ondragleave | 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。 |
| ondragover | 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。 |
| ondragstart | 当用户开始拖曳文本选中区或选中对象时在源对象上触发。 |
| ondrop | 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。 |
| onerrorupdate | 更新数据源对象中的关联数据出错时在数据绑定对象上触发。 |
| onfilterchange | 当可视滤镜更改状态或完成转换时触发。 |
| onfocus | 当对象获得焦点时触发。 |
onfocusin |
当元素将要被设置为焦点之前触发。 |
| onfocusout |
在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。 |
| onhelp | 当用户在浏览器为当前窗口时按 F1 键时触发。 |
| onkeydown | 当用户按下键盘按键时触发。 |
| onkeypress | 当用户按下字面键时触发。 |
| onkeyup | 当用户释放键盘按键时触发。 |
| onlosecapture | 当对象失去鼠标捕捉时触发。 |
| onmousedown | 当用户用任何鼠标按钮单击对象时触发。 |
| onmouseenter | 当用户将鼠标指针移动到对象内时触发。 |
| onmouseleave | 当用户将鼠标指针移出对象边界时触发。 |
| onmousemove | 当用户将鼠标划过对象时触发。 |
| onmouseout | 当用户将鼠标指针移出对象边界时触发。 |
| onmouseover | 当用户将鼠标指针移动到对象内时触发。 |
| onmouseup | 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 |
| onmousewheel |
当鼠标滚轮按钮旋转时触发。 |
| onmove | 当对象移动时触发。 |
| onmoveend | 当对象停止移动时触发。 |
| onmovestart | 当对象开始移动时触发。 |
| onpaste | 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。 |
| onpropertychange | 当在对象上发生对象上发生属性更改时触发。 |
| onreadystatechange | 当对象状态变更时触发。 |
| onresize | 当对象的大小将要改变时触发。 |
| onresizeend | 当用户更改完控件选中区中对象的尺寸时触发。 |
| onresizestart | 当用户开始更改控件选中区中对象的尺寸时触发。 |
| onselect | 当当前选中区改变时触发。 |
| onselectstart | 对象将要被选中时触发。 |
| ontimeerror | 当特定时间错误发生时无条件触发，通常由将属性设置为无效值导致。 |
| 方法 | 描述 |
|---|---|
| addBehavior | 给元素附加一个行为。 |
| appendChild | 给对象追加一个子元素。 |
| applyElement | 使得元素成为其它元素的子元素或父元素。 |
| attachEvent | 将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。 |
| blur | 使元素失去焦点并触发 onblur 事件。 |
| clearAttributes | 从对象中删除全部标签属性和值。 |
| click | 触发 onclick 事件来模拟单击。 |
| cloneNode | 从文档层次中复制对对象的引用。 |
| componentFromPoint | 通过特定事件返回对象在指定坐标下的位置。 |
| contains | 检查对象中是否包含给定元素。 |
| createTextRange | 为元素创建一个 TextRange 对象。 |
| detachEvent | 从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。 |
| dragDrop | 初始化拖曳事件。 |
| fireEvent | 触发对象的指定事件。 |
| focus | 使得元素得到焦点并执行由 onfocus 事件指定的代码。 |
| getAdjacentText | 返回邻接文本字符串。 |
| getAttribute | 获取指定标签属性的值。 |
| getAttributeNode |
获取由 attribute.name 属性引用的 attribute 对象。 |
| getBoundingClientRect | 获取指定 TextRectangle 对象集合绑定的对象。 |
| getClientRects | 获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。 |
| getExpression | 获取给定属性的表达式。 |
| hasChildNodes | 返回表明对象是否有子对象的值。 |
| insertAdjacentElement | 在指定位置插入元素。 |
| insertAdjacentHTML | 在指定位置的元素中插入给定的 HTML 文本。 |
| insertAdjacentText | 在指定位置插入给定的文本。 |
| insertBefore | 在文档层次中插入元素。 |
| mergeAttributes | 复制所有读/写标签属性到指定元素。 |
| normalize |
合并邻接 TextNode 对象以便生成一个常规的文档对象模型。 |
| releaseCapture | 释放当前文档中对象的鼠标捕捉。 |
| removeAttribute | 删除对象的给定标签属性。 |
| removeAttributeNode |
从对象中删除删除 attribute 对象。 |
| removeBehavior | 分离元素的行为。 |
| removeChild | 从元素上删除子结点。 |
| removeExpression | 从指定属性中删除表达式。 |
| removeNode | 从文档层次中删除对象。 |
| replaceAdjacentText | 替换元素的邻接文本。 |
| replaceChild | 用新的子元素替换已有的子元素。 |
| replaceNode | 用其它元素替换对象。 |
| scrollIntoView | 将对象滚动到可见范围内，将其排列到窗口顶部或底部。 |
| select | 突出显示表单元素的输入区域。 |
| setActive | 设置对象为当前对象而不将对象置为焦点。 |
| setAttribute | 设置指定标签属性的值。 |
| setAttributeNode |
设置 attribute 对象为对象的一部分。 |
| setCapture | 设置属于当前文档的对象的鼠标捕捉。 |
| setExpression | 设置指定对象的表达式。 |
| swapNode | 交换文档层次中两个对象的位置。 |