08 H5新增input元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
	在android和ios中尤其能体现这些输入控件的特点,会自动切换到不同的虚拟键盘!
    <hr>
<form>
	查询文本框
	<input type="search" placeholder="请输入查询关键字" autofocus>
    <hr>
    列表提示
	<input type="text"  list="searchlist">
    <datalist id="searchlist">
    	<option value="beijing" label="北京" />
    	<option value="shanghai" label="上海" />
        <option value="nanjing" label="南京" />
        <option value="nanchang" label="南昌"/>
 	</datalist>
    <hr>
	数字文本框
	<input type="number" max="9" min="0" step="1"/>
    <hr>
	滑动条
	<input type="range" max="9" min="0" step="1" value="2">
    <hr>
	颜色文本框
	<input type="color" value="#ff00ff"/>
    <hr>
	电话文本框
    <input type="tel">
    <hr>
    网址输入
    <input type="url">
    <hr>
    邮箱地址
    <input type="email">
    <hr>
    日期选择
    <input type="date" max="2012-10-10" min="2001-01-01"  value="2011-01-01" />
	<hr>
    时间选择
    <input type="time" max="18:39:57" min="17:49:57"  value="17:49:58" />
    <hr>
    UTC日期时间
    <input type="datetime" />
	<hr>
    本地日期时间
    <input type="datetime-local" />
	<hr/>
	<input type="submit" value="submit"/>
	<p>H5中新增的input元素只有在点击提交按钮时,才有效果</p>
</form>
</body>
</html>

  

时间: 2024-10-29 23:07:39

08 H5新增input元素的相关文章

H5新增input属性

目录 H5中新增input系列(2) H5新增的input的type属性 1.placeholder 属性 2.step 属性 3.pattern 属性 4.multiple 属性 5.min 和 max 属性 6.height 和 width 属性 7.list属性 8.required属性 9.formtarget 属性 10.formmethod 属性 11.autofocus 属性 12.autocomplete 属性 13.form 属性 14.formaction 属性 15.for

H5新增input标签

1.电子邮件 <input type="email" name="email"/> 默认正则:输入内容必须有@符号,@后面必须有内容 2.搜索框 <input type="search" name="search"/> 3.url地址 <input type="url" name="url"/> 默认正则:必须包含http:或者https: 4.电话号

H5新增属性02

H5智能表单 input 新增 type值 email 若输入的样式不和邮箱一样则报错 url 必须输入url地址(加http://) number 只能输入数字 属性:min max step value(默认值) range 取值范围 属性:min max step value(默认值) tel search 效果和text一样,专用于搜索框 属性:result color 调出取色板 date:选取日月年 month:选取月年 week:选取周年 time:选取时间,小时和分钟 datet

浅谈HTML5之二:新增的元素和废除的元素

新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. HTML5中代码示例:<section>…</section> HTML4中代码示例:<div>…</div> article元素 article元素表示文档中的一块独立的内容,譬如博客中的一篇文章或报纸中的一篇文章. HTML5中代码示例:<artic

h5新增标签

语义标签: <article>定义文章</article><aside>定义文章侧边栏</aside> <figure>定义一组媒体对象以及文字内容</figure><figcaption>定义figure的标题</figcaption> 布局页面时用的语义标签:<nav>定义导航</nav><header>头部</header><section>定义

h5新增内容

一.h5新增标签:摘取w3cSchool: <article>定义 article.<aside> 定义页面内容之外的内容. <footer> 定义 section 或 page 的页脚.<header>定义 section 或 page 的页眉.<section>定义 section. <nav>定义导航链接. <canvas> 定义图形.<audio> 定义声音内容. <video>定义视频.&

HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)

新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. HTML5中代码示例:<section>-</section> HTML4中代码示例:<div>-</div> article元素 article元素表示文档中的一块独立的内容,譬如博客中的一篇文章或报纸中的一篇文章. HTML5中代码示例:<artic

h5新增和css3新增

编辑器: webstorm, 英文版 sublime, hbuilder vscode, dwh5的新标签及特性(移动端用的多),,,,如果想在图片里面显示 “帅哥" 记得使用单双引号,外面是单引号,里面是双引号例如: <img src="" title='这里有一个"傻狗"'/>h5新增语义化标签:(对浏览器和搜索引擎友好,)div没有语义化, 都可能出现很多次 section元素 表示页面中的一个区块 article 元素: 表示页面中的一

H5新增特性

1.pattern:写正则,但是需要和form表单连着用 2.WebSocket "网络套接字", 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询.轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器.这种传统的