Html表单元素

Html表单元素

表单元素<form>主要用收集信息。如<input>、textare(文本域)、select(下拉列表框)。一、<input>元素定义要在表单中显示的控件类型和外观。<input>通服属性主要有：type、id、name、value、disabled、visible。

1 button(普通按钮)
<input type="button"/ id="btn" name="btn" value="普通按钮">

2 reset(重置按钮)
<input type="reset" id="rt" name="rt" value="重置按钮" />

3 submit(提交按钮)
<input type="submit" id="sb" name="sb" value="提交按钮" />

4 checkbox(重置按钮)
<input type="checkbox" id="chk1" name="chk" value="中国" checked="checked" />中国
<input type="checkbox" id="chk2" name="chk" value="美国" />美国

5 radion(单选按钮)
<input type="radio" id="rd1" name="rad" value="男" checked="checked" />男
<input type="radio" id="rd2" name="rad" value="女" />女

6 text(文本框)
<input type="text" id="tt" name="txt" value="输入内容" size="文本框大小" maxlength="允许输入的最大长度" readonly="readonly"/>

7 password(密码框)
<input type="password" id="pwd" name="pwd" value="值" size="文本框大小" maxlength="允许输入的最大长度" readonly="readonly" />

8 hidden(隐藏域)
<input type="hidden" id="hd" name="hd" value="值"/>

9 file(文件)
<input type="file" id="fl" name="file" value="呵呵" size="20" />

Input的高级用法

1.取消按钮按下时的虚线框
　　在input里添加属性值 hideFocus 或者 HideFocus=true

2.只读文本框内容
在input里添加属性值 readonly

3.防止退后清空的TEXT文档(可把style内容做做为类引用)
　　<INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput>

4.ENTER键可以让光标移到下一个输入框
　　<input onkeydown="if(event.keyCode==13)event.keyCode=9" >

5.只能为中文(有闪动)
　　<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">

6.只能为数字(有闪动)
　　<input onkeyup="value=value.replace(/[^/d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">

7.只能为数字(无闪动)
　　<input style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

8.只能输入英文和数字(有闪动)
　　<input onkeyup="value=value.replace(/[/W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">

9.屏蔽输入法
　　<input type="text" name="url" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9">

10. 只能输入 数字，小数点，减号（-） 字符(无闪动)
　　<input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

11. 只能输入两位小数，三位小数(有闪动)
　　<input maxlength=9 onkeyup="if(value.match(/^/d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(//./d*/./g,'.')" onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^/d{3}$/) || //./d{3}$/.test(value)) {event.returnValue=false}"

二、<textare>(文本域)创建与单行文本相对的多行文本输入框。<textarea id="are" name="are" cols="10" rows="10" disabled="disabled" readonly="readonly" visible="true" ></textarea>

三、select(下拉列表框)用于显示可供用户选择的下拉列表。
<select id="sl" name="sl" multiple="multiple" visible="true" disabled="disabled" size="2">
<option id="op1" value="美国" selected="selected">美国</option>
<option id="op2" value="中国">中国</option>
<option id="op3" value="日本">日本</option>
<option id="op4" value="法国">法国</option>
</select>
属性：
Multiple：允许多选
size:在有多种选项可供用户查看地时,size确定列表中可同时看到的行数。如下图size=3时的效果：



Selected:设置某选项是否被选中。

JavaScript关于select的主要属性有:
1 value:下拉列列框中,被选中的选项的值.
2 text:位于<option></option>标签中间的文本.
3 options:所有选项组成的一个数组.访问方式:options[0]..options[n-1]
4 selectedIndex:返回被选择的选项的索引号.从0开始.到n-1;
5 length:返回下拉列表中选项的个数.

主要方法:
1 构造方法: var the_option= new Option(text_value,text_value);
2 添加一项: select_obj.add(the_option);
3 删除一项: select_obj.remove(the_option);