html表单博客,html表单

表单

一，表单的初步认识

说到表单,就不由自主地联想到了 web 开发的时候前端与服务器端的两种 HTTP 通讯方式。

get

post

它们的区别网上一搜一大堆，如：Get 和 Post 区别，这里就简单介绍一下了。get方式主要用于从服务端==查询和获取==资源，请求参数包含在 URL 中通过浏览器地址栏传输；post则多用于从客户端==提交==信息到服务器端，过程多用到表单 form。

form表单是 html 中非常重要的一组标签元素。透彻的理解它对于以后的开发工作非常重要！

表单分为表单元素与控件元素二部分

表单元素仅一个:

表单控件元素,根据类型不同,有多个

二，表单的深入理解前面提到在一组表单中，表单元素仅有一个

,其余的全部为其控件元素。

以下主要介绍表单元素与其一些控件元素的基本属性，以便于对其有个较为全面的认识与理解

1，表单元素

1.1 常用属性序号

属性

描述

1

action

表单提交的 URL 地址(处理表单请求的脚本)

2

method

表单提交类型:GET/POST

3

enctype

设置表单提交数据的编码方式

4

name

表单唯一名称,与 ID 同义

5

target

打开请求 URL 的方式,如果_blank

1.2 请求类型methodweb 请求方式有二种: 超链接与表单提交

超链接就是使用标签发起请求,其实就是GET请求

GET: 默认提交类型,表单数据以查询字符串形式附加到 URL 上

POST: 请求内容在请求体中

请求类型属性action的取值

序号

允许值

描述

1

GET

默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K

2

POST

表单数据放在请求体中发送,数据量更大也更安全

1.3 编码方式enctype序号

允许值

适用场景

描述

1

application/x-www-form-urlencoded

key=value

默认值,使用 URL 编码,GET/POST 均适合

2

multipart/form-data

文件上传

采用二进制流处理,会把文件域中的内容封装到请求参数中,适合大文件

3

text/plain

电子邮件

如action="mailto:URL

1.4 表单名称name序号

功能

描述

1

标识表单元素

与id一样,用来唯一标识该表单元素

2

绑定表单元素

用于表单控件元素的 form 属性,用来绑定所属表单

3

访问表单元素

快捷访问内部控件元素,如form.input.value

1.5 打开方式target序号

允许值

描述

1

_self

默认值,当前窗口打开提交的 URL

2

_blank

新窗口打开提交的 URL

3

_parent

父窗口打开提交的 URL

4

_top

顶层窗口打开提交的 URL

2，控件元素

2.1 单行文本框(对应文本域)

单选按钮

复选框

提交按钮，普通按钮，重置按钮等

2.1.1 常用属性序号

属性

描述

1

type

控件类型,如文本框, 复选框…

2

name

请求参数的名称,对应于脚本处理的变量名

3

value

请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效

4

form

控件所属表单

5

placeholder

仅限输入框text和password,输入框的提示信息

6

list

仅限输入框text和password,下拉框智能提示

7

autocomplate

仅限输入框text和password,自动完成(历史记录)

8

maxlength

仅限输入框text/password, 允许输入最大字符数量

9

checked

仅限单选框radio, 复选框checkbox(布尔属性)

10

readonly

元素只读,但通过 JavaScript 可修改(布尔属性)

11

disabled

元素禁用,(布尔属性)

12

autofocus

自动获取焦点,一个表单仅限一个控件

13

src

仅限图像域images, 图像 URL 地址

14

width

仅限图像域images, 图像宽度

15

height

仅限图像域images, 图像高度

2.1.2 type类型常用类型

序号

类型

描述

1

单行文本框 (默认值)

2

密码输入框

3

单选框

4

复选框

5

图像域/提交表单

6

文件上传域

7

隐藏域(仅以服务端可见)

html5 新增类型

序号

类型

描述

1

电子邮件

2

日期

2

日期

4

本地日期时间

5

电话号码

6

URL 地址

7

数值

8

范围拖动条

9

搜索框/移动

10

拾色器

2.1.3 常用事件属性序号

事件属性

描述

1

onfocus

获取焦点时触发

2

onblur

失去焦点时触发

3

onchange

失去焦点,且值发生变化时触发

4

oninput

值发生变化(不等失去焦点)时触发

5

onkeydown

按下键盘时触发

6

onkeyup

抬起键盘时触发

7

onclick

鼠标单击时触发

8

onselect

选择内容文本时触发

2.2 下拉列表 、下拉列表与叫下拉框, 可以理解为单选按钮与复选框的二合一。与 不同的是所要向服务端提交的‘名-值’对在两个标签元素中(select>name，option>value)，而 input 的名和值是同”一个标签元素”的不同属性

2.2.1 常用属性select 常用属性

序号

属性

描述

1

name

请求参数的名称,对应于脚本处理的变量名

2

size

初始下拉选项的个数

3

multiple

全部展开下拉选项

option 常用属性

序号

属性

描述

1

value

定义送往服务器的选项值

2

selected

设置选项的初始选中状态

2.3 文本域在 html 中，标签是用来定义一个多行的文本输入控件，在文本输入域中可以输入任意长度的文本。文本默认字体是等宽字体(Courier)，可以通过 css 来改变

在实际应用中，一般会通过 cols 属性和 rows 属性来设置 textarea 控件的尺寸大小(使用 css 的 height 和 width 属性来设置更佳)

2.3.1 常用属性序号

属性

描述

1

cols

文本区域内可见的列数(值：number)

2

rows

文本区域内可见的行数(值：number)

3

name

文本区域的名称,对应于脚本处理的变量名

4

maxlength

文本区域允许的最大字符数(值：number)

2.4 按钮 提交按钮(默认值)，用于向服务端提交数据

普通按钮，它的点击行为自定义,通常用来通过脚本来提交

重置按钮，重置按钮, 而将表单 控件的值还原到默认值,并非清空

2.4.1 常用属性序号

属性

描述

1

type

按钮的类型 submit(提交按钮)，button(普通按钮),reset(重置按钮)

2

formaction

将 form 中的action属性移动到 button 重新定义

3

formmethod

将 form 中的method属性移动到 button 重新定义

button 和 input 的比较，引用某位同学的博文：

表单中按钮控件元素实现有两个:input 和 Button，类型主要有普通按钮、提交按钮和重置按钮，Button 默认类型是提交按钮。

input 和 button 都可以实现按钮功能，type=submit 时都会被提交，type=”button” 是就是单纯的按钮，不会提交数据！只不过 button 是一个容器空间，可以容纳其他标签，input 则不可以。

可通过重置表单属性改变按钮的提交行为。如表单中实现 Get 的登录和 Post 的注册

控件元素的 form 可绑定指定 ID 的表单元素，当然 form 属性不仅 Button 和 input 有，其它大部分控件元素都有，使用前可查看文档。目前 MDN 中只介绍绑定一个表单 ID，而菜鸟教程和 W3School 介绍可以绑定多个，使用空格隔开，经测试无效。

三，演示

1，部分源码

action="regist.php"

method="POST"

class="register"

enctype="application/x-www-form-urlencoded"

>

用户:

type="text"

name="username"

id="username"

value=""

placeholder="至少输入6位"

autofocus

required

/>

电话:

type="tel"

name="tel"

id="tel"

value=""

placeholder="11位有效数字"

required

/>

邮箱:

type="email"

name="email"

id="email"

value=""

placeholder="demo@mail.com"

required

/>

密码:

type="password"

name="password"

id="password"

value=""

placeholder="8~16位有效数字，必须包含数字，字母和下划线"

required

/>

性别:

for="relady"

>男

>

>女

>

for="secret"

>保密

>

爱好:

for="photo"

>摄影

>

type="checkbox"

name="hobby[]"

id="programme"

value="programme"

/>编程

type="checkbox"

name="hobby[]"

id="travel"

value="travel"

checked

/>旅行

图片上传:

type="file"

name="user_pic"

id="user-pic"

value=""

accept=".doc,.jpg,.png"

/>