html语言表单功能,html 标记语言表单Form表单元素介绍 | IT工程师的生活足迹

在WEB 上通过组合表单控件来创建表单，如文本框、复选框、选择框和单选按钮等。

一、表单元素

表单三要素：form、input 和 submit。

1、form 表单元素至少附带的两个特性:action 和method。

2、fieldset 元素在表单控件组周围创建边框，以表明这些表单控件是相关的。

3、legend 元素允许用户为fieldset元素指定一个主标题，该主标题作为表单控件组的名称。

二、表单特性

1、action 特性指示提交表单时将如何处理数据。

2、method 特性使用post或者get方式将数据提交到服务器。

3、label 特性指定与该标签相关联的表单控件。

4、onsubmit 特性当用户点击提交按钮时，会触发此特性指定的事件。

5、onreset 特性当用户点击此按钮时，会清空表单中所有内容。

三、十一种收集用户信息的控件

3.1、text 文本输入控件

3.2、password 密码输入控件

3.3、textarea 多行文本输入控件

Input your content.

3.4、submit 提交按钮

3.5、button 普通按钮

3.6、reset 重置表单控件按钮

3.7、checkbox 复选框

您喜欢的水果？

苹果

桃子

3.8、radio 单选按钮

性别：

男

女

3.9、select 选择框(下拉框)

选择日期：

周一

周二

周三

周四

3.10、file 文件选择框

3.11、hidden 隐藏控件

四、HTML 5 对表单的增强

在 HTML 4 中，提供了一些简单的表单元素应对基本输入。对于特定类型的输入，比如日期时间的输入，交互体验无法满足需求。因此，为了得到更好的效果，只能使用 javascript 编写组件实现。在 HTML 5 中得到了完善，增加了新的表单元素来提供更多的输入类型。

4.1、Input 的 Type 属性扩充

search – 呈现一个搜索框。

tel – 输入电话号码，可以采用 pattern 和 maxlength 来限定输入合适

url – 输入 URL 地址。

email – 输入电子邮箱地址。

date – 输入日期。

color – 输入颜色。

number – 输入数字。

range – 滑块输入

Input 还提供了一些其他的输入类型，如datetime、month、week等。

4.2、Input 通过属性进行表单验证

required – 标记当前元素为必填。

pattern – 采用正则表达式验证表单输入。

4.3、Input 元素的其他有用属性

autofocus – 当页面加载时，自动聚焦到当前的 input 元素。

form – 将 input 元素和特定的 Form 表单关联。

placeholder – 输入占位符，提示用户输入。

4.4、HTML 5 新元素 和 特殊属性 contenteditable

a、progress – 元素表示进度条

b、meter – 元素表示标尺

最大值 max 默认为 1。

3/10

60%

c、contenteditable 元素可编辑

HTML 5 特殊属性 contenteditable，通过该属性，可以让一个普通元素可编辑。

这里的内容式可编辑的

HTML 5 提供的新特性，使得开发者能够在 HTML 层处理各种类型的输入、验证、自动聚焦等功能。但各浏览器对一些展示有不同的实现；如果要统一风格，依旧需要采用传统的方式。