HTML5的發展讓前端開發人員能夠更好地創建網站和應用程序。其中，設置手機號是一個常見的應用場景。以下是如何在HTML5中設置手機號的步驟：

<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

這里的input元素的類型是tel，這表示這個輸入框將會被用于輸入電話號碼。使用pattern屬性設置了一個正則表達式，它將檢測輸入的數字是否符合電話號碼格式。例如，3個數字，然后是連字符，然后是另外3個數字，再是另一個連字符和最后的4個數字。這將確保用戶只能輸入正確的電話號碼。

此外，我們還使用了required屬性，這將確保用戶必須填寫此字段，否則將會提示錯誤信息。

另外，還有其他的屬性可以使用，比如maxlength屬性用來限制輸入框的最大字符數；autocomplete屬性用來自動填充用戶的聯系信息等。必要時可以根據需求自行添加。

在設置手機號碼輸入框時，需要考慮兼容性。為了確保頁面在各個現代瀏覽器上都能正確顯示，可以使用一個JavaScript Polyfill庫，如libphonenumber。

總之，HTML5為我們提供了一些方便的工具來設置手機號輸入框。通過結合使用正則表達式和HTML5的各種屬性，我們可以創建一個安全、可靠的電話號碼輸入框。