資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究HTML5中的輸入元素是什麼？
HTML中的input元素用於建立基於web的表單的互動式控制元件，以接受使用者的輸入資料。<input>元素只有開始標籤，並且只有在<form>標籤之間新增<input>元素時，它才能正常工作。
由於屬性和輸入型別的組合數量巨大，input元素被認為是最強大和最複雜的HTML元素之一。我們有許多屬性可以與<input>元素一起使用，但根據需要，一次只能使用一個屬性。
電子郵件屬性
顧名思義，當我們希望使用者在欄位中輸入電子郵件地址時，可以使用電子郵件屬性。電子郵件屬性遵循的格式為“%@%”，這意味著你的內容中應該有一個“@”符號。
任何不遵循此格式的內容都會在表單提交期間產生錯誤。我們可以在input元素中使用multiple屬性，以允許在同一欄位中輸入多個電子郵件地址。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Email attribute</h1>
<form action="#">
<label for="email">Enter your email address:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
</body>
</html>
搜尋屬性
搜尋屬性用於在網頁上建立一個搜尋框，其中包含需要在網頁上搜索的文字。
搜尋框通常以圓角顯示，並且還顯示一個叉號 (X) 用於清除搜尋框中的所有內容。但是，要使搜尋屬性生效，我們必須始終有一個與搜尋框連結的提交按鈕。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Search Attribute</h1>
<form action="#">
<label for="Text to be searched">Enter Text:</label>
<input type="search" id="search" name="search">
<input type="submit">
</form>
</body>
</html>
電話屬性
Tel屬性代表電話。顧名思義，此屬性用於在網頁上建立一個欄位，使用者可以在其中輸入手機號碼。當用戶將滑鼠懸停在電話欄位上時，會生成一個數字鍵盤，用於在欄位中輸入電話號碼。
由於世界各地電話號碼格式多種多樣，因此此屬性沒有任何特定格式，因此即使使用者在欄位中輸入文字，也不會在表單提交期間產生任何錯誤。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Telephone attribute</h1>
<form action="#">
<label for="phone">Enter a phone number:</label><br>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}- [0-9]{2}-[0-9]{3}" required>
<input type="submit">
</form>
</body>
</html>
URL屬性
URL屬性用於在網頁上建立一個欄位，該欄位接受使用者輸入的URL。URL欄位僅適用於URL地址，如果未輸入協議（即http:）或使用者輸入的URL格式錯誤，則會產生錯誤。
URL欄位通常用於希望使用者分享社交媒體帳戶連結（如Instagram、LinkedIn）或分享一些專案連結的表單中。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Display a URL Input Field</h1>
<form action=”#”>
<label for="Instagram">Instagram Link:</label>
<input type="url" id="instagram" name="instagram">
<input type="submit"><br><br>
<label for="Linkedin">Linkedin Link:</label>
<input type="url" id="linkedin" name="linkedin">
<input type="submit"><br><br>
<label for="Twitter">Twitter Link:</label>
<input type="url" id="twitter" name="twitter">
<input type="submit">
</form>
</body>
</html>
範圍屬性
範圍屬性用於在網頁上建立一個欄位，我們希望使用者在其中輸入數字。但是，無需手動鍵入數字，我們使用滑塊，滑塊具有上限和下限範圍，使用者可以透過移動滑塊來選擇該範圍內的任何數字。
但是，要使範圍屬性生效，我們必須同時使用其他幾個屬性，例如min（範圍的起始值）、max（範圍的結束值）、step（步長間隔）和value（預設值）。
範圍屬性廣泛用於電子商務網站，在過濾部分中用於建立滑塊，以便使用者可以設定價格範圍並過濾產品。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Range attribute</h1>
<form action="#">
<label for="Price">Price(between 0 to 1000):</label>
<input type="range" id="price" name="price" min="0" max="1000" step=”50” value=”500”>
<input type="submit">
</form>
</body>
</html>
除此之外，我們還有number屬性，它建立一個接受數字作為輸入的欄位；checkbox屬性，當我們想要建立一個欄位供使用者從給定的複選框中選擇一個選項時使用；date屬性，用於建立一個接受日期作為輸入並遵循dd-mm-yyyy格式的欄位，等等。
結論
總而言之，我們可以同時在input元素中使用所有這些屬性來增強網頁的功能。這些屬性不僅增強了網頁的功能，還提供了內建的錯誤驗證，例如在電子郵件中，我們有特定的格式來檢查有效的電子郵件。
同樣，在其他屬性中，我們有不同的格式，只允許將有效資料傳送到伺服器。透過正確組合這些元素，網站可以變得更加互動和引人入勝。因此，瞭解如何使用input元素是成為成功網頁開發者的重要組成部分。
瀏覽量：270
