Tùy chọn đầu vào html

Trong bài viết trước, chúng ta đã nói về

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

2 và các loại

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

3 cơ bản. Bên cạnh đó, HTML còn hỗ trợ nhiều kiểu

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 khác giúp chúng ta tạo ra những biểu mẫu dễ dàng và linh hoạt hơn, phù hợp với nhiều loại câu hỏi truy vấn thông tin từ người dùng. Hãy cùng nói về các kiểu

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 này

Các kiểu biến đầu vào phổ biến khác

HTML có tất cả 3 nhóm

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 phổ biến bao gồm

1. Các trường nhập văn bản
   • Trường văn bản - trường nhập văn bản 1 dòng
   • Text-area - field input text nhiều dòng
2. Các danh sách lựa chọn
   • Nút radio - nhóm các nút lựa chọn hình tròn, hỗ trợ 1 lựa chọn
   • Hộp kiểm - nhóm các ô lựa chọn hình vuông, hỗ trợ nhiều lựa chọn
   • Danh sách thả xuống - danh sách lựa chọn dạng cuộn có thể đóng mở, hỗ trợ 1 lựa chọn
3. Các loại đầu vào khác nhau
   • Nút chọn tệp để tải lên từ máy tính của người dùng
   • Chọn ngày tháng trong lịch hiển thị ở dạng bảng
   • Chọn sắc màu trong bảng màu
   • v. v

1. Trường văn bản & Vùng văn bản

Chúng ta đã gặp

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

7 trong ví dụ của bài viết trước rồi. Còn về

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

8 thì thực sự không có gì khác biệt cả. Chỉ đơn giản là một cái

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

7 được mở rộng xuống nhiều dòng. To create a

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

8, you use thẻ

   Xuất sứ:
   
       Trái Đất
      Sao Hỏa
      Mặt Trăng
   
   
   Xác nhận :D

1 instead of

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

3

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

1

2. Nút radio & Hộp kiểm và danh sách thả xuống

Các kiểu

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 phổ biến tiếp theo là nút radio, hộp kiểm và danh sách thả xuống, giúp chúng tôi cung cấp các câu trả lời và lựa chọn cho người dùng

Nút radio & Hộp kiểm

Radio-button and check-box được tạo bằng cách sử dụng các thẻ

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

3 và có cách hiển thị khá giống nhau. Trong khi nút radio chỉ hỗ trợ 1 lựa chọn duy nhất thì hộp kiểm Hỗ trợ người dùng chọn nhiều hơn 1 câu trả lời

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

Bạn có thể nhận thấy một số thuộc tính mới được sử dụng ở đây - đó là thuộc tính

   Xuất sứ:
   
       Trái Đất
      Sao Hỏa
      Mặt Trăng
   
   
   Xác nhận :D

5 và thuộc tính

   Xuất sứ:
   
       Trái Đất
      Sao Hỏa
      Mặt Trăng
   
   
   Xác nhận :D

6

Lý do là vì các

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 này không hỗ trợ người dùng nhập câu trả lời bằng cách nhập chữ, do đó chúng ta cần phải chỉ định các giá trị mặc định cho mỗi lựa chọn bằng thuộc tính

   Xuất sứ:
   
       Trái Đất
      Sao Hỏa
      Mặt Trăng
   
   
   Xác nhận :D

5. Thuộc tính này cũng có thể được sử dụng để thiết lập nội dung mặc định cho

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

7 và

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

8

Thuộc tính

   Xuất sứ:
   
       Trái Đất
      Sao Hỏa
      Mặt Trăng
   
   
   Xác nhận :D

6 được sử dụng để thiết lập một lựa chọn được đánh dấu mặc định

Danh sách thả xuống

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

22 được sử dụng trong trường hợp có rất nhiều lựa chọn mà chúng ta cần cung cấp cho người dùng. Ví dụ điển hình thường thấy là danh sách quốc tịch, hay danh sách địa danh thành phố, quận, phường, v. v

   Xuất sứ:
   
       Trái Đất
      Sao Hỏa
      Mặt Trăng
   
   
   Xác nhận :D

3. File-browser & Các kiểu đầu vào khác

Đây là cách để tạo một nút nhấn mà khi người dùng nhấp chuột vào, trình duyệt web sẽ mở một cửa sổ duyệt thư mục và chọn tệp đã đăng tải. Ví dụ thường thấy là các nút đăng tải hình ảnh hoặc âm thanh, video của các mạng xã hội

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

2

Bên cạnh các kiểu

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 phổ biến mà chúng tôi đã liệt kê ở phía trên, HTML còn hỗ trợ rất nhiều kiểu

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 khác nữa rất tuyệt vời và được hỗ trợ bởi các trình duyệt web được cập nhật thường xuyên với phiên bản mới. Đây là liên kết tham khảo về danh sách đầy đủ các kiểu

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 của HTML 5 phiên bản mới nhất hiện tại. Danh sách các kiểu

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4

Thẻ

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

27

Đây là một tiện ích được thiết kế để sử dụng đi kèm với các nút radio và hộp kiểm. Thẻ tiện ích này sẽ giúp chúng ta cung cấp trải nghiệm sử dụng tốt hơn cho người dùng thiết bị di động. Với thẻ

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

28, chúng ta có thể tạo ra một vùng có thể nhận chuột và gắn với các tùy chọn ô nhỏ. Bằng cách này, người dùng sẽ có thể chạm vào phần chữ mô tả ở bên cạnh ô lựa chọn để đánh dấu vào ô đó thay vì phải cố gắng nhấn vài lần để trúng 1 ô lựa chọn nhỏ

Cách đơn giản nhất để gắn một

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

28 vào một lựa chọn là bạn chỉ cần đặt luôn phần tử

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 bên trong thẻ

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

27

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4

Một

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

28 cũng có thể được gắn với một

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 bằng cách sử dụng thuộc tính

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

44. Trong trường hợp này, chúng ta sẽ cần thêm

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

45 cho

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

0

Bài viết về các kiểu

   Radio-buttons:
   Nam  |
   Nữ  |
   Khác 
   
   Check-boxes:
   Đỏ  |
   Xanh lá  |
   Xanh Dương 
   
   Gửi

4 khác trong HTML của chúng ta tới đây là kết thúc. Trong bài viết tiếp theo, chúng ta sẽ tìm hiểu về một số thẻ hỗ trợ tạo ra các khung vẽ đồ họa, sử dụng cho nhu cầu trình bày các nội dung đồ họa được tạo ra bởi các phần mềm thiết kế