c html页面提交表单,HTML 关于form表单的简单使用

本文介绍关于form表单的一些使用方法

网站是如何与用户进行交互的？使用HTML表单。表单用于搜集不同类型的用户输入。

表单元素

元素定义HTML表单：

--form elements--

HTML表单包含表单元素

元素中可以包含：, , , , , , , , , , , , , 等表单元素。

元素

元素是最重要的表单元素。

元素需要定义type，name，value或者checked，其中，每个输入字段必须设置一个name属性，checked属性用于设置按钮的预选项。

type属性：规定input元素的类型，可设置值如下：

输入类型：text

定义用于文本输入的单行输入字段。

姓名：

班级：

注：文本字段的默认宽度是 20 个字符。

输入类型：password

定义密码字段。

用户名：

密码：

输入类型：radio

定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

男

女

输入类型：submit

定义用于向表单处理程序(form-handler)提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序是在表单的 action 属性中指定：

姓名：

班级：

输入类型：checkbox

定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

我喜欢的运动

篮球

跑步 //默认选中

输入类型：button

定义按钮。

输入类型：number

用于应该包含数字值的输入字段。

//数量(1 到 5 之间)

注释：IE9 及早期版本不支持 type="number"。

输入类型：date

用于应该包含日期的输入字段。

根据浏览器支持，日期选择器会出现输入字段中。

生日：

注释：IE11及更早期版本不支持 type="date".

添加输入限制的代码

1980-01-01以前

2000-01-01以后

输入类型：color

用于包含颜色的输入字段。

根据浏览器支持，颜色选择器会出现输入字段中。

选择你最喜欢的颜色:

输入类型：range

用于包含一定范围内的值的输入字段。

根据浏览器支持，输入字段能够显示为滑块的控件。

音量:

注释：IE9 及早期版本不支持 type="range"。

输入类型：email

用于应该包含电子邮件地址的输入字段。

根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

某些只能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。

E-mail:

注释：IE9 及早期版本不支持 type="email"。

输入类型：search

用于搜索字段。

搜索谷歌：

输入类型：tel

用于应该包含电话号码的输入字段。

目前只有 Safari 8支持 tel 类型。

Telephone:

注释：Safari 8 及更新版本支持 type="tel"

输入类型：url

用于应该包含URL地址的输入字段。

根据浏览器支持，在提交时能够自动验证URL字段。

某些智能手机识别URL类型，并向键盘添加 ".com" 以匹配URL输入。

请添加您的首页：

注释：IE9 及其更早版本不支持 type="url"。

其他属性：

name：定义input元素的名称。

value：规定字段的初始值。

readonly：规定输入字段只读。

disabled：规定输入字段是禁用的，被禁用的元素是不可用不可点击不可提交。

size：规定输入字段的尺寸，如果size="5"，那么一行中可输入无数个字符但一行中只有5个可见字符。

maxlength：规定输入字段允许的最大长度，如果maxlength="5"，那么一行中最多可输入5个字符。

placeholder：规定帮助用户填写输入字段的提示(样本值或有关格式的简短描述)，该提示会在用户输入值之前显示在输入字段中。

list：引用包含输入字段的与定义选项的datalist。

src：定义以提交按钮形式显示的图像的URL。

step：规定input元素的合法数字间隔，如果step="3"，则合法数字应该是-3、0、3、6等。只能是3的整倍数。可与max以及min属性一同使用，来创建合法值的范围。

元素(下拉列表)

元素定义下拉列表，元素定义下拉列表的选项，列表通常会把首个选项显示为被选选项，但可以通过selected定义预定义选项。

Apple

Banana

Orange //默认选中

元素定义待选择的选项。

列表通常会把首个选项显示为被选选项，通过添加 selected 属性来定义预定义选项。

元素定义多行输入字段(文本域)

【rows="10" cols="30"】的意思是定义一个30个字符宽，10行高的文本区。

The car was playing in the garden.

元素

元素定义可点击的按钮，请示中为按钮规定type属性。如果在HTML表单中使用button元素，不同的浏览器会提交不同的值。IE将提交与之间的文本，而其他浏览器将提交value属性的内容。应用元素创建按钮。

点我

HTML5 表单元素

HTML5 增加了如下表单元素：

HTML5 元素

元素为元素规定预定义选项列表。

为预定义选项列表，起到提示作用。用户会在他们输入数据时看到预定义选项的下拉列表。

元素的list属性必须引用元素的id属性。

常用属性

action 属性制订了某个服务器脚本来处理被提交的表单，如果省略action属性，则action会被设置为当前页面。

method 属性规定了提交表单的http方法，默认GET，GET最适合少量数据且不需要保密的提交，使用GET时表单数据在页面地址栏中是可见的。设置为POST，安全性更加，因为在页面地址栏中被提交的数据不可见。

target 属性值是一个名字或关键字，规定在哪里打开新页面，默认_self，一般设置为_blank。

_self：在当前HTML4或HTML5文档页面重新加载返回值(默认值)。注：如果这个文档在一个frame中，self是在当前frame(document)中重新加载的，而不是整个页面(window)。

_blank：以新的HTML4或HTML5文档窗口加载返回值。

_parent：在父级的frame中以HTML4或HTML5文档形式加载返回值，如果没有父级的frame，行为和_self一致。

_top：如果是HTML4文档，清空当前文档，加载返回内容；如果是HTML5文档，在当前文档的最高级内加载返回值，如果没有父级，和_self行为一致。

iframename：返回值在指定frame中加载。

表单的作用

HTML

元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来像web服务器提交信息。

输入限制

属性

描述

disabled

规定输入字段应该被禁用

max

规定输入字段的最大值

maxlength

规定输入字段的最大字符

min

规定输入字段的最小值

pattern

规定通过其检查输入值的正则表达式

readonly

规定输入字段为只读(无法修改)

required

规定输入字段是必须的(必须填写)

size

规定输入字段的宽度(以字符计)

step

规定输入字段的合法数字间隔

value

规定输入字段的默认值

注：属性制订了某个服务器脚本来处理被提交的表单，如果省略action属性，则action会被设置为当前页面。