html表单应用类型,HTML表单输入类型

Input 类型文本

定义一行文本输入字段:

名字:

姓氏:

Input 类型密码

定义一个密码字段:

用户名:

密码:

在密码字段的字符被屏蔽(显示为星号或圆)。

Input 类型提交

定义将表单数据提交给表单处理程序的按钮。

表单处理程序通常是能够处理输入数据的脚本的服务器页面。

表单处理程序指定表单的action属性:

First name:

Last name:

如果忽略提交按钮的值属性,按钮将得到默认文本:

First name:

Last name:

Input 类型重置

定义重置按钮,将所有表单值重置为默认值:

First name:

Last name:

如果您更改输入值,然后单击“重置”按钮,表单数据将重置为默认值。

Input 类型单选按钮

定义一个单选按钮。

单选按钮让用户只选择一个:

其他

Input 类型多选

定义了一个复选框。

复选框让用户选择零个或多个有限的选择选项。

我有一辆直行车

我有一辆汽车

Input 类型按钮

定义一个按钮:

οnclick="alert('Hello World!')" value="点击我!">

HTML5 Input类型

HTML5 添加了几种新的输入类型:

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

旧web浏览器不支持的新输入类型将表现为 .

Input 类型数字

定义一个数字输入字段。

您还可以设置限制什么号码接受。

下面的示例显示数字输入字段,您可以在其中输入值从1到5:

数量 (1到5之间):

Input 限制

下面列出了一些常见的输入限制(有些是新的HTML5):

属性

描述

disabled

指定一个输入字段应该是 disabled

max

指定输入字段的最大值.

maxlength

指定输入字段的字符的最大数目.

min

定输入字段的最小值.

pattern

指定检查输入值的正则表达式.

readonly

指定只读输入字段(不能更改).

required

指定需要输入字段(必须填写)

size

指定输入字段的宽度(字符).

step

指定输入字段的合法编号间隔.

value

指定输入字段的默认值.

在下一章中,您将了解更多有关输入限制的知识。

下面的示例显示一个数字输入字段,在这里您可以输入值从0到100,步长为10。默认值为30:

数量:

min="0" max="100" step="10" value="30">

Input 类型日期

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

这取决于浏览器的支持,日期选择器可以显示在输入字段。

Birthday:

您还可以添加日期的限制:

输入一个 1980-01-01 之前的日期:

输入一个 2000-01-01 之后的日期:

Input 类型颜色

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

这取决于浏览器的支持,颜色选择器可以显示在输入字段。

选择一个你喜欢的颜色:

Input 类型范围

用于输入字段,该字段应包含范围内的值。

根据浏览器支持,输入字段可以显示为滑块控件。

点:

您可以使用以下属性来指定限制:最小值,最大值,步长和值。

Input 类型月份

允许用户选择一个月和一年。

这取决于浏览器的支持,日期选择器可以显示在输入字段。

你的生日 (年和月):

Input 类型星期

允许用户选择一个星期和一年。

这取决于浏览器的支持,日期选择器可以显示在输入字段。

选择一个星期:

Input 类型时间

允许用户选择时间(没有时区)。

这取决于浏览器的支持,一时间选择器可以显示在输入字段。

选择一个时间:

Input 类型本地日期时间

指定没有时区的日期和时间输入字段。

这取决于浏览器的支持,日期选择器可以显示在输入字段。

生日 (日期和时间):

Input 类型 Email

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

根据浏览器的支持,提交时可以自动验证电子邮件地址。

一些智能手机识别的电子邮件类型,并添加.com的键盘,以配合电子邮件输入。

E-mail:

Input 类似搜索

用于搜索字段(搜索字段的行为像常规文本字段)。

搜索:

Input 类型电话

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

电话型目前只在Safari 8支持。

电话:

Input 类型 Url地址

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

根据浏览器的支持,提交时可以自动验证URL字段。

一些智能手机识别的URL类型,并添加.com到键盘,以配合URL输入。

添加你的主页:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值