Thẻ HTML input tạo trường nhập liệu (input field) mà người dùng có thể chèn dữ liệu. Các input phổ biến bao gồm trường văn bản, hộp kiểm (checkbox), nút radio, và trường email. Thẻ input nên được gán nhãn (labelled) bằng thẻ <label>.
Biểu mẫu trong HTML bao gồm một số phần tử input, được dùng để chấp nhận dữ liệu trên front-end của trang web. Ví dụ, biểu mẫu web có thể chứa input hộp kiểm, input văn bản, và input nút radio mà người dùng có thể tương tác.
Thẻ <input> dùng để định nghĩa phần tử input trong biểu mẫu HTML. Dữ liệu gửi qua thẻ input có thể được biểu diễn trong nhiều kiểu dữ liệu. Chúng bao gồm từ văn bản đến số đến phản hồi có/không.
Hướng dẫn này sẽ thảo luận, tham khảo ví dụ, cách sử dụng thẻ <input> để chấp nhận đầu vào biểu mẫu trong trang web front-end. Sau khi đọc xong hướng dẫn này, bạn sẽ thành thạo việc sử dụng thẻ HTML <input> để chấp nhận đầu vào người dùng.
Biểu mẫu HTML
Biểu mẫu là phần thiết yếu của nhiều trang web cho phép người dùng tương tác với trang. Biểu mẫu cho phép người dùng gửi dữ liệu đến trang. Dữ liệu này có thể được xử lý bởi client hoặc máy chủ back-end và cơ sở dữ liệu.
Trong HTML, biểu mẫu web được khai báo trong phần tử <form>. Cú pháp cho phần tử <form>:
<form> ... Các phần tử biểu mẫu ... </form>
Bên trong thẻ <form> là nơi lưu trữ các phần tử bên trong biểu mẫu. Phần tử biểu mẫu có thể bao gồm trường văn bản, nút gửi, nút radio, hộp văn bản nhiều dòng, và các kiểu dữ liệu input khác được chấp nhận trong HTML.
HTML Input
Phần tử <input> định nghĩa trường biểu mẫu mà người truy cập có thể gửi dữ liệu. <input> hỗ trợ các trường như bộ chọn ngày, hộp kiểm, nút bấm, và tải tệp lên.
Cú pháp cho phần tử <input> như sau:
<input type="inputType">
Phần tử <input> chấp nhận một số thuộc tính, nhưng thuộc tính chính bạn phải chỉ định là thuộc tính type. Nếu bạn không chỉ định thuộc tính type, phần tử <input> sẽ không xuất hiện trên trang web. Điều này là vì phần tử <input> rỗng theo mặc định.
Hãy cùng xem một vài ví dụ để chứng minh cách thẻ HTML <input> hoạt động.
Chúng ta đã được yêu cầu tạo biểu mẫu cho tiệm bánh mì và salad địa phương, Sue's Salads. Biểu mẫu này nên cho phép khách hàng gửi phản hồi dựa trên trải nghiệm tại cửa hàng. Biểu mẫu chúng ta được yêu cầu tạo nên chấp nhận:
- Tên khách hàng (dưới dạng văn bản)
- Hộp kiểm để chỉ ra nếu khách hàng là thành viên chương trình trung thành của cửa hàng (hộp kiểm)
- Đánh giá 1-5 dựa trên trải nghiệm của khách hàng tại cửa hàng (dưới dạng số)
Các loại Input HTML
Thẻ <input> chấp nhận nhiều loại input. Loại input được chỉ định bằng thuộc tính "type". Các loại input phổ biến bao gồm nút bấm, bộ chọn tệp, trường mật khẩu, và trường văn bản.
Dưới đây là danh sách ngắn gọn các loại điều khiển biểu mẫu phổ biến dùng với thẻ <input>:
- button
- file
- checkbox
- password
- number
- radio
- submit
- text (loại input văn bản)
- url
- date (bộ chọn ngày và giờ)
- image
- email (điều khiển input địa chỉ email)
Ví dụ các loại Input HTML
Hãy tạo một vài trường biểu mẫu sử dụng thẻ HTML <input>.
Trường văn bản (Text Fields)
Phần tử <input type="text"> dùng để tạo trường văn bản trong HTML. Giả sử chúng ta muốn tạo trường văn bản hỏi tên khách hàng. Chúng ta có thể làm như sau:
<input type="text" placeholder="Tên của bạn là gì?">
Trong mã, chúng ta tạo trường văn bản với hai thuộc tính. Thuộc tính type được đặt là text, nghĩa là biểu mẫu có thể chấp nhận đầu vào văn bản. Thuộc tính placeholder được gán giá trị "Tên của bạn là gì?".
Văn bản này sẽ xuất hiện như giá trị placeholder cho đến khi người dùng bắt đầu gõ văn bản vào trường.
Mã trả về:
<input type="text" placeholder="Tên của bạn là gì?">
Như bạn thấy, chúng ta đã tạo trường văn bản với giá trị placeholder Tên của bạn là gì?
Hộp kiểm (Checkboxes)
Trong HTML, hộp kiểm được đánh dấu là input loại checkbox:
<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> <label for="loyalty">Bạn có phải thành viên chương trình trung thành?</label>
Mã này tạo nút hộp kiểm hiển thị văn bản "Yes". Nếu hộp kiểm được nhấp, nó sẽ được làm nổi bật.
Hộp kiểm có nhãn "Bạn có phải thành viên chương trình trung thành?". Nếu nhấp vào nhãn, hộp kiểm sẽ bật/tắt. Loại input nhãn (label) thiết yếu cho khả năng tiếp cận (accessibility) vì nó đảm bảo người đọc dễ dàng tìm hiểu nội dung biểu mẫu.
Để tìm hiểu thêm về nhãn HTML, hãy đọc hướng dẫn về thẻ HTML <label>.
Hộp kiểm có một số thuộc tính liên quan:
- Thuộc tính Type. Loại input cần đặt là checkbox.
- ID. Nhớ rằng ID phải duy nhất trong tệp.
- Tên và giá trị (Name and value). Tên và giá trị hữu ích để xử lý dữ liệu thu thập sau khi biểu mẫu gửi.
- Checked. Thuộc tính checked, vì không gán cho gì, được gọi là thuộc tính boolean. Có checked nghĩa là tự động đặt thành true. Mặc định là false, nên chỉ đặt nếu muốn hộp kiểm được tích sẵn.
Nút Radio (Radio Buttons)
Phần tử <input type="radio"> dùng để tạo nút radio trong HTML.
Thuật ngữ "nút radio" đến từ ngành công nghiệp ô tô, kỳ lạ thay. Hệ thống âm thanh ô tô cũ có nút bấm vật lý nơi chỉ một nút có thể nhấn tại một thời điểm. Nếu bạn nhấn lựa chọn khác, nút trước sẽ bị bỏ chọn.
Khác biệt giữa dùng hộp kiểm và bộ nút radio là nút radio chỉ cho chọn một lựa chọn. Các nút còn lại vô hiệu hóa sau khi chọn nên không thể chọn nhiều nút radio. Hộp kiểm, mặt khác, có thể có nhiều lựa chọn.
Để đổi input hộp kiểm thành input nút radio, bạn làm hai việc. Thứ nhất, đổi loại input thành radio. Cuối cùng, đảm bảo giá trị name khớp trên tất cả nút radio. Điều này là gì vô hiệu hóa các nút còn lại khi một nút được chọn.
Giả sử chúng ta muốn tạo trường hỏi người dùng có phải thành viên chương trình trung thành của Sue's Salads. Chúng ta có thể tạo trường bằng mã:
<label for="yes">Có</label> <input type="radio" value="yes" id="yes" /> <label for="no">Không</label> <input type="radio" value="no" id="no" />
Mã trả về:
<label for="yes">Có</label> <input type="radio" value="yes" id="yes"> <label for="no">Không</label> <input type="radio" value="no" id="no">
Trong mã, chúng ta tạo hai nút radio. Nút radio đầu tiên gán nhãn Có và có giá trị yes. Nút radio thứ hai gán nhãn Không và có giá trị no.
Trường số (Number Fields)
Phần tử <input type="number"> dùng để chấp nhận đầu vào số trong biểu mẫu.
Giả sử chúng ta muốn tạo biểu mẫu yêu cầu khách tại Sue's Salads đánh giá trải nghiệm. Khách nên cho điểm số giữa 1 và 5. Chúng ta có thể tạo biểu mẫu web thu thập dữ liệu này bằng mã:
<label>Trải nghiệm tại Sue's Salads tích cực đến đâu (từ 1 đến 5)?</label> <input type="number" min="1" max="5" />
Mã trả về:
<label>Trải nghiệm tại Sue's Salads tích cực đến đâu (từ 1 đến 5)?</label> <input type="number" min="1" max="5">
Chúng ta tạo trường biểu mẫu chấp nhận bất kỳ số nào giữa 1 và 5. Trường này chỉ chấp nhận số. Nếu người dùng thử gõ văn bản, văn bản sẽ không được xử lý.
Ngoài ra, vì trường này loại number, hai mũi tên nhỏ xuất hiện bên trong hộp. Khi nhấp mũi tên lên, giá trị tăng 1. Nhấp mũi tên xuống, giá trị giảm 1.
Kết luận
Thẻ HTML <input> dùng để chấp nhận đầu vào người dùng trong biểu mẫu. Thẻ <input> có thể dùng để chấp nhận giá trị số, văn bản, ngày, phản hồi có/không, và các kiểu dữ liệu khác.
Hướng dẫn này đã thảo luận, tham khảo ví dụ, cách dùng thẻ HTML <input> và các thuộc tính có sẵn cho thẻ <input>. Bây giờ bạn đã sẵn sàng bắt đầu dùng thẻ <input> tạo phần tử trường biểu mẫu như chuyên gia HTML!
Nếu muốn tìm hiểu thêm về HTML, hãy xem hướng dẫn hoàn chỉnh về cách học HTML.