HTML input小结

一、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	交换文档层次中两个对象的位置。