HTML5 新的 Input 類型

html表單一直都是web的核心技術(shù)之一，有了它才能在web上進行各種各樣的應(yīng)用。html5的input新增了許多新控件類型，方便我們對表單的驗證。

opera對新屬性的支持性最好，ie10以下不支持，其他主流瀏覽器部分支持。

新的 Input 類型

color

// 谷歌歐鵬支持
// 顯示顏色供選擇,提交值為8進制
<input type="color" name="favcolor" />

注意：當點擊黑框時，會彈出顏色選擇框供你選擇。

date

// 谷歌歐鵬蘋果支持
// 提供日期選擇
<input type="date" name="bday">

注意：當點擊黑色下三角符號時會彈出如下日起選擇框供你選擇日期，其他新增時間類型也采用此樣式。

datetime

// 歐鵬蘋果支持
// 提供時間與日期選擇
<input type="datetime" name="bdaytime">

datetime-local

// 谷歌歐鵬蘋果支持
// 無時區(qū)的日期與時間
<input type="datetime-local" name="bdaytime">

// 火狐谷歌歐鵬支持
// 在提交市會自動校驗,值是否合法
<input type="email" name="email">

month

// 谷歌蘋果歐鵬支持
// 無時區(qū)的日期
<input type="month" name="bdaymonth">

number

// 高版本IE 谷歌歐鵬蘋果支持
// 限制數(shù)字
// max 最大 min最小 step間隔 value默認
<input type="number" name="quantity" min="1" max="5">

注意：右邊有兩增減圖標。

range

// 高版本IE 谷歌歐鵬蘋果支持
// 隨機數(shù)字,滑塊控制
// 參數(shù)與number一樣
<input type="range" name="points" min="1" max="10">

// 谷歌蘋果支持
// 搜索域
<input type="search" name="googlesearch">

tel

// 均不支持
<input type="tel" name="usrtel">

time

// 谷歌蘋果歐鵬支持
// 時間控制器
<input type="time" name="usr_time">

url

// 高版本IE 火狐谷歌歐鵬支持
// 提交時校驗url
<input type="url" name="homepage">

week

// 谷歌蘋果歐鵬支持
// 定義周和年(無時區(qū))
<input type="week" name="week_year">

展示一個目前瀏覽器對這些 input 的支持情況

input 種類 IE FF Opero Chrome

search 不支持不支持不支持不支持

number 不支持不支持 9.0以上不支持

range 不支持不支持 9.0以上 4.0以上

color 不支持不支持不支持不支持

tel 不支持不支持 9.0以上不支持

url 不支持不支持 9.0以上不支持

email 不支持不支持 9.0以上不支持

時間不支持不支持 9.0以上不支持

實例1：

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    <body>

            <form action="demo-form.php" method="get">
          Points: <input type="range" name="points" min="1" max="10">
          <input type="submit">
        </form>
        <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>
      </body>
</html>

實例2：

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    <body>

            <form action="demo-form.php">
          數(shù)量 ( 1 到 5 之間): <input type="number" name="quantity" min="1" max="5">
          <input type="submit">
        </form>
        <p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p>
      </body>
</html>

實例3：

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
    </head>
    
      <body>
            <form action="demo-form.php">
          選擇周: <input type="week" name="year_week">
          <input type="submit">
        </form>
    </body>
</html>

Weiter lernen

neue Datei

<!doctype html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <form action="upload.php" method="post" accept-charset="utf-8" id="form1"> <br> 主頁: <input type="url" name="url" value="" placeholder="個人主頁" required> <br> 郵箱: <input type="email" name="email" value="" placeholder="郵箱" required> <br> 生日: <input type="date" name="date" value="" required> <br> 時間: <input type="time" name="time" value="" required> <br> 星期: <input type="week" name="week" value="" required> <br> 年齡: <input type="number" name="age" value=""> <br> 薪水: <input type="range" name="range" value=""> <br> 電話: <input type="tel" name="tell" value="" placeholder="都不支持"> <br> 顏色: <input type="color" name="mycolor"> <br> <input type="search" name="key" value="" results="s"><br> <input type="submit" name="sub" value="提交" form="form1"> </form> </body> </html>

einreichen Code zurücksetzen

Automatische Operation