、表单标签Form

1. 什么是表单

表单在网页中负责数据采集功能的。表单是有3部分组成：

（1）表单标签 <form></form>

（2）表单域

（3）表单按钮

2. Form标签、

语法格式：

<form action=”url” method=”get|post”>

</form>

件

一、什么是事件？

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。页面载入完成时，会触发一个事件。用户点击按钮时，点击也是一个事件。

二、怎样将事情处理程序绑定到特定的事件中？

方法1. 使用HTML标记创建事件处理程序;

例：给图片添加点击事件

<img src="01.jpg"onclick="alert(this.src);"/>

方法2：使用对象的事件属性创建事件处理程序

语法：object.onEventName = eventHandler;

例1：给document对象添加点击事件

function sayHello(){

alert(‘hello’);

}

document.onclick = sayHello;

例2：给所有的图片都添加一个单击事件，用于在新窗口中打开图片

function new_pic_window(){

window.open(this.src);

}

var img_obj = document.getElementByTagName(‘img’);

for(var i = 0; i < img_obj.length; i++){

img_obj[i].onclick = new_pic_window;

}

表单对象

一、表单

表单(Form)是Web页面中最常用的元素之一，它通常由一个或多个表单域组成，这些表单域接收用户的输入，并通过表单的提交功能将数据传递到服务器端，由服务器端对这些数据进入处理。

在Javascript中可以很方便的操作表单，例如获取表单域的数据进行有效验证、自动给表单域赋值、处理表单域的事件等。些时每对<form>...</form>标记被解析为一个对象，即form对象，可以通过document.forms集合来引用这些对象，例如一个名为"form1"的表单可以用如下语句获得：var myform = document.forms["form1"];不仅如此，还可以通过表单在文档中的索引来引用表单对象，

例如：

下面代码表示引用文档中的第一个表单对象。

var myform = document.forms[0];

二、引用表单域

表单域是指用于接收用户输入或操作的一些页面元素，例如文本框、按钮、复选框等。它们通常包含在一个表单中，要在Javascript中引用一个表单元素，可以采用以下两种方法：

var element = theForm.elements[index];

var element = theForm.elements["elementName"];

在第一种方法中，index表示表单域的索引，第一个出现的索引为0,依次递增;

第二种方法中，elementName表示表单域name属性所指定的表单域名称;

有时需要指定遍历某种类型的表单域，可以使用表单域的type属性来获取表单域类型，例如要处理所有的复选框，可以使用如下语句

for(var i=0; i < theForm.elements.length; i++){

if("checkbox" == theForm.elememts[i].type){

//处理程序

}

}

三、表单域的通用属性

1. disabled

有时希望表单域不能接收用户操作，如有些文本框要设定为只读; 当所有的表单域输入完成之前，设定提交按钮为灰的，不可单击等。这些都可以通过表单域的disable属性来实现：

例：element.disabled = true;

2. 使用name属性获取或者设置表单域的名称

3. 使用form属性获取该表单域所属的表单

4. 使用value属性来获取和设置表单域的值

四、表单域的通用方法

1. 使用focus() 方法让表单域获得焦点

2. 使用 blur()方法让表单域失去焦点

五、表单域的通用事件

事件是处理用户操作的一项重要机制，在Javascript中，表单域提供了丰富的事件以方便程序捕获用户行为。

1. 使用onfocus事件和onblur事件，该事件在表单获得焦点和失去焦点时触发。

2.使用 onclick、onkeydown、onkeyup、onkeypress 事件，这4个事件分别对应于鼠标和键盘的几个操作。click事件表示鼠标单击该表单域;

3. 使用 onmouseover、onmouseout、onmousedown、onmouseup事件，这些事件对应于鼠标的不同动作

4.使用onchange事件捕获表单域值的变化

每个表单域都有一定的值，在这些值发生变化的时候会触发onchange事件，例如：文本域文本的变化，复选框从选中变为未选中，下拉列表框选项发生变化。

六、表单验证

在Javascript诞生之前，所有的验证工作都在服务器端完成，这需要将数据发送到服务器，增加了用户等待时间，用户体验差。使用Javascript在浏览器端进行验证则可以较好的解决这些问题。

表单验证一般发生于用户单击提交按钮、数据被提交到服务器之前，这时如果用户输入的数据不全或无效，则取消提交，同时提示用户重新输入。例如函数validate()是用于检验表单的用效性，返回值为true或者false。在程序中有两种方式来调用validate();

方法1：<input type="submit" onclick="return validate();" />

方法2：<form action="" onsubmit="return validate();" />

第一种方法中，将validate()绑定到提交按钮的单击事件，如果返回false,则按钮会终击单击的效果，即表单不会提交。

第二种方法中，将validate()绑定到表单的提交事件，它发生在提交之前，如果返回false，则表单不会提交。

注意：尽管Javascript几乎可以完成所有的数据验证上，但这终究是一种客户端技术，技术成熟的黑客可以很容易绕过这些验证而将非法的数据直接提交到服务器，给服务器带来威胁。所以在服务器端重复验证是非常有必要的。但Javascript验证以快速提示用户可能的错误，给用户带来良好体验，这也是采用客户端验证的重要原因。

天小编带大家学习一下HTML中非常重要的标签<form>标签，也就是表单标签，<form>标签在HTML中即必不可少，几乎每个页面有至少一个<form>标签，话不多说，直接进入今天的主题；

什么是表单标签？就是指能够和用户进行交互的控件，简单的来说就是你要输入或许选择的地方，那这个地方就是表单拉，后台会获取你输入的内容或者选择的内容进行相应的操作。

常用的表单标签有3类：input标签、select标签、textare标签、以及其他标签；以下是各个标签的详解：

首先，input标签，它是非封闭型标签，简单的写法就是<input /> 小编提醒大家，这里的/ 千万不能丢了，input标签页需要它自有属性来实现的、type属性、value属性、name属性、id属性；其中type属性是指这个表单标签的类型，比如说文本框、单选，多选（也可称为：复选）,按钮等；

！！！注意 如果type不写，那么默认是文本框类型；

类型也分为：text、pass、radio、checkbox、submit、file、hidden(后面2类不常用)

1.text类型：语法规范：<input type="text">;可以有name属性、id属性、value属性、还可以有maxLength属性就是规定你输入的内容最长不能超过多少个数；readongly属性就是规定这个表单只能只读，改变内容。

2.password类型：语法规范：<input type="password">。效果就是用户输入的内容会用******代替，所以小伙伴们在输入一些密码或者出现*****的时候，那么这个表单的类型就是password类型啦；这个表单的属性和上述的text属性一致

3.radio类型：语法规定：<input type="radio">,是实现单选的效果，这个表单属性有name属性、value属性、checked属性；需要特别注意的是在radio类型下，多个radio表单的name属性的值必须是完全一致，这样才能实现单选；check属性即表示选中；

4.checkbox类型：语法规范：<input type="checkbox">；这个表单属性有name属性、value属性、checked属性；

5.按钮类型：按钮类型分为：submit（提交）、reset（重置）、button（普通按钮）语法规范：<input type="submit" value="按钮上的文字">

6.file类型：语法规范： <input type="file" />；这标签就是当需要用户上传一些本地文件时用到

！！！特别注意：如果有文件上传的话，必须将表单的enctype更改为 multipart/form-data,同时method必须为post

7、隐藏域类型：语法规范：<input type="hidden" name="" value="" />

使用场合：隐藏域在页面中是看不到的，一般会配合后台开发一起使用，从来不单独使用。

其次，select标签，就是下拉框列表，简单的写法就是<select></select>，这个标签也需要相关的属性，name属性、size属性、multip属性、value属性、selected属性；

multip属性：可以设置这个下拉列表可以多选；

selected属性：表示选中；

完整的语法规范如下：

<select name="languages">

<option value="01">html</option>

<option value="02">css</option>

<option value="03">javascript</option>

</select>

再者：<textarea>标签，语法规范：<textarea> 文本内容</textarea>常用属性：name属性、cols属性、rows属性

cols属性：规定这个文本域的列数，就是这个文本域一行最多能输入几个文字；

rows属性：规定这个文本域的行数，就是这个文本域最多能输入几行文字；

完整的语法规范如下：

<textarea cols=“10” rows“20”> 文本内容</textarea> 表示这个文本域可以输入20行10列的文本；

最后：分享一下在表单中能提高用户体验的标签<label>标签；这个标签作用在于点击表单前的文本时，表单标签会主动获取焦点，而不需要点击表单的时候才获取焦点；<label>有一个非常重要的属性for属性，它是必须存在，for属性值就是你要对应的那个表单

语法规范：<label for=""某个表单的id值"></label>

在实际的编码过程中，小编强烈建议用<label>包裹表单前的文字

预告：下一篇：你所不知道的css（一）