HTML5中真的存在<input type="week">嗎?


<input>標籤指定了一個使用者可輸入資料的欄位。<input>元素是最重要的表單元素。根據type屬性的不同,<input>元素可以以多種不同的方式呈現。

由於其type屬性值為"week",input元素表示一個星期輸入欄位。這些欄位可以在支援的瀏覽器中透過允許使用者以圖形方式更新它的控制元件(例如日曆)來表示,而不是要求使用者將其值作為字串輸入。

讓我們進入文章,進一步討論HTML5中<input type="week">是否存在。

<input type="week">

帶有type=week屬性的<input>標籤可以建立一個輸入欄位,用於輸入星期和年份值。此區域內有一個日曆圖示。單擊此圖示會啟用星期/年份選擇器。每個瀏覽器都有獨特的使用者介面來控制。瀏覽器的支援參差不齊。也允許在星期欄位中手動輸入星期和年份格式。

語法

以下是HTML input type=week的語法

<input type="week">

讓我們來看以下示例,以便更好地理解input type="week"。

示例

在下面的示例中,我們只是建立了一個帶有星期控制元件的<form>。

<!DOCTYPE HTML>
<html>
   <body>
      <form action="#" target="_blank">
         <p>Choose Week:<input type="week" name="weekend">
         <input type="submit" value="SEND"></p>
      </form>
   </body>
</html>

輸出

當指令碼執行時,它將生成一個輸出,其中包含一個輸入欄位,允許使用者手動選擇星期或使用提供的日曆選擇,因為輸入欄位被設定為type=week。

示例

考慮下面的示例,我們使用<datalist>元素提供建議值。

<!DOCTYPE HTML>
<html>
   <body>
      <form action="#" method="post" target="_blank">
         <p>Select Week For Vacation:<input type="week" name="week" list="weeklist">
         <input type="submit" value="SEND">
         </p>
      </form>
      <datalist id="weeklist">
         <option value="2016-W52">
            <option value="2016-W12">
               <option value="2017-W03">
                  <option value="2018-W05">
                     <option value="2018-W06">
      </datalist>
   </body>
</html>

輸出

執行上述指令碼後,它將生成一個輸出,其中包含一個輸入欄位,允許使用者選擇星期,並使用<datalist>元素提供的指令碼中的建議值。

示例

檢視下面的示例,我們使用min和max屬性來限制使用者可以輸入的值。

<!DOCTYPE HTML>
<html>
   <body>
      <form action="#" target="_blank">
         <p>Choose Week:<input type="week" name="selectedweek" min="2017-W04" max="2017-W15">
         <input type="submit" value="SEND">
         </p>
      </form>
   </body>
</html>

輸出

當指令碼執行時,它將生成一個輸出,其中包含一個輸入欄位,允許使用者選擇一個特定星期(如使用min和max屬性所指定),這些屬性限制了輸入。

更新於:2023年10月11日

276 次檢視

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告