Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
128 lines (88 sloc) 3.89 KB
layout title date categories tags
post
HTML5新控件元素的介绍
2015-06-26 23:53:02 -0700
Coding
HTML Web Key

滑块控件 Range 对象

Range主代码<input type="range">. HTML5新元素.

<input type="range" id="myRange">

<p>点击按钮来获得滑块控件的值。</p>

<button onclick="myFunctionRange()">试一下</button>

<p id="demoRange"></p>

<script>
function myFunctionRange() {
    var x = document.getElementById("myRange").value;
    document.getElementById("demoRange").innerHTML = x;
}
</script>

点击按钮来获得滑块控件的值。

试一下

<script>function myFunctionRange() {var x = document.getElementById("myRange").value;document.getElementById("demoRange").innerHTML = x;}</script>

数值选择 Number 控件

Number主代码:<input type="number">. HTML5新元素.

<input type="number" id="myNumber" value="2" max="10" min="-2">

<p>点击按钮来获得 number 字段的数字。</p>

<button onclick="myFunctionNumber()">试一下</button>

<p id="demoNumber"></p>

<script>
function myFunctionNumber() {
    var x = document.getElementById("myNumber").value;
    document.getElementById("demoNumber").innerHTML = x;
}
</script>

点击按钮来获得 number 字段的数字。

试一下

<script>function myFunctionNumber() { var x = document.getElementById("myNumber").value; document.getElementById("demoNumber").innerHTML = x;}</script>

日期选择 Date 对象

Date主代码<input type="date"> (HTML5才支持)

<input type="date" id="myDate" value="2014-06-01">

<p>点击按钮来获得 date 字段的日期。</p>

<button onclick="myFunctionDate()">试一下</button>

<p id="demoDate"></p>

<script>
function myFunctionDate() {
    var x = document.getElementById("myDate").value;
    document.getElementById("demoDate").innerHTML = x;
}
</script>

点击按钮来获得 date 字段的日期。

试一下

<script>function myFunctionDate() {var x = document.getElementById("myDate").value;document.getElementById("demoDate").innerHTML = x;}</script>

拾色器 color 对象

Color 主代码: <input type="color">. HTML5新元素.

选择您喜爱的颜色:<input type="color" id="myColor">

<p>请点击按钮来获得颜色选择器的颜色。</p>

<p id="demoColor"></p>

<button onclick="myFunctionColor()">试一下</button>

<script>
function myFunctionColor() {
    var x = document.getElementById("myColor").value;
    document.getElementById("demoColor").innerHTML = x;
}
</script>

选择您喜爱的颜色:

请点击按钮来获得颜色选择器的颜色。

试一下 <script>function myFunctionColor(){var x = document.getElementById("myColor").value;document.getElementById("demoColor").innerHTML = x;}</script>

比较次要不常用的元素..

网址 url 对象

url 主代码<input type="url"> HTML5新元素. 形式和text输入框类似.

搜索 search 对象

Search 主代码<input type="search"> HTML5新元素. 形式和text输入框类似.

Email 对象

[Email]对象(http://www.w3school.com.cn/jsref/dom_obj_email.asp) 主代码<input type="email"> HTML5新元素. 形式和text输入框类似.