7.1 Trường văn bản
HTML cung cấp nhiều kiểu nhập liệu khác nhau cho các phần tử form, cho phép người dùng nhập dữ liệu ở các định dạng khác nhau như văn bản, email, ngày tháng và nhiều hơn nữa. Hãy cùng tìm hiểu chi tiết các kiểu nhập liệu khác nhau và cách sử dụng chúng.
Phần tử <input type="text"> được sử dụng để nhập văn bản đơn dòng. Đây là kiểu nhập liệu cơ bản nhất và được sử dụng rất thường xuyên.
Ví dụ sử dụng:
<label for="name">Tên:</label>
<input type="text" id="name" name="name">
Thuộc tính
maxlength: giới hạn số ký tự tối đaplaceholder: văn bản chỗ trống hiển thị bên trong trường nhập liệu cho đến khi người dùng bắt đầu nhập dữ liệurequired: chỉ ra rằng trường này bắt buộc phải điền
Ví dụ với thuộc tính:
<label for="username">Tên người dùng:</label>
<input type="text" id="username" name="username" maxlength="20" placeholder="Nhập tên người dùng" required>
7.2 Trường cho số
Phần tử <input type="number"> được sử dụng để nhập giá trị số. Nó cho phép giới hạn
chỉ nhập số và có thể bao gồm mũi tên để tăng hoặc giảm giá trị.
Ví dụ sử dụng:
<label for="quantity">Số lượng:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
Thuộc tính
min: đặt giá trị tối thiểu có thể chấp nhậnmax: đặt giá trị tối đa có thể chấp nhậnstep: xác định bước thay đổi giá trịvalue: đặt giá trị khởi đầu
7.3 Trường cho email
Phần tử <input type="email"> dùng để nhập địa chỉ email. Nó kiểm tra
xem văn bản nhập vào có đúng định dạng địa chỉ email không.
Ví dụ sử dụng:
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
Thuộc tính
multiple: cho phép nhập nhiều địa chỉ email, được ngăn cách bằng dấu phẩypattern: đặt biểu thức chính quy để kiểm tra thêm dữ liệu nhập vào
Ví dụ với thuộc tính:
<label for="emails">Địa chỉ Email (ngăn cách bằng dấu phẩy):</label>
<input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
7.4 Trường cho số điện thoại
Phần tử <input type="tel"> dùng để nhập số điện thoại. Nó không kiểm tra định dạng số, nhưng cho phép thiết lập mặt nạ nhập liệu qua thuộc tính pattern.
Ví dụ sử dụng:
<label for="phone">Điện thoại:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
Thuộc tính
pattern: đặt biểu thức chính quy để kiểm tra định dạng số đã nhập.
Ví dụ với thuộc tính:
<label for="phone">Điện thoại:</label>
<input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
7.5 Trường cho ngày tháng
Phần tử <input type="date"> dùng để nhập ngày tháng. Trong các trình duyệt hỗ trợ, có một widget lịch xuất hiện để tiện lợi chọn ngày.
Ví dụ sử dụng:
<label for="birthday">Ngày sinh:</label>
<input type="date" id="birthday" name="birthday">
Thuộc tính
min: đặt ngày tối thiểu có thể chấp nhậnmax: đặt ngày tối đa có thể chấp nhận
Ví dụ với thuộc tính:
<label for="appointment">Ngày hẹn:</label>
<input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
7.6 Trường cho thời gian
Phần tử <input type="time"> dùng để nhập giờ. Trong các trình duyệt hỗ trợ, có một widget để chọn giờ xuất hiện.
Ví dụ sử dụng:
<label for="meeting_time">Thời gian gặp:</label>
<input type="time" id="meeting_time" name="meeting_time">
Thuộc tính
min: đặt giờ tối thiểu có thể chấp nhậnmax: đặt giờ tối đa có thể chấp nhậnstep: xác định bước thay đổi giờ
Ví dụ với thuộc tính:
<label for="alarm">Báo thức:</label>
<input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
7.7 Trường cho nhập URL
Phần tử <input type="url"> dùng để nhập địa chỉ web (URL). Nó kiểm tra xem
văn bản nhập vào có đúng định dạng URL không.
Ví dụ sử dụng:
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
Thuộc tính
pattern: đặt biểu thức chính quy để kiểm tra thêm dữ liệu nhập vào.
Ví dụ với thuộc tính:
<label for="personal_website">Website cá nhân:</label>
<input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
7.8 Trường cho nhập mật khẩu
Phần tử <input type="password"> dùng để nhập mật khẩu. Dữ liệu nhập vào sẽ bị ẩn,
thay thế bằng các ký tự như dấu sao hoặc chấm.
Ví dụ sử dụng:
<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password">
Thuộc tính
maxlength: giới hạn số ký tự tối đaplaceholder: văn bản chỗ trốngrequired: chỉ ra rằng trường này bắt buộc phải điền
Ví dụ với thuộc tính:
<label for="new-password">Mật khẩu mới:</label>
<input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Nhập mật khẩu" required>
7.9 Trường cho giá trị trong phạm vi
Phần tử <input type="range"> dùng để nhập giá trị trong phạm vi xác định. Nó hiển thị dưới dạng thanh trượt.
Ví dụ sử dụng:
<label for="volume">Âm lượng:</label>
<input type="range" id="volume" name="volume">
Thuộc tính
min: đặt giá trị tối thiểu có thể chấp nhậnmax: đặt giá trị tối đa có thể chấp nhậnstep: xác định bước thay đổi giá trịvalue: đặt giá trị khởi đầu
Ví dụ với thuộc tính:
<label for="brightness">Độ sáng:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
7.10 Trường cho chọn màu
Phần tử <input type="color"> dùng để chọn màu. Trong các trình duyệt hỗ trợ, có một widget chọn màu xuất hiện.
Ví dụ sử dụng:
<label for="favcolor">Chọn màu yêu thích của bạn:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
Thuộc tính
value: đặt màu ban đầu.
7.11 Trường cho tìm kiếm
Phần tử <input type="search"> dùng để nhập truy vấn tìm kiếm. Trong hầu hết các trình duyệt
nó có sẵn các kiểu dáng và chức năng để xóa văn bản đã nhập.
Ví dụ sử dụng:
<label for="search">Tìm kiếm:</label>
<input type="search" id="search" name="search" placeholder="Nhập truy vấn tìm kiếm">
GO TO FULL VERSION