form&input

By admin in 4858美高梅 on 2019年4月15日
 1 <form action="http://www.baidu.com" method="post"  autocomplete="on" style="width: 300px;padding:20px 20px;">
 2         <fieldset name="basic">
 3             <legend>基本信息</legend>
 4             用户名:<input type="text" name="name" id="username" autofocus placeholder="请输入用户名" /><p>
 5             密码:<input type="password" name="password" id="password" placeholder="请输入密码"  autocomplete="off" /><p>
 6             血型:<input type="text" name="xuexing" list="xx"/><p>
 7             出生年月:<input type="date" name="birthday"/><p>
 8             邮箱:<input type="email" name="email"/><p>
 9             喜欢的颜色:<input type="color" name="color"/><p>
10             今天是第几周:<input type="week" name="week"/><p>
11             今天是第几月:<input type="month" name="month"/><p>
12             最喜欢的数字:<input type="number" name="number" max="9" min="0" step="1" /><p>
13             <input type="submit" name="ok" id="ok" value="提交">&nbsp;&nbsp;&nbsp;
14             <input type="reset" name="reset" id="reset" value="重置">
15         </fieldset>
16         <datalist id="xx">
17             <option value="A">A</option>
18             <option value="B">B</option>
19             <option value="AB">AB</option>
20             <option value="O">O</option>
21             <option value="T">特殊血型</option>
22         </datalist>
23     </form>

form&input,

 1 <form action="http://www.baidu.com" method="post"  autocomplete="on" style="width: 300px;padding:20px 20px;">
 2         <fieldset name="basic">
 3             <legend>基本信息</legend>
 4             用户名:<input type="text" name="name" id="username" autofocus placeholder="请输入用户名" /><p>
 5             密码:<input type="password" name="password" id="password" placeholder="请输入密码"  autocomplete="off" /><p>
 6             血型:<input type="text" name="xuexing" list="xx"/><p>
 7             出生年月:<input type="date" name="birthday"/><p>
 8             邮箱:<input type="email" name="email"/><p>
 9             喜欢的颜色:<input type="color" name="color"/><p>
10             今天是第几周:<input type="week" name="week"/><p>
11             今天是第几月:<input type="month" name="month"/><p>
12             最喜欢的数字:<input type="number" name="number" max="9" min="0" step="1" /><p>
13             <input type="submit" name="ok" id="ok" value="提交">&nbsp;&nbsp;&nbsp;
14             <input type="reset" name="reset" id="reset" value="重置">
15         </fieldset>
16         <datalist id="xx">
17             <option value="A">A</option>
18             <option value="B">B</option>
19             <option value="AB">AB</option>
20             <option value="O">O</option>
21             <option value="T">特殊血型</option>
22         </datalist>
23     </form>

H5中新扩大的表单属性:autofocus(得到核心)、placeholder(给出提醒音信)、list(类似下拉列表)、autocomplete(有记录的话会自动出现记录音讯)input元素:color(颜色选取器)
date(日期选拔器) time(时间选择器)
datetime-local(本地时间日期选择器) week(周) month(月)
email(E-mail输入框) url(U奥迪Q7L输入框) tel(只好输入电话号码的输入框)
range(拖动条) search(寻觅关键字的文本框) number(数值输入框)
实验了须臾间,计算机上的IE浏览器基本特殊的都不援救。火狐浏览器color date
email number都能支持。下边是职能图:

4858美高梅 1

 

1 form action =””
method =”post” autocomplete =”on” style =”width: 300px;padding:20px
20px;” 二 田野同志set name =”basic” 三 legend 基本新闻 / legen…

一、email:电子邮箱文本框,跟平时的没什么差别

HTML5 新的 Input 类型

HTML伍 具有多少个新的表单输入类型。这么些新特征提供了越来越好的输入调控和验证。
本章周密介绍那些新的输入类型:

  • form&input。color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

注意:并不是有所的主流浏览器都匡助新的input类型,可是你已经足以在颇具主流的浏览器中央银行使它们了。纵然不被扶助,依然能够来得为正规的文本域。


H5中新扩张的表单属性:autofocus(得到核心)、placeholder(给出提醒信息)、list(类似下拉列表)、autocomplete(有记录的话会自行出现记录信息)input成分:color(颜色选取器)
date(日期选拔器) time(时间接选举用器)
datetime-local(本地时间日期选择器) week(周) month(月)
email(E-mail输入框) url(UBMWX5L输入框) tel(只好输入电话号码的输入框)
range(拖动条) search(搜索关键字的文本框) number(数值输入框)
实验了刹那间,计算机上的IE浏览器基本特殊的都不协理。火狐浏览器color date
email number都能协助。下边是效率图:

当输入不是邮箱的时候,验证通然则

Input 类型: color

color 类型用在input字段重点用以选择颜色,如下所示:

实例

从十色器中选用2个颜料:

选择你喜欢的颜色: <input type="color" name="favcolor">

品味一下
»


4858美高梅 2

移步端的键盘会有变化

Input 类型: date

date 类型允许你从贰个日期采纳器选拔三个日子。

实例

概念几个时日调控器:

生日: <input type="date" name="bday">

品尝一下
»


 

二、tel:电话号码

Input 类型: datetime

4858美高梅 ,datetime 类型允许你挑选1个日期(UTC 时间)。

实例

概念一个日子和岁月调控器(本地时间):

生日 (日期和时间): <input type="datetime" name="bdaytime">

品味一下
»


3、url:网页的URL

Input 类型: datetime-local

datetime-local 类型允许你选用七个日子和岁月 (无时区).

实例

概念三个日期和时间 (无时区):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

品尝一下
»


4、search:搜索引擎

Input 类型: email

email 类型用于应该包罗 e-mail 地址的输入域。

实例

在提交表单时,会活动验证 email 域的值是还是不是合法有效:

E-mail: <input type="email" name="email">

品尝一下
»
提示: vivo 中的 Safari 浏览器支持 email
输入类型,并透过转移触摸屏键盘来合作它(增多 @ 和 .com 选项)。


伍、range:特定范围内的数值选用器

Input 类型: month

month 类型允许你挑选三个月份。

实例

定义月与年 (无时区):

生日 (月和年): <input type="month" name="bdaymonth">

品味一下
»
Input 类型: number
number 类型用于应该包涵数值的输入域。
你还是能够够设定对所接受的数字的范围:

实例

实例
概念三个数值输入域(限定):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

品味一下
»
采用上面包车型地铁质量来鲜明对数字类型的限制:

属性 描述
disabled 规定输入字段是禁用的
max 规定允许的最大值
maxlength 规定输入字段的最大字符长度
min 规定允许的最小值
pattern 规定用于验证输入字段的模式
readonly 规定输入字段的值无法修改
required 规定输入字段的值是必需的
size 规定输入字段中的可见字符数
step 规定输入字的的合法数字间隔
value 规定输入字段的默认值

品尝一下带有全部限定属性的事例
尝试一下


陆、number:只好分包数字的输入框

Input 类型: range

range 类型用于应该包涵一定范围内数字值的输入域。
range 类型显示为滑动条。

实例

概念1个不供给优良纯粹的数值(类似于滑块调控):

<input type="range" name="points" min="1" max="10">

尝试一下
»
请使用上面包车型大巴属性来规定对数字类型的界定:

  • max – 规定允许的最大值
  • min – 规定允许的最小值
  • step – 规定法定的数字间隔
  • value – 规定暗许值

7、color:颜色采取器

Input 类型: search

search 类型用于寻找域,比如站点寻觅或 谷歌(Google) 找出。

实例

概念八个探寻字段 (类似站点寻找如故谷歌(Google)寻找):

Search Google: <input type="search" name="googlesearch">

品尝一下
»


八、datetime:展现完整日期

Input 类型: tel

实例

概念输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

品尝一下
»


玖、datetime-local:彰显完整日期,不含时区

Input 类型: time

time 类型允许你挑选一个时日。

实例

概念可输入时控器(无时区):

选择时间: <input type="time" name="usr_time">

品尝一下
»


十、time:显示时间,不含时区

Input 类型: url

url 类型用于应该包罗 UCRUISERL 地址的输入域。
在交付表单时,会活动验证 url 域的值。

实例

概念输入U揽胜L字段:

添加您的主页: <input type="url" name="homepage">

尝试一下
»
提示: 摩托罗拉 中的 Safari 浏览器援救 url
输入类型,并通过更改触摸屏键盘来合作它(增多 .com 选项)。
__

1壹、date:显示日期

Input 类型: week

week 类型允许你挑选周和年。

实例

定义周和年 (无时区):

选择周: <input type="week" name="week_year">

品尝一下
»


12、week:显示周

HTML5 <input> 标签

标签 描述
<input> 描述input输入器

13、month:显示月

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有