HTML5 新的 Input 類型

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

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

新的Input 類型

color

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

1013.png

#注意:當點擊黑框時,會彈出一個顏色選擇框供你選擇。

date

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

1015.png

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

datetime

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

datetime-local

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

email

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

1008.jpg

#month

// 谷歌蘋果歐鵬支援
//無時區的日期
<input type="month" name="bdaymonth">

number

// 高版本IE 谷歌歐鵬蘋果支援
// 限制數字
// max 最大min最小step間隔value預設
<input type="number" name="quantity" min="1" max="5">

1012.png

注意:右邊有兩幅增減圖示。

range

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

1014.png

search

// 谷歌蘋果支援
// 搜尋領域
<input type="search" name="googlesearch">

tel

// 皆不支援
<input type="tel" name="usrtel">

time

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

url

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

1007.jpg

##week

// 谷歌蘋果歐鵬支援

// 定義週和年(無時區)
<input type="week" name="week_year">

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

input不支援   

number    不支援   不支援   9.0以上   不支援   

range    不支援   不支援   不支援   

##tel    不支援   不支援   9.0以上   不支援   

url    不支援   不支援   9.超過 「   

時間   不支援   不支援   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>

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

            <form action="demo-form.php">
          数量 ( 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>

## 從1f


<!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>

######實例3:#########rrreee##########
繼續學習
||
<!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>