大纲

1、认识表单
2、认识表单元素
3、表单元素的分类
4、表单元素——文本框
5、表单元素button
6、表单元素——单选、多选
7、表单元素——select
8、表单元素——textarea
9、推荐

1、认识表单

1、在一个页面上可以有多个form表单，但是向web服务器提交表单的时候，一次只可以提交一个表单。

2、要声明一个表单，只需要使用form标记来标明表单的开始和结束，若需要向服务器提交数据，
则在form标签中需要设置action属性（用来设置提交表单的位置）、method属性（用来定义浏览
器将表单中的信息提交给服务器端程序的处理方式）、target属性（用来指定服务器返回结果
所显示的目标窗口或目标框架）；但是，对于客户端脚本编程来说，并不需要这些属性来帮助
提交表单信息，form标签存在的意义是在于方便在脚本中编程的时候进行引用。

3、表单的引用可以利用form标签的name属性或者也可以利用document的forms[]数组中调用到
对应的数组。

4、可以利用form表单的elements[]数组来遍历除了<input type=image >元素之外的所有元素。

5、form表单的submit()方法用于将表单提交给服务，但我们点击submit按钮的时候，
submit按钮会相应的调用onsubmit事件处理器从而调用Form对象的submit事件。

6、如何在浏览器中使用页面中的信息，我们称之为“客户端脚本编程”，而如何把信息提交给
Web服务，并将数据库保存在数据库中，我们通常称为“服务器端脚本编程”。

7、在早期，所有可交互的HTML元素都应该放在HTML表单中，但是现在的定义是，需要提交到
web服务器的数据，才必须要放在表单内，可是前一种理解的方式也不是完全错误的，因为一般
可以交互的HTML元素，都是表单元素（在前期），即：浏览器需要处理的数据都是表单元素，
因此需要将其放在HTML表单中。

2、认识表单元素

1、大部分的表单控件元素都是由<input>标记创建的，<input>标记具有一个type属性，该属性
决定了<input>标记所创建的表单控件的类型。

2、所有的单控件对象都具有一个name属性，JavaScript脚本通过name属性的值来引用特定的
表单控件元素，同时这也是表单提交到服务器时，每个表单控件元素的值value所对应的key值。

3、绝大部分对象都具有value属性，该属性返回当前表单控件的值。

4、所有的表单控件对象都具有一个form属性，该属性返回包含当前控件的Form对象。对于
一个通用的表单数据检查程序来说，用这个属性来标明哪些控件属于哪个表单。

5、所有的表单元素对象都具有focus()和blur()方法，同时所有的表单元素对象还具有onfocus
和onblur事件处理器。

3、表单元素的分类

常见的表单控件有：
1、Text Input Elements:  
<input type="text"> 、<input type="password">、<textarea></textarea>

2、Tick Box Elements:
 <input type="checkbox"> 、<input type="radio">

3、Select Elements:
<select size=1><option></option></select>、
<select size=5 multiple><option></option></select>（下拉大框、多选）

4、Button:
<input type="button">、<input type="submit">、<input type="reset">

4、表单元素——文本框

1、<input type="text">通过对input表单元素的type设置text来让浏览器创建Text表单元素
对象。

2、Text对象的value属性表示的就是文本框中的值。

3、文本框的input标记还具有size属性（用于决定文本框具有多少个字符的宽度）、
maxlength属性(用于决定用户可以在文本框中输入多少个字符)。

4、Text对象还具有select()方法，用以选择或加亮文本框中的文本，当用户在文本框中输入了
无效值的时候，我们可以通过focus()方法将输入焦点设置回该文本框，并且使用select()方法
选中文本框中的文本，并且光标落在文本框的右边。

5、Text对象的value获取到的都是字符串类型的值，哪怕输入的是纯数字也会转换成字符串，
但是如果对该value的操作足够明显的说明其是数值类型数据，那么后台会将其自动转换（如
减法），但是若无法足够明显的说明，那么仍旧是作为字符串数据类型使用（如加法，字符串也
有加法的方法），所以若是要将其作为数值数据类型使用，最好都将其首先显示的转换数据类型
而不是依靠JavaScript隐式的转换。

6、Text对象具有多个事件处理器：
    onfocus事件处理器（获得焦点）、
    onblur事件处理器（失去焦点）、
    onselect事件处理器（选中）、
    onchange事件处理器（当且仅当文本框失去焦点时的值与获得焦点的值不同是）、
    onkeydown事件处理器（键盘按下）、
    onkeypress事件处理器（按了一个键）、
    onkeyup事件处理器（键盘抬起）

7、不同浏览器对blur事件的解析不同。

8、<input type="password" name=myPassword>密码框，使用密码框的唯一目的是当用户在
页面上输入密码的时候，隐藏用户输入的密码字符串以防止偷窥，但是密码框仅仅是使用星号或
其他符号代替显示，并没有对密码进行加密，当表单提交的时候，仍是以明文发送的，因此，使
用密码框来传递重要信息并不是一个安全的方法

9、<input type="hidden" name=myHidden>隐藏域,隐藏域可以像文本框一样用来输入
字符串或数字，不同之处在于隐藏域对于用户来说是不可见的。隐藏域对于用户来说是为了避免
过于冗余的表单元素出现在页面，因此将一些需要提交的但已经填写验证过的表单元素输入此中
并隐藏，等到最后提交的时候统一提交。

5、表单元素button

1、button元素的创建是<input type="button">,通过声明type来定义input元素，从而浏览
器将为button元素创建一个对应的Button对象。

2、Button对象包含value属性，通过value属性来显示按钮上的文本。

3、Button对象包含onclick事件处理器、onmouseup事件、nomousedown事件。

4、submit按钮具有特定的用途，并且不需要依靠脚本来实现，当submit按钮被单击时，按钮所
在表单中的数据将自动提交到服务器，并不需要编写任何脚本。

5、reset按钮被单击时，按钮所在的表单中的所有元素都将被清空，或者被设置为元素的默认值
（即页面第一次加载时元素所具有的值）

6、表单元素——单选、多选

1、单选按钮type="radio"、复选框type="checkbox"通过设置type属性来创建对应的表单元
素对象。

2、通过在input标签中添加关键字checked来设置默认选项，注意，radio单选按钮只有一个能
被选中，若设置多个checked，只会实现最后一个。

3、Checkbox对象和Radio对象的value属性是在HTML中预定义的或者是用JavaScript定义的，
该value属性不表示用户与复选框或单选按钮交互的任何信息，无论复选框或单选按钮是否被选
中，该value属性的值是不变的，另外，当向服务器提交表单时，仅仅是被选中的复选框或者单
选框的按钮被提交到服务器，未选中的是不会被提交的。

7、表单元素——select

1、创建:通过这样的方式来创建select下拉列表框对象。
<select>
    <option><option>
    <option><option>
    ...
<select>

2、Select对象具有size（想要展示的选择条数），multiple（是否多选）。
<!--
    若要显示只有一条显示的单选：
-->
<select>
    <option></option>
    <option></option>
    <option></option>
</select>
<!--
    若要显示只有两条显示的单选：
-->
<select size=2>
    <option></option>
    <option></option>
    <option></option>
</select>
<!--
    若要显示只有两条显示的多选：
-->
<select size=2 multiple>
    <option></option>
    <option></option>
    <option></option>
</select>

3、Select对象具有数组属性options[]，该数组的元素是Option对象。

4、Option对象具有index属性（Option在当前options[]数组中的索引）、text属性（返回当
前项在列表框中显示的文本标题）、value属性（返回当前项所定义的值）。

5、要在列表框中添加新的列表项，那么需要new一个新的Option对象，然后再把该对象插入到
options[]数组中一个空的options[]数组元素，当在某个已经存在了选项的索引位置插入一个
新的选项事，注意该索引位置上原来的选项将会被覆盖掉。要在列表框中移除某个列表项，那就
是把options[]数组中该选项所对应的数组元素设置为null,当移除一个Option对象时，
options[]数组将重新排序，每一个排在被移除选项之后的Option对象的索引将自动减1.

6、在IE浏览器中添加新的列表项有自己的add()、remove()方法来添加和引出下拉选项。

7、下拉列表框具有onblur事件处理器、onfocus事件处理器、onchange事件处理器。

8、表单元素——textarea

1、<textarea></textarea>textarea元素允许用户输入多行文本。

2、textarea对象拥有cols属性（定义文本区域宽度，单位是单个字符的宽度）、rows属性
（定义文本区域高度，单位是单个字符的行高）。

3、textarea对象还具有一个wrap属性，默认值是soft（自动软回车换行），hard属性（自动
硬回车换行，该行为会将其换行地方同数据一起上传），off（关闭换行）。

4、textarea标签不包含value属性，但是Textarea对象具有value属性，其的值是包含在
textarea标签中的内容。

9、推荐

在这里我仅仅是阐述了我自己对表单知识的一些认知和理解，也许还不够全面和具体，但是还是希望能够帮助到读者，并且这里我推荐两篇我写的同样的关于表单的知识，一篇是我遇到的表单的问题Html表单中遇到的问题，还有一篇是我使用表单的实例应用Html表单使用实例，同样希望能对读者有所帮助。