資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML 中引入的新輸入型別有哪些？
HTML5 提供了許多新的表單輸入型別，確切地說有13種，這使得網頁設計師更容易建立引人入勝且使用者友好的網頁表單。在支援它們的網路瀏覽器中，新的 HTML5 輸入型別提供了資料驗證、日期選擇器控制元件、顏色選擇器控制元件、內聯幫助文字和其他功能。
HTML5 提供的輸入型別
在本文中，我們將瞭解所有新的表單輸入型別以及一些演示其用法的示例。
<input type=”color”>
顏色輸入型別允許使用者從顏色選擇器中選擇一種顏色，並返回十六進位制值（#rrggbb）。如果未指定值，則預設為 #000000，即黑色。
<input type=”date”>
使用日期輸入型別，使用者可以從下拉日曆中選擇一個日期。日期值中不包含時間，只包含年份、月份和日期。
<input type=”datetime”>
此輸入型別允許使用者輸入日期、時間和時區。
<input type=”datetime-local”>
使用者可以使用 datetime-local 輸入型別選擇本地日期和時間，包括年份、月份和日期，以及小時和分鐘的時間。
<input type=”email”>
使用者可以使用電子郵件輸入型別輸入他們的電子郵件地址。它與典型的文字輸入型別非常相似，但是當與 required 屬性結合使用時，瀏覽器可能會檢查模式以確保以正確的格式輸入電子郵件地址。
<input type=”month”>
使用月份輸入型別，使用者可以從下拉日曆中選擇月份和年份。該值為“YYYY-MM”格式的字串，其中 YYYY 表示四位數年份，MM 表示月份編號。
<input type=”number”>
數字輸入型別允許輸入數值。我們還可以使用附加屬性 min、max 和 step 將使用者限制為僅輸入可接受的值。
<input type=”range”>
範圍輸入型別允許我們輸入位於給定範圍內的數值。它的功能類似於數字輸入，但輸入數字的控制元件更簡單。
<input type=”search”>
可以使用搜索輸入型別建立搜尋輸入欄位。搜尋欄位通常的行為類似於常規文字欄位，但在某些瀏覽器（如 Chrome 和 Safari）中，只要您開始在搜尋框中輸入內容，搜尋欄位右側就會出現一個小叉，允許您快速清除搜尋欄位。
<input type=”tel”>
tel 輸入型別允許輸入電話號碼。瀏覽器本身不支援 tel 輸入驗證。但是，您可以使用 placeholder 屬性幫助使用者輸入電話號碼的正確格式，或者可以使用 pattern 屬性指定正則表示式來驗證使用者輸入。
<input type=”time”>
可以使用時間輸入型別（小時和分鐘）輸入時間。根據本地系統上的時間設定，瀏覽器可以以 12 小時或 24 小時格式輸入時間。
<input type=”url”>
可以使用 url 輸入型別輸入 URL 或網頁地址。我們可以使用 multiple 屬性輸入多個 URL。此外，如果指定了 required 屬性，則瀏覽器將執行驗證以確保僅將與標準 URL 格式匹配的文字輸入到輸入框中。
<input type=”week”>
使用星期輸入型別，使用者可以從下拉日曆中選擇星期和年份。
示例
在此示例中，我們將建立一個表單，並在其中使用 color、date、datetime 和 datetime local 輸入元素。
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 form input types</title>
<style>
form{
width:400px;
background-color:mistyrose;
padding:10px;
}
input{
margin:10px;
}
</style>
</head>
<body>
<form>
<label for="color">Choose a Color : </label>
<input type="color"><br>
<label for="date">Choose a Date : </label>
<input type="date"><br>
<label for="time">Select the Time :</label>
<input type="time"><br>
<label for="datetime">Enter the DateTime :</label>
<input type="datetime"><br>
<label for="datetime-local">Choose the DateTime-local :</label>
<input type="datetime-local">
</form>
</body>
</html>
示例
以下示例演示了在 HTML5 中使用 month、week、number 和 range 輸入型別。
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 form input types</title>
<style>
form{
width:350px;
background-color:lightgoldenrodyellow;
padding:10px;
}
input{
margin:10px;
}
</style>
</head>
<body>
<form>
<label for="month">Select a month : </label>
<input type="month"><br>
<label for="week">Select the week : </label>
<input type="week"><br>
<label for="number">Choose a number :</label>
<input type="number"><br>
<label for="range">Range :</label>
<input type="range" min="1" max="5" step="2"><br>
</form>
</body>
</html>
示例
在此示例中，我們將在 HTML 的 form 標籤內使用 search、email、tel 和 url 輸入型別。
<!DOCTYPE html>
<html>
<head>
<title> HTML 5 form input types</title>
<style>
form{
width:350px;
background-color:lightpink;
padding:10px;
}
input{
margin:10px;
}
</style>
</head>
<body>
<form>
<label for="search">Enter the search string: </label>
<input type="search"><br>
<label for="email">Enter Email ID : </label>
<input type="email"><br>
<label for="tel">Enter Phone Number :</label>
<input type="tel"><br>
<label for="url">Type the URL : </label>
<input type="url"><br>
</form>
</body>
</html>
167 次瀏覽
