當前位置 : IT培訓網 > Web前端 > Web教程 > 如何制作html5新的Input表單

如何制作html5新的Input表單

時間:2016-12-07 15:13:35??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
你學會了嗎,知道如何制作表單了嗎,知道搜索框是如何實現,如何通過網頁來獲取用戶的電話了嗎,如果你還沒有學會,那就趕緊加入IT培訓網,讓我們一起學習HTML5中新的Input類型吧!

HTML5表單也是網頁制作中重要的組成部分,如果你想在網頁中接收瀏覽者的信息,那么就要給瀏覽者一個表單,下面我們就根據這些表單輸入類型做一個詳細的介紹,希望大家可以在這方面學的精學的透。

HTML5 新的 Input 類型

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

本章全面介紹這些新的輸入類型:

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

注意:并不是所有的主流瀏覽器都支持新的input類型,不過您已經可以在所有主流的瀏覽器中使用它們了。即使不被支持,仍然可以顯示為常規的文本域。

HTML5 <input> 標簽

標簽

描述

<input>

描述input輸入器

 

Input 類型: color

color 類型用在input字段主要用于選取顏色,如下所示:

OperaSafariChromeFirefoxInternet Explorer

實例

從拾色器中選擇一個顏色:

選擇你喜歡的顏色: <input type="color" name="favcolor">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  選擇你喜歡的顏色: <input type="color" name="favcolor"><br>

  <input type="submit">

</form>

</body>

</html>

運行結果:

選擇你喜歡的顏色:

 

 

提交后輸出:#000000

Input 類型: date

date 類型允許你從一個日期選擇器選擇一個日期。

OperaSafariChromeFirefoxInternet Explorer

實例

定義一個時間控制器:

生日: <input type="date" name="bday">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  生日: <input type="date" name="bday">

  <input type="submit">

</form>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:2014-10-29

Input 類型: datetime

datetime 類型允許你選擇一個日期(UTC 時間)。

OperaSafariChromeFirefoxInternet Explorer

實例

定義一個日期和時間控制器(本地時間):

生日 (日期和時間): <input type="datetime" name="bdaytime">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  生日 (日期和時間): <input type="datetime" name="bdaytime">

  <input type="submit">

</form>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:2014-10-29

Input 類型: datetime-local

datetime-local 類型允許你選擇一個日期和時間 (無時區).

OperaSafariChromeFirefoxInternet Explorer

實例

定義一個日期和時間 (無時區):

生日 (日期和時間): <input type="datetime-local" name="bdaytime">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  生日 (日期和時間): <input type="datetime-local" name="bdaytime">

  <input type="submit">

</form>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:2014-12-24T23:57

Input 類型: email

email 類型用于應該包含 e-mail 地址的輸入域。

OperaSafariChromeFirefoxInternet Explorer

實例

在提交表單時,會自動驗證 email 域的值是否合法有效:

E-mail: <input type="email" name="email">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  E-mail: <input type="email" name="usremail">

  <input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9  及更早 IE 版本不支持 type="email" 。</p>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:449173586@qq.com

提示: iPhone 中的 Safari 瀏覽器支持 email 輸入類型,并通過改變觸摸屏鍵盤來配合它(添加 @ 和 .com 選項)。

Input 類型: month

month 類型允許你選擇一個月份。

OperaSafariChromeFirefoxInternet Explorer

實例

定義月與年 (無時區):

生日 (月和年): <input type="month" name="bdaymonth">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  生日 ( 月和年 ): <input type="month" name="bdaymonth">

  <input type="submit">

</form>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:2016-12

Input 類型: number

number 類型用于應該包含數值的輸入域。

您還能夠設定對所接受的數字的限定:

OperaSafariChromeFirefoxInternet Explorer

實例

定義一個數值輸入域(限定):

數量 ( 1 到 5 之間 ): <input type="number" name="quantity" min="1" max="5">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</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>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:3

使用下面的屬性來規定對數字類型的限定:

屬性

描述

disabled

規定輸入字段是禁用的

max

規定允許的最大值

maxlength

規定輸入字段的最大字符長度

min

規定允許的最小值

pattern

規定用于驗證輸入字段的模式

readonly

規定輸入字段的值無法修改

required

規定輸入字段的值是必需的

size

規定輸入字段中的可見字符數

step

規定輸入字的的合法數字間隔

value

規定輸入字段的默認值

 

Input 類型: range

range 類型用于應該包含一定范圍內數字值的輸入域。

range 類型顯示為滑動條。

OperaSafariChromeFirefoxInternet Explorer

實例

定義一個不需要非常精確的數值(類似于滑塊控制):

<input type="range" name="points" min="1" max="10">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</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>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:7

請使用下面的屬性來規定對數字類型的限定:

max - 規定允許的最大值

min - 規定允許的最小值

step - 規定合法的數字間隔

value - 規定默認值

Input 類型: search

search 類型用于搜索域,比如站點搜索或 Google 搜索。

OperaSafariChromeFirefoxInternet Explorer

實例

定義一個搜索字段 (類似站點搜索或者Google搜索):

Search Google: <input type="search" name="googlesearch">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  Search Google: <input type="search" name="googlesearch"><br>

  <input type="submit">

</form>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:IT培訓網

Input 類型: tel

OperaSafariChromeFirefoxInternet Explorer

實例

定義輸入電話號碼字段:

電話號碼: <input type="tel" name="usrtel">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  電話號碼: <input type="tel" name="usrtel"><br>

  <input type="submit">

</form>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:0371-55025044

Input 類型: time

time 類型允許你選擇一個時間。

OperaSafariChromeFirefoxInternet Explorer

實例

定義可輸入時間控制器(無時區):

選擇時間: <input type="time" name="usr_time">

源代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>it培訓網(www.oalvodamoda.com)</title>

</head>

<body>

<form action="demo-form.php">

  選擇時間: <input type="time" name="usr_time">

  <input type="submit">

</form>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:23:57

Input 類型: url

url 類型用于應該包含 URL 地址的輸入域。

在提交表單時,會自動驗證 url 域的值。

OperaSafariChromeFirefoxInternet Explorer

實例

定義輸入URL字段:

添加您的主頁: <input type="url" name="homepage">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  添加你的主頁: <input type="url" name="homepage"><br>

  <input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本不支持 type="url" 。</p>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

提交后輸出:www.oalvodamoda.com

提示: iPhone 中的 Safari 瀏覽器支持 url 輸入類型,并通過改變觸摸屏鍵盤來配合它(添加 .com 選項)。

Input 類型: week

week 類型允許你選擇周和年。

OperaSafariChromeFirefoxInternet Explorer

實例

定義周和年 (無時區):

選擇周: <input type="week" name="week_year">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>it培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<form action="demo-form.php">

  選擇周: <input type="week" name="year_week">

  <input type="submit">

</form>

</body>

</html>

運行結果:

如何制作html5新的Input表單_www.oalvodamoda.com

你學會了嗎,知道如何制作表單了嗎,知道搜索框是如何實現,如何通過網頁來獲取用戶的電話了嗎,如果你還沒有學會,那就趕緊加入IT培訓網,讓我們一起學習HTML5中新的Input類型吧!

頂一下
(1)
100%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天