html5表单组件,10 HTML5表单各种组件

H5表单组件

H5的表单组件分为：文字组件，列表组件，选择组件，按钮组件

1 - 输入组件

输入组件的作用是让用户输入数据，输入组件包括，text，textarea, paaword

H5新增的有date,number,color,range等input组件，要配合JS使用。

文本框text 语法：

type:文本框的输入方式是text，上线255个字符

name:相当于文本框的标识

value:文本框的默认值，相当于客户端所说的placeholder

size:文本框的长度，默认为20

maxlength:限制文本框的字数

autofocus:在网页加载后，自动获得焦点

多行文本框textarea 语法： name: 文本框的名称 cols: 文本框的宽度 rows: 文本框的行数 wrap:设置文本框内的文字是否换行，设置有hard和soft。hard是在超过cols宽度自动换行，soft不会，没有设置wrap这个属性，默认不换行

密码域 语法：

日期域 语法：

数字域 语法：

范围域 语法：

颜色域 语法：

搜索域

练习截图(日期那个只能显示在chore浏览器上，Safari和火狐都不会显示)

参考代码

我的博客首页

asah

学习H5学习H5学习H5学习H5学习H5

2 列表组件

列表组件包括select组件与datalist组件

select组件 语法：iOSSwiftJava

datalist组件 语法：

练习截图(在Safari中无效果，下面是在火狐中的截图)

参考代码

我的博客首页

iOS

Swift

Java

3 - 选择组件

选择组件分为单选按钮(radio)和复选按钮(checkbox)

单选按钮(radio) 语法:

多选按钮(checkbox) 语法:

练习效果

参考代码

我的博客首页

请选择支付方式

微信支付

支付宝支付

请选择你的爱好(可多选)

旅游

看书

听歌

看电影

4 - 按钮组件

按钮组件可分为：提交按钮(submit),重置按钮(reset),普通按钮(button)

提交按钮 语法：

重置按钮

语法：

按钮 语法：

5 - 表单分组

语法:

设置分组标题:

效果截图

参考代码

我的博客首页

博客分享

分享博客，沟通你我