HTML 5 <input> type 属性
<div class="backtoreference" style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><p style="border: 0px; line-height: 18px;"><a href="http://www.w3school.com.cn/html5/tag_input.asp" style="border: 0px; color: rgb(144, 11, 9); background: transparent;">HTML 5 <input> 标签</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">实例</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">带有不同输入类型的表单：</p><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><form action="demo_form.asp" method="get">First name: <input <code style="border: 0px; font-family: Consolas, "Courier New", Courier, monospace; color: rgb(0, 0, 221);">type="text"</code> name="fname" /><br />
Last name: <input <code style="border: 0px; font-family: Consolas, "Courier New", Courier, monospace; color: rgb(0, 0, 221);">type="text"</code> name="lname" /><br />
<input <code style="border: 0px; font-family: Consolas, "Courier New", Courier, monospace; color: rgb(0, 0, 221);">type="submit"</code> value="Submit" />
</form>
</pre><p class="tiy" style="margin-top: 12px; margin-bottom: 10px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p><p style="margin-top: 12px; border: 0px; line-height: 18px;">（下面有更多实例）</p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">定义和用法</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">type 属性规定 input 元素的类型。</p><p class="note" style="margin-top: 12px; border: 0px; line-height: 18px;"><span style="border: 0px; font-weight: bold;">注释：</span>该属性不是必需的，但是我们认为您应该始终使用它。</p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">HTML 4.01 与 HTML 5 之间的差异</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">以下类型是 HTML5 中的新类型：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。</p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">语法</h2><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><input type="<i style="border: 0px;">value</i>"></pre><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">属性值</h3><table class="dataintable" style="margin-top: 10px; border: 1px solid rgb(170, 170, 170); width: 709px;"><tbody style="border: 0px;"><tr style="border: 0px;"><th style="padding: 5px 15px 5px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: baseline; width: 155px; background-color: rgb(213, 213, 213);">值</th><th style="padding: 5px 15px 5px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213);">描述</th></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">button</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义可点击的按钮（大多与 JavaScript 使用来启动脚本）</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">checkbox</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义复选框。</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">color</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义拾色器。</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">date</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义日期字段（带有 calendar 控件）</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">datetime</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义日期字段（带有 calendar 和 time 控件）</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">datetime-local</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义日期字段（带有 calendar 和 time 控件）</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">month</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义日期字段的月（带有 calendar 控件）</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">week</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义日期字段的周（带有 calendar 控件）</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">time</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义日期字段的时、分、秒（带有 time 控件）</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">email</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义用于 e-mail 地址的文本字段</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">file</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义输入字段和 "浏览..." 按钮，供文件上传</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">hidden</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义隐藏输入字段</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">image</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义图像作为提交按钮</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">number</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义带有 spinner 控件的数字字段</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">password</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义密码字段。字段中的字符会被遮蔽。</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">radio</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义单选按钮。</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">range</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义带有 slider 控件的数字字段。</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">reset</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义重置按钮。重置按钮会将所有表单字段重置为初始值。</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">search</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义用于搜索的文本字段。</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">submit</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义提交按钮。提交按钮向服务器发送数据。</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">tel</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义用于电话号码的文本字段。</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">text</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。</td></tr><tr style="border: 0px;"><td class="html5_new" style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background: url("/i/table_bg_html5.gif") right top no-repeat rgb(239, 239, 239);">url</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">定义用于 URL 的文本字段。</td></tr></tbody></table></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - text</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">定义单行输入字段的文本输入类型，用户可在其中输入文本。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);">Email: <input type="text" name="email" /><br />
Pin: <input type="text" name="pin" />
</pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_text" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - button</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">button 输入类型定义可点击的按钮，这个按钮本身不会做任何事情。button 类型常用于在用户单击按钮时启动一段 JavaScript。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><input type="button" value="Click me" onclick="msg()" /></pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_button" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - checkbox</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">checkbox 输入类型定义复选框。复选框允许用户在一定数量的选择中选取一个或多个选项。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_checkbox" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - color</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">color 输入类型用于规定颜色。</p><p style="margin-top: 12px; border: 0px; line-height: 18px;">该输入类型允许您从拾色器中选取颜色：</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);">Color: <input type="color" name="user_color" /></pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_color" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">日期和时间选择器</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">HTML5 拥有多个供选择日期和时间的新的输入类型：</p><ul style="margin-top: 10px; margin-left: 35px; border: 0px;"><li style="margin-top: 3px; margin-left: 0px; border: 0px;">date - 选择日、月、年</li><li style="margin-top: 3px; margin-left: 0px; border: 0px;">month - 选择月、年</li><li style="margin-top: 3px; margin-left: 0px; border: 0px;">week - 选择周、年</li><li style="margin-top: 3px; margin-left: 0px; border: 0px;">time - 选择时间（时、分）</li><li style="margin-top: 3px; margin-left: 0px; border: 0px;">datetime - 选择时间、日期、月、年（UTC 时间）</li><li style="margin-top: 3px; margin-left: 0px; border: 0px;">datetime-local - 选择时间、日期、月、年（本地时间）</li></ul><p style="margin-top: 12px; border: 0px; line-height: 18px;">下面的例子允许您从日历选取一个日期：</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);">Date: <input type="date" name="user_date" /></pre><p class="tiy" style="margin-top: 12px; margin-bottom: 10px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_date" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p><p style="margin-top: 12px; border: 0px; line-height: 18px;">输入类型 "month": <a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_month" style="border: 0px; color: rgb(144, 11, 9); background: transparent;">亲自试一试</a></p><p style="margin-top: 12px; border: 0px; line-height: 18px;">输入类型 "week": <a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_week" style="border: 0px; color: rgb(144, 11, 9); background: transparent;">亲自试一试</a></p><p style="margin-top: 12px; border: 0px; line-height: 18px;">输入类型 "time": <a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_time" style="border: 0px; color: rgb(144, 11, 9); background: transparent;">亲自试一试</a></p><p style="margin-top: 12px; border: 0px; line-height: 18px;">输入类型 "datetime": <a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_datetime" style="border: 0px; color: rgb(144, 11, 9); background: transparent;">亲自试一试</a></p><p style="margin-top: 12px; border: 0px; line-height: 18px;">输入类型 "datetime-local": <a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_datetime-local" style="border: 0px; color: rgb(144, 11, 9); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - email</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">email 输入类型用于应该包含电邮地址的输入字段。</p><p style="margin-top: 12px; border: 0px; line-height: 18px;">当提交表单时，会自动地对 email 字段的值进行验证。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);">E-mail: <input type="email" name="user_email" /></pre><p class="tiy" style="margin-top: 12px; margin-bottom: 10px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_email" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p><p class="tip" style="margin-top: 12px; border: 0px; line-height: 18px;"><span style="border: 0px; font-weight: bold; color: rgb(255, 153, 85);">提示：</span>iPhone 的 Safari 浏览器会识别 email 输入类型，然后改变触摸屏的键盘来适应它（添加 @ 和 .com 选项）。</p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - file</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">file 输入类型用于文件上传。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);">Select images: <input type="file" name="img" /></pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_file" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - hidden</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">hidden 输入类型定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><input type="hidden" name="country" value="Norway" /></pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_hidden" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - image</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">image 输入类型将图像定义为提交按钮。</p><p style="margin-top: 12px; border: 0px; line-height: 18px;">对于 <input type="image">，src 和 alt 属性是必需的。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><input type="image" src="img_submit.gif" alt="Submit" /></pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_image" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - number</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">number 输入类型用于包含数字值的输入字段。</p><p style="margin-top: 12px; border: 0px; line-height: 18px;">您可以设置可接受数字的限制。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);">Points: <input type="number" name="points" min="1" max="10" /></pre><p class="tiy" style="margin-top: 12px; margin-bottom: 10px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_number" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p><p style="margin-top: 12px; border: 0px; line-height: 18px;">请使用下面的属性来为 number 类型规定限制：</p><table class="dataintable" style="margin-top: 10px; border: 1px solid rgb(170, 170, 170); width: 709px;"><tbody style="border: 0px;"><tr style="border: 0px;"><th style="padding: 5px 15px 5px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: baseline; width: 84px; background-color: rgb(213, 213, 213);">属性</th><th style="padding: 5px 15px 5px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: baseline; width: 84px; background-color: rgb(213, 213, 213);">值</th><th style="padding: 5px 15px 5px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213);">描述</th></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">max</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><i style="border: 0px;">number</i></td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定允许的最大值。</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">min</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><i style="border: 0px;">number</i></td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定允许的最小值。</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">step</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><i style="border: 0px;">number</i></td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定合法数字间隔（如果 step="3"，则合法的数字是 -3,0,3,6, 以此类推）</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">value</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><i style="border: 0px;">number</i></td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定默认值。</td></tr></tbody></table><p class="tip" style="margin-top: 12px; border: 0px; line-height: 18px;"><span style="border: 0px; font-weight: bold; color: rgb(255, 153, 85);">提示：</span>iPhone 的 Safari 浏览器会识别 number 输入类型，然后改变触摸屏的键盘来适应它（显示数字）。</p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - password</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">password 输入类型定义密码字段。密码字段中的字符会被遮蔽（显示为星号或实心圆）。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><input type="password" name="pwd" /></pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_password" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - radio</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">radio 输入类型定义单选按钮。单选按钮允许用户选择有限数目的选项。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_radio" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - range</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">range 输入类型用于应该包含指定范围值的输入字段。</p><p style="margin-top: 12px; border: 0px; line-height: 18px;">range 类型显示为滑块。</p><p style="margin-top: 12px; border: 0px; line-height: 18px;">您也可以设置可接受数字的限制：</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><input type="range" name="points" min="1" max="10" /></pre><p class="tiy" style="margin-top: 12px; margin-bottom: 10px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_range" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p><p style="margin-top: 12px; border: 0px; line-height: 18px;">请使用下面的属性来规定 range 类型的限定：</p><table class="dataintable" style="margin-top: 10px; border: 1px solid rgb(170, 170, 170); width: 709px;"><tbody style="border: 0px;"><tr style="border: 0px;"><th style="padding: 5px 15px 5px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: baseline; width: 84px; background-color: rgb(213, 213, 213);">属性</th><th style="padding: 5px 15px 5px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: baseline; width: 84px; background-color: rgb(213, 213, 213);">值</th><th style="padding: 5px 15px 5px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: baseline; background-color: rgb(213, 213, 213);">描述</th></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">max</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><i style="border: 0px;">number</i></td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定允许的最大值。</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">min</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><i style="border: 0px;">number</i></td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定允许的最小值。</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">step</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><i style="border: 0px;">number</i></td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定合法数字间隔（如果 step="3"，则合法数字是 -3,0,3,6，以此类推）</td></tr><tr style="border: 0px;"><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">value</td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><i style="border: 0px;">number</i></td><td style="padding: 6px 15px 6px 6px; border-color: rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定默认值。</td></tr></tbody></table></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - reset</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">Reset 输入类型定义重置按钮。重置按钮会把所有表单字段重置为初始值。</p><p class="tip" style="margin-top: 12px; border: 0px; line-height: 18px;"><span style="border: 0px; font-weight: bold; color: rgb(255, 153, 85);">提示：</span>请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><input type="reset" /></pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_reset" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - search</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">search 输入类型用于搜索字段，比如站内搜索或谷歌搜索等。</p><p style="margin-top: 12px; border: 0px; line-height: 18px;">搜索字段的外观与常规的文本字段无异。</p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - submit</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">submit 输入类型定义提交按钮。</p><p style="margin-top: 12px; border: 0px; line-height: 18px;">提交按钮用于向服务器发送表单数据。数据会被发送到在表单的 action 属性中规定的页面。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);"><form action="form_action.asp" method="get">
Email: <input type="text" name="email" /><br />
<input type="submit" />
</form>
</pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_text" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - tel</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">tel 输入类型用于应该包含电话号码的输入字段。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);">Mobile: <input type="tel" name="user_mobile" /></pre><p class="tiy" style="margin-top: 12px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_tel" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p></div><div style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><h2 style="border: 0px; font-family: 微软雅黑; font-size: 14px;">输入类型 - url</h2><p style="margin-top: 12px; border: 0px; line-height: 18px;">url 输入类型用于应该包含 URL 地址的输入字段。</p><p style="margin-top: 12px; border: 0px; line-height: 18px;">会在提交表单时对 url 字段的值自动进行验证。</p><h3 style="margin-top: 20px; border: 0px; font-size: 12px;">实例</h3><pre style="margin-top: 10px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, "Courier New", Courier, monospace; width: 685px; background: rgb(245, 245, 245);">Homepage: <input type="url" name="user_url" /></pre><p class="tiy" style="margin-top: 12px; margin-bottom: 10px; padding: 6px 16px; border: none; line-height: 18px; display: inline-block; outline: 0px; vertical-align: middle; overflow: hidden; color: rgb(255, 255, 255); text-align: center; transition: 0.2s ease-out; cursor: pointer; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 3px, rgba(0, 0, 0, 0.239216) 0px 1px 2px; background-color: rgb(248, 142, 139);"><a target="_blank" href="http://www.w3school.com.cn/tiy/t.asp?f=html5_input_type_url" style="border: 0px; text-decoration: none; color: rgb(255, 255, 255); background: transparent;">亲自试一试</a></p><p class="tip" style="margin-top: 12px; border: 0px; line-height: 18px;"><span style="border: 0px; font-weight: bold; color: rgb(255, 153, 85);">提示：</span>iPhone 的 Safari 浏览器会识别 url 输入类型，然后改变触摸屏的键盘来适应它（添加 .com 选项）。</p></div><div class="backtoreference" style="margin-left: 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-bottom-color: rgb(170, 170, 170); width: 710px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: rgb(249, 249, 249);"><p style="border: 0px; line-height: 18px;"><a href="http://www.w3school.com.cn/html5/tag_input.asp" style="border: 0px; color: rgb(144, 11, 9); background: transparent;">HTML 5 <input> 标签</a></p></div><p></p>
页:
[1]