XHTML、CSS与javascript入门经典_第五章表单

来源：互联网发布：纽约大学商学院知乎编辑：程序博客网时间：2024/06/04 17:57

用文本框、单选按钮、选择框以及提交按钮创建<form>表单，及结构化表单内容

5.1表单简介

5.2使用<form>元素创建表单

<form>不能相互嵌套

5.2.1action特性

5.2.2method特性

5.2.3id特性

可以用frm作为表单id的起始字符，eg：frmLogin

5.2.4name特性（弃用）

5.2.5onsubmit特性

5.2.6onreset特性

清空表单中所有内容

5.2.7enctype特性

指定浏览器数据编码的方式，有两种

1.application/x-www-form-urlencoded（默认）：大多数表单使用的方式，一些字符（空格、加号和其他一些非字母字符会被其他字符替换）

2.multipart/form-data：允许数据以多个部分的方式进行发送，每个连续的部分对应一个表单控件，发送顺序按他们在表单中出现的顺序，通常用于上传照片

5.2.8accept-charset特性

指定服务器能够处理的编码，以空格或者逗号隔开字符列表，eg：accept-charset="utf-8"

5.2.9accept特性

浏览器暂未支持

5.2.10target特性

指定在哪个表单或者框架中显示表单结果

5.2.11空白格<form>元素

浏览器遇到<form>元素时，周围会产生部分空白，使用CSS无法解决，只能细心设置布局方式

5.3表单控件

主要介绍输入框、按钮、单选框和复选框、下拉框、文本选择框和隐藏控件

5.3.1文本输入

单行文本输入框控件（文本框）：由<input>创建

密码输入控件：由<input>创建

多行文本输入控件：由<textarea>创建

创建文本id时，建议用txt开头

1.文本框：

type：type值为text，指定输入控件的类型

name：发送给服务器的“名称/值”中的名称部分

value："名称/值"中的值部分，一般初始设置为提示语

size：设置文本框的宽度

maxlength：文本框能够输入的最大字符数

还支持disabled、readonly、tabindex、accesskey

2.密码输入控件：

以星号或原点显示，但是仍然作为纯文本通过Internet发送

3.多行文本输入控件：

<textarea>元素中的内容，被视为在一个<pre>中编写，会保留源文档的格式

name：“名称/值”中的名称

rows：指定<textarea>的行数

cols：指定<textarea>的列数，即宽度

支持disabled、readonly、tabindex、accesskey特性

warp（不是XHTML的部分）：off（默认）：超出文本宽度，添加滚动条

virtual：超出文本宽度时换行显示，但是发送给服务器时，仍是一行，除非输入时自己按下Enter

physical：超出文本宽度是换行显示，服务器接收也是这样

5.3.2按钮

创建按钮id时，建议用btn开头

1.使用<imput>方式创建按钮

type取值：submit、reset、button

2.为按钮添加图像

讲type特性值设置为“image”,然后用src指定图像来源

3.使用<button>元素创建按钮

5.3.3复选框

创建复选框id时，建议用chk开头

复选框可以单独出现，每个复选框有自己的name

复选框可以分组出现，每个组共用一个name

复选框特性：type="checkbox"、name、value、checked、disabled、readonly、tabindex、accesskey

5.3.4单选按钮

创建单选按钮id时，建议用rad开头

当存在一组共享名称的单选按钮时，用户只能选择其中的一个按钮

单选按钮特性type="radio"、name、value、checked、size（IE8不支持）

5.3.5选择框

创建选择框时，建议用sel开头

eg：

</select>

1.<select>元素

<select>元素是下拉列表框的包含元素，特性：

name特性：控件名称

size特性：可用于表示滚动列表框，它的值是列表中可见的行数

multiple特性：允许用户从下拉框中选择多项，若没有，就只能选择一项，使用这个特性会改变下拉框的外观

2.<option>元素

<option>元素具有：

value特性：选中该项，它的值，就发送给服务器

selected特性：设置默认选中项，可以有多个，即使<select>元素中不存在multiple特性

label：为选项设置标签的一种替代方式（通过特性，而不是元素内容为选项指定一个标签），常与<optgroup>元素搭配使用

3.创建滚动选择框

使用<select>元素，使用size特性

4.利用multiple选择多个选项

允许用于选择多个选项，multiple特性的值必须是multiple。如使用该特性，最好告之用户：通过按下“Ctrl+单击”可多选

5.使用<optgroup>元素分组选项

如果选择框的选项非常多，可以使用<optgroup>元素将他们进行分组，<optgroup>可以附带<lable>元素，eg：

</optgroup>

</optgroup>

</select>

对元素进行分组的另外一种方式是使用disable特性（可以阻止用户选择该项）的<option>元素，eg：

</select>

6.选择框的特性

5.3.6文本选择框

如果允许用户上传文件，就需要用到文本选择框也称作文件选择框，使用<input>将type设置为file

有<input>的name、value、accept及tabindex、accesskey、disabled、readonly特性

5.3.7隐藏控件

5.3.8对象控件

5.4为控件创建标签与<label>元素

<label>元素的for特性：用于指定与该标签相关联的表单控件，for特性的值必须对应表单控件的id特性的值。

for特性省略的话，就叫隐身标签，这样无法控制标签相对于表单控件的显示位置

5.5使用<fieldset>元素和<legend>元素结构化表单

<fieldset>：表单控件周围创建边框

<legend>：为<fieldset>指定一个主题，使用<legend>时，必须是<fieldset>的第一个子元素

5.6焦点

5.6.1焦点移动顺序

通过tabindex（1~32767）控制，可以附带这个特性的元素：

5.6.2访问键

通过accesskey特性控制

5.7禁用的和只读的控件

disabled：禁用表单控件，从而不能改变该控件，不会将“名称/值”发送给服务器

readonly：阻止用户改变控件本身的值，其“名称/值”发送给服务器

5.8向服务器发送表单数据

5.8.1HTTP get方法

优点：可以将其作为书签

缺点：不适合发送敏感数据，上传的东西不是文件不能用这种方法，只能发送ASCII字符

5.8.2HTTP post方法

表单数据被包含在HTTP头中透明（以纯文本形式）发送给服务器，也无法保证安全性

5.9本章小结

本章主要介绍了表单控件，5.3是核心

XHTML、CSS与javascript入门经典_第五章 表单

XHTML、CSS与javascript入门经典_第五章表单