JavaScript对表单的操作（一）

单的HTML代码

一、获得表单的引用

A、通过直接定位的方式

1.document.getElementById("");

var aa=document.getElementById("form1");

alert(aa.name);.//myform

2.document.getElementsByName("");

var aa=document.getElementsByName("myform")[0];

alert(aa.id);//form1

3.document.getElementsByTagName("");

var aa=document.getElementsByTagName("form");

alert(aa.length);//1

B、通过集合的方式来获取引用

1.document.forms[下标]

var aa=document.forms[0];

alert(aa.length)//10

2.document.forms["name"]

var aa=document.forms["myform"];

alert(aa.id);//form1

3.document.forms.name

var aa=document.forms.myform;

alert(aa.id);//form1

C、通过name直接获取(只适用于表单)

var aa=document.myform;

alert(aa.name);//myform

二、获得表单元素的引用

A、直接获取

1.document.getElementById("")

var names=document.getElementById("names");

alert(names.name);//names

2.document.getElementsByName("");

var ag=document.getElementsByName("age")[0];

alert(ag.name);//age

3.document.getElementsByTagName("");

var oName=document.getElementsByTagName('input')[0];

alert(oName.name);//names

B、通过集合的方式来获取

1. 表单元素.elements--获得表单里面所有元素的集合

alert(document.getElementById("form1").elements.length);//10

2.表单元素.elements[下标]

alert(document.forms[0].elements[2].name);//sex

3.表单元素.elements["name"]

alert(document.myform.elements["sex"].length)//2

4.表单元素.elements.name

alert(document.myform.elements.school.name);//school

C、通过name形式

表单对象.name

alert(document.myform.age.value);//22

三、表单元素共同的属性和方法

A、获取表单元素的值

表单元素对象.value--获取或是设置值

alert(document.myform.age.value=18);//18

B、属性

disabled--获取或设置表单控件是否禁用 true false

var names=document.forms[0].elements[0].disabled=true;

var school=document.forms[0].elements[7].disabled=true;

姓名和毕业院校变成了灰色，不可选择

form--指向包含本元素的表单的引用

var age=document.forms[0].elements.age.form;

alert(age.name);//myform

C、方法

blur()--失去焦点

focus()--获得焦点

var aa=document.forms.myform.elements.names.focus();

、表单：

网页仅有表单才能接收用户输入信息、并将信息提交到服务器进行处理。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

二、制作规范的表单

一系列的表单对象

提交按钮:<input type="submit" value="提交" name="sum" />

</form>

注意：表单必须要有提交按钮,作用:当点击提交钮时，会自动将表单中的数据提交到表单action属性所指定的地址进行处理.

三、定义表单对象

1.使用input标签定义表单对象

1.1 type的类型:

text(文本框)、password(密码框)、checkbox(复选框)、radio(单选按钮)

submit(提交按钮)、reset(重置按钮)、file(文件域)、button(按钮)、

image(图片域：具备提交按钮)、hidden(隐藏域)、

date(日期控件:html5新增的)、number(数字调节器:html新增的)

2.使用select标签定义下拉列表

....

</select>

3.使用textarea定义文本域:

<textarea cols="80" rows="8">请输入内容</textarea>

四、常用表单对象的属性

1.文本框:

2.设置单选框和复选框的默认选中

checked="checked"属性

3.使用selected属性设置下拉列表的选中项

来自网络

五、css(Cascading style sheet):级联（层叠）样式表。

1.作用：修饰html标签

2.优势：

内容与表现分离；

网页的表现统一，容易修改；

丰富的样式，使得页面布局更加灵活；

减少网页的代码量，增加网页的浏览速度，节省网络带宽；

运用独立于页面的CSS，有利于网页被搜索引擎收录。

六、在html文档添加css样式的方法。

1.行内样式：使用标签的style属性添加样式

<标签 style="一系列的样式规则">

样式规则的格式:样式属性:样式属性值;

2.内部样式:使用style标签定义样式

一系的样式选择器(选择器必需先定义，后引用)

</style>

注意：通常情况style标签放在head标签中。

2.1基本选择器分类：类选择器、Id选择器、标签选择器

2.2使用类选择器

定义类选择器

.类选择器名{一系列样式}

引用类选择器:使用标签的class属性引用类选择器名称

2.3使用Id选择器

定义id选择器

#id选择器名{一系列样式规则}

引用ID选择器:使用标签的ID属性引用ID选择器名称

2.4定义标签选择器

标签名称{一系列样式规则}

引用标签选择器:当使用该标签时自动套动标签样式

3.外部样式:

外部样式是将一系列样式选择器定义在外部样式文件（**.css）中

3.1在网页使用link标签引用外部样式文件

七、样式优先级（就近原则）

行内样式>内部样式>外部样式

id选择器>类选择器>标签选择器

八、高级选择器(复合选择器)

1.层选选择器

1.1后代选择器

定义后代选择器

选择器1 选择器2{一系列样式规则}

使用：必需先用选择器1,再使用选择器2,且选择器存在层次关系

1.2子选择器

定义子选择器

选择器1>选择器2{一系列样式规则}

使用：必需先用选择器1,再使用选择器2,且选择器存在父子关系

1.3相邻兄弟选择器

定义相邻兄弟选择器

选择器1+选择器2{一系列样式规则}

使用：必需先用选择器1,再使用选择器2,且相邻的

1.4通用相邻兄弟选择器

定义通用相邻兄弟选择器

选择器1~选择器2{一系列样式规则}

使用：必需先用选择器1,再使用选择器2,且相邻之后的所有兄弟

2.交集选择器

定义交集选择器

标签选择器类选择器|id选择器

使用：使用标签的同时还引用类或者id选择器

3.并集选择器

定义并集选择器

选择器1,选择器2

使用：使用选择器1 或者选择器2 都行

九、span标签

文本标签，由内容决定自身大小。

html5 中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能，接下来我们来说1下自动验证。

在html5中，通过对元素使用属性的方法，可以实现在表单提交时履行自动验证的功能，在履行代码后，将在表单提交时自动验证输入的内容是不是为数字，如果验证通不过，将显示毛病信息文字。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            <input type="text" name="text" required pattern="^\w.*$">
            <input type="submit" value="提交">
    </form>
</body>
</html>

接下来我们来看1下在html5 中追加的关于对元素内输入内容进行限制的属性的指定。

1.required属性

html5 中新增的required属性可以利用在大多数输入元素上（除隐藏元素，图片元素按钮上）。在提交时，如果元素中内容为空白。则不允许提交，同时在阅读器中显示信息提示文字，提示用户这个元素中必须输入内容，效果如图

2.pattern属性之条件到的新增的input元素，比如email，number，URL等，要求输入内容符合1定的格式，对input元素使用pattern属性，并且将属性值设置为某个格式的正则表达式，在提交时会检查其内容是不是符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在阅读器中显示信息提示文字，提交输入的内容必须符合给定格式，代码以下，要求输入内容为1个数字与3个大写字母：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            请输入指定内容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="输入:1个数字3个大写字母">
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

3.min属性与max属性

min与max这两个属性是日期类型或数值类型的input元素的专用属性，他们限制了在input元素中输入的数值与日期的范围。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            请输入数值:<input type="number" name="point" min="0" max="100" />
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

4.step属性

step属性控制input元素中的值增加过减少时的步骤。例如当你想让用户输入的值在0与100之间，但必须是5的倍数时，你可以指定step为5，代码以下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="get">
      <input type="number" name="point" step="5" />
      <input type="submit" />
    </form>
</body>
</html>

效果以下：

原文：http://www.wfuyu.com/htmlcss/27520.html

在线咨询

上一篇：为容器的边框添加图片，CSS3新增的边框图片属性，一
下一篇：Canvas绘制扇形统计图，50行代码的统计图

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript对表单的操作（一）

您的项目需求