Việt1. Giới thiệu
HTML Input Types (các loại đầu vào trong HTML) xác định loại dữ liệu mà người dùng có thể nhập vào trong các trường của biểu mẫu. Thẻ <input> trong HTML có thể chấp nhận nhiều loại dữ liệu khác nhau nhờ vào thuộc tính type. Sự đa dạng về các loại input giúp xây dựng các biểu mẫu thân thiện và hiệu quả hơn, từ nhập văn bản đơn giản đến các loại nhập liệu phức tạp như ngày tháng, email, số, tệp tin, v.v.
Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về các loại input khác nhau trong HTML và cách sử dụng chúng trong các biểu mẫu.
2. Các loại Input phổ biến trong HTML
a. type="text" – nhập văn bản
<input type="text"> là loại input phổ biến nhất, cho phép người dùng nhập văn bản ngắn như tên, địa chỉ, hoặc các thông tin khác.
Ví dụ:
<form>
<label for="name">Họ và tên:</label>
<input type="text" id="name" name="name" placeholder="Nhập họ và tên của bạn">
</form>placeholder: Hiển thị văn bản gợi ý bên trong trường nhập liệu.
b. type="password" – nhập mật khẩu
<input type="password"> cho phép người dùng nhập mật khẩu. Các ký tự trong trường này sẽ được ẩn đi bằng dấu sao hoặc dấu chấm để bảo mật.
Ví dụ:
<form>
<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password" required>
</form>required: Bắt buộc người dùng phải điền trường này.
c. type="email" – nhập email
<input type="email"> được sử dụng để thu thập địa chỉ email. Loại input này sẽ tự động kiểm tra định dạng email hợp lệ trước khi gửi biểu mẫu.
Ví dụ:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</form>d. type="url" – nhập URL
<input type="url"> được sử dụng để thu thập địa chỉ URL (liên kết trang web). Trình duyệt sẽ kiểm tra xem người dùng có nhập đúng định dạng URL hay không.
Ví dụ:
<form>
<label for="website">Trang web:</label>
<input type="url" id="website" name="website" placeholder="https://example.com" required>
</form>e. type="number" – nhập số
<input type="number"> cho phép người dùng nhập số. Bạn có thể sử dụng thuộc tính min, max, và step để kiểm soát giá trị số mà người dùng có thể nhập.
Ví dụ:
<form>
<label for="age">Tuổi:</label>
<input type="number" id="age" name="age" min="18" max="100">
</form>min: Giá trị tối thiểu mà người dùng có thể nhập.max: Giá trị tối đa mà người dùng có thể nhập.
f. type="tel" – nhập số điện thoại
<input type="tel"> được sử dụng để nhập số điện thoại. Mặc dù nó không tự động xác minh tính hợp lệ của số điện thoại, nhưng trình duyệt sẽ hiển thị bàn phím số trên các thiết bị di động khi người dùng nhập liệu.
Ví dụ:
<form>
<label for="phone">Số điện thoại:</label>
<input type="tel" id="phone" name="phone" placeholder="0123456789">
</form>g. type="date" – nhập ngày
<input type="date"> cho phép người dùng chọn một ngày từ công cụ chọn ngày của trình duyệt. Trình duyệt hiển thị giao diện giúp người dùng chọn ngày dễ dàng.
Ví dụ:
<form>
<label for="birthday">Ngày sinh:</label>
<input type="date" id="birthday" name="birthday">
</form>h. type="time" – nhập giờ
<input type="time"> cho phép người dùng nhập giờ hoặc chọn từ công cụ chọn giờ.
Ví dụ:
<form>
<label for="time">Chọn giờ:</label>
<input type="time" id="time" name="time">
</form>i. type="datetime-local" – nhập ngày và giờ
<input type="datetime-local"> cho phép người dùng chọn cả ngày và giờ mà không có múi giờ.
Ví dụ:
<form>
<label for="appointment">Ngày và giờ hẹn:</label>
<input type="datetime-local" id="appointment" name="appointment">
</form>j. type="month" – chọn tháng
<input type="month"> cho phép người dùng chọn một tháng và năm.
Ví dụ:
<form>
<label for="expiry">Chọn tháng hết hạn:</label>
<input type="month" id="expiry" name="expiry">
</form>k. type="range" – thanh trượt giá trị
<input type="range"> cho phép người dùng chọn một giá trị trong một phạm vi nhất định bằng cách kéo thanh trượt. Các thuộc tính min, max, và step có thể được sử dụng để kiểm soát phạm vi và khoảng bước nhảy.
Ví dụ:
<form>
<label for="volume">Âm lượng:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10">
</form>l. type="color" – chọn màu sắc
<input type="color"> cho phép người dùng chọn một màu từ bảng chọn màu của trình duyệt.
Ví dụ:
<form>
<label for="favcolor">Chọn màu yêu thích:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
</form>value: Xác định màu mặc định được chọn (mã màu hex).
m. type="checkbox" – hộp kiểm
<input type="checkbox"> cho phép người dùng chọn một hoặc nhiều tùy chọn từ một danh sách. Người dùng có thể chọn nhiều checkbox cùng lúc.
Ví dụ:
<form>
<p>Sở thích:</p>
<input type="checkbox" id="coding" name="hobby" value="coding">
<label for="coding">Lập trình</label><br>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Đọc sách</label><br>
</form>n. type="radio" – các lựa chọn
<input type="radio"> cho phép người dùng chọn một trong nhiều tùy chọn. Người dùng chỉ có thể chọn một giá trị trong cùng một nhóm radio buttons.
Ví dụ:
<form>
<p>Giới tính:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Nam</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Nữ</label><br>
</form>o. type="file" – tải tệp lên
<input type="file"> cho phép người dùng chọn và tải lên tệp từ máy tính của họ. Bạn có thể giới hạn loại tệp mà người dùng có thể tải lên bằng thuộc tính accept.
Ví dụ:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="avatar">Tải lên ảnh đại diện:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">
<input type="submit" value="Tải lên">
</form>p. type="submit" – nút submit form
<input type="submit"> tạo ra một nút cho phép người dùng gửi dữ liệu biểu mẫu đến máy chủ.
Ví dụ:
<form action="/submit" method="post">
<input type="submit" value="Gửi biểu mẫu">
</form>q. type="reset" – nút xóa form
<input type="reset"> tạo ra một nút cho phép người dùng xóa tất cả dữ liệu đã nhập trong biểu mẫu.
Ví dụ:
<form>
<input type="reset" value="Xóa tất cả">
</form>r. type="hidden" – trường ẩn
<input type="hidden"> cho phép gửi dữ liệu đến máy chủ mà người dùng không thể nhìn thấy hoặc chỉnh sửa trực tiếp trong biểu mẫu. Thường được sử dụng để gửi thông tin không liên quan đến người dùng nhưng quan trọng với máy chủ.
Ví dụ:
<form action="/submit" method="post">
<input type="hidden" name="userid" value="12345">
<input type="submit" value="Gửi biểu mẫu">
</form>3. Ví dụ về HTML Input Types
Dưới đây là một ví dụ về cách sử dụng nhiều loại input trong một biểu mẫu:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về HTML Input Types - CodeTutHub</title>
</head>
<body>
<h1>Đăng ký tài khoản</h1>
<form action="/submit_registration" method="post" enctype="multipart/form-data">
<label for="name">Họ và tên:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="birthday">Ngày sinh:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<label for="color">Chọn màu yêu thích:</label>
<input type="color" id="color" name="color"><br><br>
<label for="avatar">Tải lên ảnh đại diện:</label>
<input type="file" id="avatar" name="avatar" accept="image/*"><br><br>
<input type="submit" value="Đăng ký">
</form>
</body>
</html>4. Kết luận
HTML Input Types cung cấp nhiều tùy chọn khác nhau để thu thập dữ liệu từ người dùng, từ các trường nhập văn bản cơ bản đến các tùy chọn phức tạp hơn như tải lên tệp hoặc chọn màu sắc. Hiểu rõ từng loại input sẽ giúp bạn xây dựng các biểu mẫu thân thiện và dễ sử dụng, giúp người dùng dễ dàng nhập và gửi thông tin.
Hãy sử dụng đúng loại input cho đúng mục đích để tạo ra các biểu mẫu hiệu quả và trực quan trên trang web của bạn!
