資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML5 在表單中新增電話號碼？
本文將要執行的任務是使用 HTML5 在表單中新增電話號碼。我們知道使用電話號碼的眾多好處。如果您需要收集使用者的個人資訊，電話號碼至關重要。此外，使用者可能會在表單服務上收到許多訊息或通知。
讓我們深入本文，以便更好地瞭解如何使用 HTML5 在表單中新增電話號碼。這可以透過使用 <input type="tel"> 來實現。
使用 <input> 標籤
可以使用型別為“tel”的 <input> 元素輸入和編輯電話號碼。與 <input type="email"> 和 <input type="url"> 不同，在提交表單之前，不會自動將輸入值檢查為特定格式，因為全球電話號碼格式差異很大。
語法
以下是 <input type = "tel"> 的語法。
<input type="tel">
示例
讓我們看下面的例子，我們將建立一個簡單的表單並新增一個電話輸入欄位。
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#ABEBC6 ">
<form> FULLNAME: <input type="text" placeholder="Enter your Name" />
<br />
<br /> Mobile.No: <input type="tel" placeholder="Enter Mobile Number" />
<br />
<br />
<button>Submit</button>
</form>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，顯示供使用者在表單中輸入姓名和手機號碼的輸入欄位，以及網頁上的點選按鈕。
示例
在下面的示例中，我們將建立一個登錄檔單，包括新增電話號碼，並透過指定 size="10" 來控制大小。
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#CCCCFF ">
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="7">
<br>
<br> Phone.No: <input id="telNo" name="telNo" type="tel" size="10" />
<br>
<br>
<button>Sign Up</button>
</form>
</body>
</html>
當以上程式碼執行時，它將生成一個輸出，其中包含一個表單，為使用者提供輸入欄位以及網頁上的點選按鈕，以及 size="10" 用於控制電話號碼的輸入。
示例
以下是一個示例，我們將建立一個表單，允許使用者輸入手機號碼，並使用 min 和 max 屬性。
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#D2B4DE">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
<label for="Lname">Lastname:</label>
<input type="text" id="Lname" name="Lname" minlength="7">
<br>
<br> Mobile.No: <input id="telNo" name="telNo" type="tel" size="26" minlength="10" maxlength="12" />
<br>
<br>
<button>Apply</button>
</form>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，在網頁上顯示錶單，並透過在網頁上提供輸入欄位允許使用者輸入資料。
示例
考慮以下示例，我們將以必填方式在表單中輸入手機號碼並進行驗證。
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#D5F5E3">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
<div>
<label for="phno">Enter Mobile Number:</label>
<input id="phno" name="phno" type="tel" required />
<span class="validity"></span>
</div>
<div>
<button>Apply</button>
</div>
</form>
</body>
</html>
當以上程式碼執行時，它將生成一個包含表單的輸出，以及一個輸入手機號碼的輸入欄位，在提交表單之前必須填寫此欄位，否則當用戶嘗試提交時，將彈出訊息。
更新於: 2023年9月8日
697 次檢視
廣告