資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Safari 中的 HTML5 日期欄位和佔位符文字
如果您想在網頁中新增一個包含年份、月份和日期的日期選擇器，那麼 HTML5 為您提供了一個“date”欄位。它是在<input>元素中的一個型別。它在各種網路瀏覽器（如 Google Chrome、Internet Explorer 和 Firefox）中都能很好地工作。在這裡，我們將瞭解它在 Safari 中的工作原理，Safari 也是一種網路瀏覽器。
首先讓我們瞭解一下 Safari。
Safari
Safari 是一款由 Apple 為其使用者開發的圖形化 Web 瀏覽器。它本質上是一個開源軟體，專門為所有 Apple 裝置設計。它主要執行在 Javascript 引擎上。它提供強大的安全保護、眾多自定義選項和更長的電池續航時間。在速度方面，它是世界上最快的瀏覽器。
HTML5 日期輸入型別
HTML5 日期輸入提供了一個簡單的介面，用於以完整日期格式（即 yyyy-mm-dd）選擇日期。
讓我們透過一個示例來理解這一點。
示例
<html> <head> </head> <body> <form> <label for = “demo”> <input id = “ demo” type= “date” name= “example” > </label> </form> </body> </html>
當您單擊下拉圖示時，會顯示一個日曆以供選擇日期。
這裡,
表單元素
HTML5 的 <form> 元素用於建立一個容器，使用者可以在其中輸入資訊。它由 <form> 標籤表示。
表單元素的 action 屬性定義了表單資料需要提交到的位置。
<form> 元素包含各種型別的表單元素。它們是 <input>、<label>、<button>、<output>、<textarea>、<select> 等。
語法
<form action= “ “> </form>
示例
<body> <form> Enter Your Name <input type= “text” name= “ username”> </form> </body>
標籤元素
HTML5 的 label 元素為輸入元素提供標籤。使用標籤可以讓使用者更好地理解輸入的描述。
該
語法
<label for = “ “> </label>
示例
<body> <h2> Which type of games do you like? </h2> <form> <label for= “indoor” > <input id = “indoor” type= “radio” name= “indoor-outdoor ”> Indoor </label> <label for= “outdoor”> <input id = ”outdoor” type= ”radio” name= ”indoor-outdoor “> Outdoor </label> </body>
*單選按鈕是輸入的一種型別。每個單選按鈕都巢狀在其自己的標籤元素中。在此，選擇一個單選按鈕會自動取消選擇同一組中的其他按鈕，確保使用者只提供一個答案。
注意 - label 元素的 for 屬性應與input元素的id屬性相同。
輸入元素
input元素允許使用者輸入資訊。它由 <input> 標籤表示。它是一個自閉合元素；它不需要結束標籤。它具有各種輸入型別和屬性。
輸入型別
input元素的type屬性指定使用者提供的輸入型別。type屬性的值如下：
text - 文字形式的輸入。這是預設值。
checkbox - 用於可以選擇多個選項的情況。
radio - 用於只需要選擇一個選項的情況
color - 它指定顏色控制元件。它使使用者能夠在網頁上選擇顏色
date - 用於以完整日期格式（即 yyyy-mm-dd）選擇日期。
button - 它顯示一個按鈕，單擊該按鈕以執行指定的函式。
datetime-local - 用於選擇日期和時間，不帶時區。
email - 用於輸入電子郵件 ID
file - 用於使用者選擇檔案。
number - 用於輸入數字
input元素的其他屬性有 name、id、required、min、max、placeholder、size、src 等。
示例
<body> <form> <label for = “email”> Enter your email id<input type = “email” name = “information” id= “email” placeholder = “example@gmail.com”></label> </form> </body>
placeholder 屬性
佔位符是在使用者未設定任何值時顯示錶單元素的文字。
示例
<form> <label for= “name”> <input type = “text” placeholder= “username” id= “name”> Enter Your Name </label> </form>
placeholder 屬性不支援輸入型別為日期的輸入元素。但是，它在 Safari Web 瀏覽器中有效，因為它不支援date型別的輸入元素，這意味著此屬性被忽略，並且預設情況下只顯示純文字欄位。
以下程式碼在 Safari 中有效：
示例
<html> <style> input [type= ‘date’ ] :: after{ color: #fff; content: attr(placeholder); } </style> <body> <form> <input id = “dateofbirth” name = “mydate” value=”” type= “date” placeholder= “yyyy-mm-dd”> </form> </body> <html>
<style> 標籤用於編寫 CSS 程式碼。
語法
Element {
//Code to be executed
};
::after 是一個偽元素，用於在元素內容之後插入某些內容。
結論
Safari 的桌面版本沒有包含本機的日期選擇器，但 iOS 版本包含。而 Chrome 和其他瀏覽器會顯示一個日曆來選擇日期。但是您可以為日期輸入新增佔位符屬性（適用於 Safari）。佔位符屬性不會顯示在支援日期型別的瀏覽器上。
7K+ 次檢視
