• Trang chủ
• Hướng dẫn HTML
• Các kiểu nhập mới HTML5

Các kiểu nhập mới HTML5

Trong hướng dẫn này, bạn sẽ tìm hiểu về các kiểu nhập liệu mới đã được giới thiệu trong HTML5.

Các kiểu nhập liệu mới trong HTML5

HTML5 giới thiệu một số loại <input> mới như email, ngày, giờ, màu sắc, phạm vi, v.v. để cải thiện trải nghiệm người dùng và làm cho các biểu mẫu tương tác hơn. Tuy nhiên, nếu trình duyệt không nhận dạng được các kiểu nhập mới này, trình duyệt sẽ coi chúng như một hộp văn bản bình thường.

Trong phần này, chúng ta sẽ xem xét ngắn gọn từng loại đầu vào mới sau:

Cũng có một kiểu đầu vào datetime để nhập ngày và giờ, nhưng hiện nay nó đã lỗi thời.

Kiểu nhập liệu Màu sắc

Kiểu đầu vào color cho phép người dùng chọn màu từ bộ chọn màu và trả về giá trị màu ở định dạng thập lục phân ( #rrggbb). Nếu bạn không chỉ định giá trị, giá trị mặc định #000000 là màu đen.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<form>
    <label for="mycolor">Select Color:</label>
    <input type="color" value="#00ff00" id="mycolor">
</form>

Kiểu nhập liệu Ngày

Kiểu đầu vào date cho phép người dùng chọn ngày từ lịch thả xuống.

Giá trị ngày bao gồm năm, tháng và ngày, nhưng không bao gồm thời gian.

<form>
    <label for="mydate">Select Date:</label>
    <input type="date" value="2019-04-15" id="mydate">
</form>

Kiểu nhập liệu datetime-local

Kiểu đầu vào datetime-local cho phép người dùng chọn cả ngày và giờ địa phương, bao gồm năm, tháng và ngày cũng như thời gian tính bằng giờ và phút.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<form>
    <label for="mydatetime">Choose Date and Time:</label>
    <input type="datetime-local" id="mydatetime">
</form>

Kiểu nhập liệu Email

Kiểu đầu vào email cho phép người dùng nhập địa chỉ e-mail. Nó rất giống với kiểu nhập văn bản tiêu chuẩn, nhưng nếu nó được sử dụng kết hợp với thuộc tính required, trình duyệt có thể tìm kiếm các mẫu để đảm bảo địa chỉ e-mail được định dạng đúng sẽ được nhập.

Hãy thử ví dụ này bằng cách nhập bất kỳ địa chỉ e-mail nào để xem nó thực sự hoạt động như thế nào:

<form>
    <label for="myemail">Enter Email Address:</label>
    <input type="email" id="myemail" required>
</form>

Kiểu nhập liệu Tháng

Loại đầu vào month cho phép người dùng chọn tháng và năm từ lịch thả xuống.

Giá trị là một chuỗi có định dạng "YYYY-MM", trong đó YYYY là năm gồm bốn chữ số và MM là số tháng. Hãy thử một ví dụ để xem cách hoạt động cơ bản của điều này:

<form>
    <label for="mymonth">Select Month:</label>
    <input type="month" id="mymonth">
</form>

Kiểu nhập liệu Số

Loại đầu vào number có thể được sử dụng để nhập giá trị số. Bạn cũng có thể hạn chế người dùng chỉ nhập các giá trị được chấp nhận bằng cách sử dụng các thuộc tính bổ sung min maxvà step.

Ví dụ sau sẽ cho phép bạn nhập giá trị số từ 1 đến 10.

<form>
    <label for="mynumber">Enter a Number:</label>
    <input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>

Kiểu nhập liệu phạm vi

Loại đầu vào range có thể được sử dụng để nhập giá trị số trong một phạm vi được chỉ định. Nó hoạt động rất giống với input number, nhưng nó cung cấp một điều khiển đơn giản hơn để nhập một số.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<form>
    <label for="mynumber">Select a Number:</label>
    <input type="range" min="1" max="10" step="0.5" id="mynumber">    
</form>

Kiểu nhập liệu Tìm kiếm

Loại đầu vào search có thể được sử dụng để tạo các trường đầu vào tìm kiếm.

Trường tìm kiếm thường hoạt động giống như trường văn bản thông thường, nhưng trong một số trình duyệt như Chrome và Safari, ngay khi bạn bắt đầu nhập vào hộp tìm kiếm, một dấu thập nhỏ xuất hiện ở bên phải của trường cho phép bạn nhanh chóng xóa trường tìm kiếm. Hãy thử một ví dụ để xem nó hoạt động như thế nào:

<form>
    <label for="mysearch">Search Website:</label>
    <input type="search" id="mysearch">
</form>

Kiểu nhập liệu Tel

Loại đầu vào tel có thể được sử dụng để nhập số điện thoại.

Các trình duyệt không hỗ trợ xác thực đầu vào điện thoại tự nhiên. Tuy nhiên, bạn có thể sử dụng thuộc tính placeholder để giúp người dùng nhập định dạng chính xác cho số điện thoại hoặc chỉ định một biểu thức chính quy để xác thực thông tin người dùng nhập bằng thuộc tính pattern. Hãy xem một ví dụ:

<form>
    <label for="myphone">Telephone Number:</label>
    <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>

Kiểu nhập liệu Thời gian

Loại đầu vào time có thể được sử dụng để nhập thời gian (giờ và phút).

Trình duyệt có thể sử dụng định dạng 12 hoặc 24 giờ cho thời gian nhập, dựa trên cài đặt thời gian của hệ thống cục bộ.

<form>
    <label for="mytime">Select Time:</label>
    <input type="time" id="mytime">
</form>

Kiểu nhập liệu URL

Loại đầu vào url có thể được sử dụng để nhập địa chỉ URL hoặc địa chỉ web.

Bạn có thể sử dụng thuộc tính multiple này để nhập nhiều URL. Ngoài ra, nếu thuộc tính required được chỉ định, trình duyệt sẽ tự động thực hiện xác thực để đảm bảo rằng chỉ văn bản phù hợp với định dạng chuẩn cho URL được nhập vào hộp nhập liệu. Hãy xem cách này hoạt động như thế nào:

<form>
    <label for="myurl">Enter Website URL:</label>
    <input type="url" id="myurl" required>
</form>

Kiểu nhập liệu Tuần

Loại đầu vào week cho phép người dùng chọn một tuần và năm từ lịch thả xuống.

Hãy thử ví dụ sau để hiểu cách hoạt động của điều này:

<form>
    <label for="myweek">Select Week:</label>
    <input type="week" id="myweek">
</form>