【响应式Web设计】读书笔记 - HTML5 表单(一) - 12

【简介】HTML5 表单元素、HTML5 的新输入类型

1. HTML5 表单元素

1.1 placeholder 占位符

在 input 元素上加入 placeholder 属性,其属性值就会默认显示为占位符文本,输入框获取焦点时该文本会自动消失。

<input tupe="text" placeholder="请输入">

可以使用 :placeholder-shown 伪类选择器来为 placeholder 属性添加样式。

input:placeholder-shown {
    color: #333;
}
1.2 required 必填字段

添加了 required 属性后,该字段变为必填字段,如果表单提交的时候,该必填字段没有任何信息,浏览器会给出警示信息。

<input tupe="text" placeholder="请输入" required >
1.3 autofocus 自动聚焦

autofocus 属性可以让表单在加载完成时即有一个表单域被默认选中。

<input tupe="text" placeholder="请输入" required autofocus >
1.4 autocomplete 自动补全

autocomplete 会使用浏览器默认提供的自动补全功能来辅助用户输入。默认是开启的,也可以设置关闭。

<input tupe="text" placeholder="请输入" required autofocus autocomplete="off" >

2. HTML5 的新输入类型

2.1 email 电子邮箱类型

用户需要输入符合电子邮箱地址的内容。

<input tupe="email" placeholder="abc@abc" required >
2.2 number 数字类型

用户需要输入数字类型。同时还提供了控制按钮(spinner controls),允许用户简单地点击向上和向下来改变数值。

<input tupe="number" max="10" min="1" >
2.3 url 网址类型

用于输入 URL 地址。

<input tupe="url" >
2.4 日期和时间类型
<input type="date" name="date">
<input type="week" name="week">
<input type="month" name="month">
<input type="time" name="time">
2.5 范围值

range 输入类型会生成一个滑动条。

<input type="range" min="1" max="10" value="5" name="range">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值