社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > html教程 > html表单知识大全

html表单知识大全

迷茫
发布： 2017-03-25 15:23:30
原创
2518 人浏览过

8.1 表单标记

......

☟ 表单属性：

◆ action：用于指定表单的服务端程序,规定当提交表单时，向何处发送表单数据。action取值为:第一，一个URL（绝对URL/相对URL），一般指向服务器端一个程序，程序接受到表单提交过来的数据（即表单元素值）作相应处理。比如：

当用户提交这个表单时，服务器将执行名为"reg.ashx"的一般处理程序。第二，使用mailto协议的URL地址，这样会将表单内容以电子邮件的形式发送出去。这种情况比较少见的，因为它要求访问者的计算机上安装和正确设置好了邮件发送程序。第三，空值，如果action为空或不写，表示提交给当前页面。

◆ method：该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。最常用的是get和post，默认时使用 get方法。

get 与 post 有什么区别呢？

① 数据的查询：比如浏览论坛时，URL一般包含了分类、页码数、每页记录数等信息。 get 方式，能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息，不方便进行检验查询条件。

② 敏感数据的提交(安全性)：对一项记录，进行更改、添加操作时，比如注册用户、更改用户资料等。get 方式附加在URL上，会泄露掉敏感的消息。 post 方式，能隐藏掉敏感的信息。

demo:

用get方式点击提交后：URL变为：php中文网/ashx/login.ashx?login_username=admin&login_pswd=123456

用post方式点击提交后：URL变为：php中文网/ashx/login.ashx  ☜可看到只是action指定的URL，参数并没有附加在URL后面。

③ 大数据文本传递：get 虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制。IE ：2048字符。Chrome、FF 好像是 8182字符。post 好像没此限制。 

◆ onsubmit：用于指定处理表单的脚本函数

◆ enctype：设置MIME类型，默认值为 application/x-www-form-urlencoded。需要上传文件到服务器时，应将该属性设置为 multipart/form-data

8.2 输入标记

多数表单元素都可使用 input 定义,为了标识每一个数据，我们需要给表单元素添加name属性，所以name为必设属性，name="域名称"

(1)文本框text

输入信息以明文显示

用户名: <input type="text" name="user" />
登录后复制

以下是单行文本框的主要属性:

name(名称，在脚本中可作为标识获取数据),maxlength(设置在文本框中最多可输入的字符数)，size(文本框长度，大约以字节为单位)

value：指定文本框的默认值，是在浏览器第一次显示表单或者用户单击重置按钮之后在文本框中显示的值。

readonly：只读属性，当设置readonly属性后，文本框可以获得焦点，但用户不能改变文本框中的value。

disabled：禁用，当文本框被禁用时，不能获得焦点，当然，用户也不能改变文本框的值。并且在提交表单时，浏览器不会将该文本框的值发送给服务器。

(2)密码框 password

以"*"或"●"符号回显所输入的字符，从而起到保密的作用

密码: <input type="password" name="pwd" />
登录后复制

(3)隐藏域 hidden

隐藏域不会被浏览者看到，它主要用于在不同页面传递域中所设定的值

<input type="hidden" name="hid" value="域值">
登录后复制

(4)文件域 file

文件域可以将本地文件上传到服务器端,文件上传没有默认值,利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。否则无法上传文件内容

<input type="file" name="photo">
登录后复制

(5)单选按钮 radio

在一组选项中进行单项选择，以一个圆框表示

使用方式：要实现单选功能，name值必须相等。使用name相同的一组单选按钮，不同radio设定不同的value值，这样通过取指定name的值就可以知道谁被选中了，不用单独的判断。单选按钮的元素值由value属性显式设置，表单提交时，选中项的value和name被打包发送，不显式设置value。

性别: 男:<input type="radio" name="gender" value="female" checked="checked"> <!-- checked表示此项被默认选中,单复选都适用 -->
女:<input type="radio" name="gender" value="male"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->
登录后复制

(6)复选按钮 checkbox

在一组选项中进行多项选择，以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读
登录后复制

(7)提交按钮 submit

用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理

<input type="submit" name="按钮名称" value="按钮显示文本">
登录后复制

普通按钮 button

用于激发提交表单动作，配合JavaScript脚本对表单执行处理操作

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">
登录后复制

重置按钮 reset

用于清楚表单中所输入的内容，将表单内容恢复成默认的状态

<input type="reset" name="按钮名称" value="按钮显示文本">
登录后复制

图像按钮 image

按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">
登录后复制

(8)选择列表标记