HTML - Thuộc tính Input: Hướng dẫn chi tiết cho người mới bắt đầu
Xin chào các bạn đang học lập trình web! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị này qua thế giới của các thuộc tính input trong HTML. Là một người đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể đảm bảo rằng việc thành thạo những khái niệm này sẽ là bước ngoặt trong sự nghiệp phát triển web của bạn. Hãy cùng bắt đầu!
Thuộc tính Input là gì?
Trước khi chúng ta đi vào chi tiết, hãy hiểu Thuộc tính Input là gì. Trong HTML, thẻ <input> được sử dụng để tạo các loại form controls khác nhau. Thuộc tính là các thuộc tính bổ sung mà chúng ta có thể thêm vào các phần tử input để thay đổi hành vi hoặc giao diện của chúng.
Hãy tưởng tượng thuộc tính như những hướng dẫn đặc biệt bạn đưa ra cho các trường input. Cũng giống như bạn có thể nói với một chú chó mới "ngồi" hoặc "nằm", bạn có thể nói với các trường input của mình rằng chúng chỉ chấp nhận số, có độ dài cụ thể hoặc hiển thị văn bản placeholder.
Các ví dụ về Thuộc tính của thẻ Input
Hãy cùng khám phá một số thuộc tính input phổ biến nhất với các ví dụ. Tôi sẽ cung cấp một đoạn mã cho từng thuộc tính, kèm theo giải thích về tác dụng của nó.
1. Thuộc tính Type
<input type="text" name="username">
<input type="password" name="password">
<input type="email" name="email">
<input type="number" name="age">
<input type="date" name="birthdate">Thuộc tính type chỉ định loại phần tử input cần hiển thị. Trong ví dụ trên, chúng ta có:
- Một trường văn bản cho tên người dùng
- Một trường mật khẩu che kín các ký tự đã nhập
- Một trường email validate định dạng email
- Một trường số cho tuổi
- Một trường ngày tháng hiển thị trình chọn ngày
2. Thuộc tính Value
<input type="text" name="country" value="Hoa Kỳ">Thuộc tính value chỉ định giá trị ban đầu cho một trường input. Trong trường hợp này, "Hoa Kỳ" sẽ được điền sẵn trong hộp văn bản khi trang tải.
3. Thuộc tính Placeholder
<input type="text" name="search" placeholder="Nhập từ khóa tìm kiếm của bạn">Thuộc tính placeholder chỉ định một gợi ý mô tả giá trị mong đợi của một trường input. Nó được hiển thị trong trường input trước khi người dùng nhập giá trị.
4. Thuộc tính Required
<input type="text" name="fullname" required>Thuộc tính required chỉ định rằng một trường input phải được điền trước khi gửi form. Nếu người dùng cố gắng gửi form mà không điền trường này, họ sẽ thấy một thông báo lỗi.
5. Thuộc tính Disabled
<input type="text" name="username" value="johndoe" disabled>Thuộc tính disabled chỉ định rằng một trường input nên bị vô hiệu hóa (không thể sử dụng và không thể nhấp). Điều này thường được sử dụng cho các trường không nên được chỉnh sửa bởi người dùng.
6. Thuộc tính Readonly
<input type="text" name="email" value="[email protected]" readonly>Thuộc tính readonly chỉ định rằng một trường input chỉ đọc (không thể chỉnh sửa). Khác với disabled, các trường readonly vẫn được gửi khi gửi form.
7. Thuộc tính Min và Max
<input type="number" name="age" min="18" max="100">Các thuộc tính min và max chỉ định giá trị tối thiểu và tối đa cho một trường input. Điều này đặc biệt hữu ích cho các trường số.
8. Thuộc tính Pattern
<input type="text" name="username" pattern="[A-Za-z0-9]{3,}" title="Tên người dùng phải dài ít nhất 3 ký tự và chỉ chứa chữ cái và số">Thuộc tính pattern chỉ định một biểu thức chính quy mà giá trị của input được kiểm tra. Trong ví dụ này, tên người dùng phải dài ít nhất 3 ký tự và chỉ chứa chữ cái và số.
9. Thuộc tính Autofocus
<input type="text" name="search" autofocus>Thuộc tính autofocus chỉ định rằng một trường input nên tự động nhận focus khi trang tải.
10. Thuộc tính Multiple
<input type="file" name="photos" multiple>Thuộc tính multiple chỉ định rằng người dùng được phép nhập nhiều giá trị trong một trường input. Điều này đặc biệt hữu ích cho các trường file upload cho phép nhiều tệp.
Kết hợp tất cả lại với nhau
Bây giờ chúng ta đã xem xét từng thuộc tính, hãy xem cách chúng ta có thể kết hợp chúng để tạo một form phức tạp và chức năng hơn:
<form action="/submit" method="post">
<input type="text" name="username" placeholder="Nhập tên người dùng của bạn" required autofocus>
<input type="email" name="email" placeholder="Nhập email của bạn" required>
<input type="password" name="password" placeholder="Nhập mật khẩu của bạn" required pattern=".{8,}" title="Mật khẩu phải dài ít nhất 8 ký tự">
<input type="number" name="age" min="18" max="100" placeholder="Nhập tuổi của bạn">
<input type="file" name="profile_picture" accept="image/*">
<input type="submit" value="Đăng ký">
</form>Trong form này, chúng ta có:
- Một trường tên người dùng bắt buộc và tự động nhận focus
- Một trường email bắt buộc
- Một trường mật khẩu bắt buộc với độ dài tối thiểu là 8 ký tự
- Một trường tuổi chỉ chấp nhận giá trị từ 18 đến 100
- Một trường file chỉ chấp nhận tệp hình ảnh
- Một nút gửi để gửi dữ liệu form
Bảng tóm tắt các Thuộc tính Input
Dưới đây là bảng tóm tắt các thuộc tính chúng ta đã thảo luận:
| Thuộc tính | Mô tả | Ví dụ |
|---|---|---|
| type | Chỉ định loại input | <input type="text"> |
| value | Chỉ định giá trị ban đầu | <input type="text" value="John"> |
| placeholder | Chỉ định gợi ý | <input type="text" placeholder="Nhập tên"> |
| required | Làm cho trường bắt buộc | <input type="text" required> |
| disabled | Vô hiệu hóa trường input | <input type="text" disabled> |
| readonly | Làm cho trường chỉ đọc | <input type="text" readonly> |
| min | Chỉ định giá trị tối thiểu | <input type="number" min="0"> |
| max | Chỉ định giá trị tối đa | <input type="number" max="100"> |
| pattern | Chỉ định biểu thức chính quy | <input type="text" pattern="[A-Za-z]{3}"> |
| autofocus | Tự động focus trường | <input type="text" autofocus> |
| multiple | Cho phép nhiều giá trị | <input type="file" multiple> |
Nhớ rằng, chìa khóa để thành thạo các thuộc tính input trong HTML là thực hành. Hãy thử tạo các form khác nhau, thử nghiệm với các thuộc tính khác nhau và xem chúng ảnh hưởng như thế nào đến trải nghiệm người dùng. Chúc các bạn lập trình vui vẻ!
Credits: Image by storyset