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);