HTML input time calendar 控制元件

admin發表於2019-01-31
HTML控制元件

HTML5之前，實現時間控制元件通常要使用JavaScript，比較困難。

雖然有很多現成的外掛可以使用，但總歸要使用若干JavaScript和CSS程式碼。

當前，只要將input的type屬性值設定為"time"即可建立一個time控制元件，非常簡單快捷，並且功能也很實用。

特別說明：時間控制元件只包括小時欄位和分鐘欄位，因為時間通常指的就是小時與時間或者秒，如果加上日期的話，那麼通常會包括年、月或者日，這一差別大家可以體會一下。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" method="post" action="do.php">
  時間:<input type="time" name="time">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/31/202245u11mfsznf88n3f1t.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

首先對控制元件的主要特點做一下說明：

（1）.可以通過CSS對齊一些屬性進行控制。

（2）.分為前後小時與分鐘兩個欄位，當然提交表單時只有一個包含時間與分鐘的value值。

（3）.滑鼠懸浮會出現叉號與上下箭頭按鈕，點選叉號能夠清空控制元件，點選上下箭頭可以設定小時和分鐘的值。此控制元件還有若干屬性，下面介紹一下比較常用的幾個屬性：

（1）.value：控制元件value值，通過此屬性可以設定或者獲取空間的時間值。

（2）.required（HTML5）:規定控制元件內容是必填的。

（3）.list（HTML5）:規定輸入域的datalist，具體參閱HTML datalist選項列表一章節。

（4）.form（HTML5）:規定輸入域所屬的一個或多個表單。

（5）.autofocus（HTML5）：規定在頁面載入時，域自動地獲得焦點。

（6）.disabled：設定控制元件為不可用狀態，在這個狀態下，控制元件的值也不會被提交。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" method="post" action="do.php">
  時間:<input type="time" value="02:59" name="time">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/31/202324w9hnaeqzuoheqou6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過value屬性可以設定控制元件的值，有一點需要特別注意，value值的格式要規範：

（1）.值分為兩部分，用冒號分隔，左邊表示小時，右邊表示分鐘。

（2）.每一部分的數字必須是兩位，也就是二十四小時制，如果是個位數，前面補零，否則無效。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" method="post" action="do.php">
  時間:<input type="time" required name="time">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/31/202347gmrrohomrnrmhngr.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

required屬性規定控制元件為必填，也就是value值不能為空，否則報錯。

特別說明：required屬性無需屬性值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="time" list="softwhy" required name="time">
  <datalist id="softwhy">
    <option  value="02:59" />
    <option  value="02:50" />
    <option  value="02:40" />
    <option  value="02:20" />
  </datalist>   
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/31/202418tyka6cavf2qkpqtp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.將time控制元件的list屬性值設定為datalist控制元件的id屬性值，即可將兩者關聯起來。

（2）.datalist的子元素option可以設定設定備選的時間列表，與select下拉選單比較類似。

（3）.option的value屬性值同樣必須遵守一定的格式，與time控制元件value屬性值格式相同。

（4）.滑鼠懸浮於time控制元件，右側會出現向下的箭頭，點選可以彈出option預定義的時間列表。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表單"/>
</form>
日期:<input form="ant" type="time" required name="time"> 
</body>
</html>

form屬性引用所屬表單的id，於是雖然控制元件在<form>之外，但依然是該表單的一部分。

autofocus與disabled屬性就不再演示了，比較簡單，autofocus屬性規定當頁面載入完畢之後，控制元件會自動獲取焦點，disabled規定控制元件處於不可用狀態，與readonly屬性區分一下，不可以用狀態不但不可以編輯，而且控制元件的值也不能夠被提交到伺服器，但是隻讀可以被提交。

相關文章