表单元素

常用浏览器前缀

    -ms-   ie前缀

    -moz-    火狐前缀

    -o-     opear  前缀

    -webkit-   谷歌，safari 前缀

 

HTML表单是通过<form>元素定义的，它由以下特性：

method:get/post请求 

action: 表单提交路径 

 input相关元素:

            type="text"  type="password"  type="hidden"  type="radio"  type="checkbox"  type="image"  type="file"  type="submit"             type="button"  type="reset" 

 

radio单选按钮组:  name 属性值 相同 ，才能成一个组。

                    <input type="radio"  id="radio1"  name="group"  value="red"/>

                    <input type="radio"  id="radio2"  name="group"  value="red"/>

                    <input type="radio"  id="radio3"  name="group"  value="red"/>

checkbox复选 框按钮组:  name  属性值相同，才能组成一个组

                    <input type="checkbox"  id="checkbox1" name="group" value="red" />

                    <input type="checkbox"  id="checkbox1" name="group" value="red" />

                    <input type="checkbox"  id="checkbox1" name="group" value="red" />

 

type="images"  唯一可以定义width height属性的表单元素，单击图片域，与单击提交按钮是一样效果，都会提交表单，区别是图像域是一个图像按钮

 

3 使用lable定义标签

 

        <label for="username">单行文本框：</label>

	<input id="username" name="username" type="text" /><br />
	<label>密码框：<input id="password" name="password" type="password" />
	</label><br />
	<input id='ok' type="submit" value="登录疯狂Java联盟" />

4 对<form>  元素进行脚本编程

  获取表单的引用   

    1    document.getElementById("form1"); 

    2   还可以通过document的form集合，并通过表单在form在集合中的位置或表单的name特性进行访问

      var form1=document.forms[0];

      var form2=document.forms["name"]

    访问表单字段

每个表单字段，不论按钮，文本框等，均包含在表单中的elements 集合中，

可以用他们的name特性，或在表单中的位置来访问元素

var first=doucment.forms.elements[0];

var second=document.forms.element["name"];

例;  聚集于一第一个字段

        document.forms.elements[0].focus();

但若第一个是隐藏元素的话，该语句就不起效果

  解决方法:

    var ele=document.forms.elements[o];

if(ele.type!="hidden"){ele.focus()}

提交方式：  document.forms[0].submit();

text 文本框:

属性：  size="10"文本框能显示字符数    maxlength="20" 最大字符数  disabled="disabled"

textarea文本框:  rows 文本框的高度，  cols  文本框的宽度   不能指定最大字符数

document.getElementById("input").disabled=true/false;

document.getElementById("input").removeAtrribute("disabled");

document.getElementById("input").getAttribute("disabled");

document.getElementById("input").setAttribute("disabled","disabled");

<SELECT>

<OPTGROUP LABEL="碱性金属">

<OPTION>锂 (Li)</OPTION>

<OPTION>纳 (Na)</OPTION>

<OPTION>钾 (K)</OPTION>

</OPTGROUP>

<OPTGROUP LABEL="卤素">

<OPTION>氟 (F)</OPTION>

<OPTION>氯 (Cl)</OPTION>

<OPTION>溴 (Br)</OPTION>

</OPTGROUP>

</SELECT>