21xrx.com
登录
  

HTML 表单

<form>标签

HTML的表单用来接收用户录入的信息.

<form>元素定义一个HTML表单:

表单元素写到HTML表单内.

表单元素有:文本框、单选框、复选框、提交按钮等等.

<input>元素

<input>元素是表单中最重要的元素.

有各种各样的<input>元素,取决于定义的type属性是什么

本章用到的属性有:

类型(type)描述
text定义普通的文本输入框
radio定义单选按钮
submit定义表单的提交按钮
    在本教程后面将学习更多关于输入框的类型.

文本输入框

<input type="text" >定义一个行内的文本输入框

例子

注意:表单本身是不可见的.记住一个文本框的默认长度是20字符的长度.

单选框按钮

< type="radio" >定义一个单选按钮

单选按钮允许用户从多个选项中选中一项:

例子

下面是解析结果:

男人
女人
其它

提交按钮

<input type="submit">定义表单的提交按钮.

表单通常用来提交数据给服务器,然后服务器脚本语言处理提交的数据.

表单的提交链接写在<form>标签的action属性里:

例子

解析结果:

姓氏:

名字:


action属性

action属性定义表单提交到服务器的链接.

常用的表单提交到服务器的方法是用提交按钮.

一般地,表单都是提交到服务器处理.

在上面的例子中,指定服务端脚本来处理提交的表单.

如果省略action属性,那么表单的action属性值会指向当前页.

method属性

method属性指定HTTP方法(GET或POST)来请求服务器:

或者:

什么时候用GET?

你可以用GET(默认请求方法):

如果表单提交是被动的(像搜索引擎查询),没有敏感信息.

当你用GET时,表单数据将会显示在地址栏里:

    GET方法最适合数据量少.浏览器对于GET方法有大小限制的.

什么时候用POST?

你应该在下面这几种情况下用:

如果表单用来上传文件,或包含敏感信息(密码).

POST提供更好的安全,因为提交的数据不会在地址栏中显示.

name属性

为了正确的提交数据,每个input域都必须有一个name属性

这个表单只会提交带有name属性的input:

例子

<fieldset>对表单元素分组.

<fieldset>把相关联的数据进行分组

<legent>元素定义<fieldset>元素的标题

例子

下面是解析结果:

私人信息: 姓氏:

名字:


HTML表单属性

HTML的<form>元素的全部可能的属性,例如:

下面都是关于<form>的属性:

属性描述
accept-charset指定表单提交用什么字符集(默认为页面所用字符集)
action指定表单提交到服务器的地址(url)(默认为当前页).
autocomplete指定浏览器是否自动填充表单历史数据(默认开启).
enctype指定表单提交数据所用的编码(默认是url编码)
method指定表单用什么方法提交(默认:GET).
name指定表单的名字用于唯一标识(DOM用法:document.forms.name)
novalidate指定浏览器不应该验证表单.
target指定表单提交后返回到哪里(默认:当前页).
    你将在下一章学习到更多关于表单属性的知识.
  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2