Gần như mọi ứng dụng chúng tôi phát triển bằng HTML đều sử dụng
3 ở đâu đó, nhưng có một loạt các
4 đầu vào mà bạn có thể không biết về. Vì vậy, hãy xem mọi thứ bạn có thể chưa biết về các loại
3Các loại đầu vào HTML phổ biến
Trong HTML, chúng ta có thể cung cấp cho đầu vào một loại cụ thể. Ví dụ: một đầu vào
6 đơn giản, nơi người dùng có thể nhập văn bản vào một hộp, trông như thế này
Các loại đầu vào phổ biến nhất mà chúng tôi sử dụng là
7 - đầu vào biểu mẫu bị ẩn, thường để lưu trữ các giá trị mà người dùng không cần xem
6 - một kiểu nhập văn bản đơn giản
9 - đầu vào trong đó văn bản được đánh dấu sao vì đó là mật khẩu
0 - nút gửi để gửi biểu mẫu
1 - giống như gửi, nhưng nó không gửi biểu mẫu
2 - một nút có thể được chọn, từ một loạt các mục danh sách
3 - một tập hợp các nút có thể được kiểm tra và bỏ chọn
Cũng như các loại cơ bản này
- Ngoài ra còn có
4 - mặc dù không được sử dụng phổ biến nhưng nó có thể được sử dụng cho trường nhập liệu tìm kiếm, hiển thị một dấu gạch chéo nhỏ khi bạn nhập vào trường đó - và chúng tôi cũng có
5, tạo một nút không gửi biểu mẫu và cho biết
5. Nó sẽ đặt lại tất cả các thành phần biểu mẫu khác
Những loại
3 phổ biến này có ở khắp mọi nơi và chúng trông như thế nàyloại ẩn cho đầu vào
[bạn không thể nhìn thấy cái này, vì nó bị ẩn. 😁]
loại văn bản cho đầu vào
Đây là cho bất kỳ đầu vào văn bản
loại mật khẩu cho đầu vào
Mọi thứ được nhập vào đây sẽ là mật khẩu
gửi loại cho đầu vào
Điều này tạo ra một nút gửi
loại nút cho đầu vào
Điều này tạo ra một nút không gửi biểu mẫu
________số 8loại tìm kiếm cho đầu vào
Điều này sẽ hiển thị một chút
8 khi bạn bắt đầu nhập vào nóloại radio cho đầu vào
Loại
2 dành cho một tập hợp các mục, trong đó chúng tôi chỉ có thể chọn một. Chúng ta có thể phân biệt các bộ nút
2 khác nhau bằng cách gán cho chúng các thuộc tính
11 phù hợp. Ví dụ, bên dưới, hai
3 đầu tiên có tên là
13, vì vậy chúng ta chỉ có thể chọn một từ bộ đóGhi chú. rằng
14 là giá trị được gửi khi chúng tôi nhấp vào gửi. Nếu chúng tôi muốn cung cấp cho những thứ này một
15, chúng tôi cần thêm văn bản bên cạnh
3 hoặc sử dụng thẻ html
15
1loại hộp kiểm cho đầu vào
Loại
3 tương tự như
2, chỉ khác là ta có thể chọn nhiều mục ở đây. Một lần nữa, chúng tôi có thể chia chúng thành các bộ, nhưng bạn vẫn có thể chọn nhiều
3
2loại đặt lại cho đầu vào
Điều này sẽ đặt lại tất cả các thành phần đầu vào biểu mẫu khác. Nó tạo ra một nút có nội dung đơn giản là
21
4Hãy thử thay đổi giá trị của đầu vào bên dưới, sau đó nhấp vào Đặt lại
Đầu vào HTML cơ bản với xác thực loại
Ngoài những kiểu đơn giản này, còn có một vài kiểu khác có thể khá hữu ích, chẳng hạn như
22 - cho một số điện thoại
23 - xác thực rằng đầu vào là một url
24 - xác thực rằng đầu vào là một email
25 - xác thực rằng đầu vào là một số
26 - xác thực rằng đầu vào là một phạm vi
Ghi chú. các loại đầu vào này xác thực đầu vào ở phía máy khách, nhưng nó không nên được sử dụng như một phương pháp để đảm bảo rằng đầu vào chỉ chứa loại đó. Ví dụ:
24 chỉ chấp nhận một loại email, nhưng người dùng có thể dễ dàng thay đổi giao diện người dùng để gửi nội dung nào đó không phải là
24. Vì vậy, hãy chắc chắn rằng bạn cũng kiểm tra phần phụ trợloại điện thoại cho đầu vào
Về lý thuyết, điều này sẽ tạo ra lỗi nếu bạn cung cấp số điện thoại không hợp lệ sau khi nhấn gửi - tuy nhiên trên thực tế, nó không thực thi bất kỳ cú pháp cụ thể nào. Vì vậy,
22 khá giống với
6, chỉ khác là nó không thể chứa dấu xuống dòng hoặc xuống dòng
4loại url cho đầu vào
Điều này sẽ không cho phép bất kỳ thứ gì không có định dạng URL
5loại email cho đầu vào
Điều này sẽ chỉ cho phép các email hợp lệ
5loại số cho đầu vào
Điều này sẽ xác nhận rằng đầu vào là một số
7loại phạm vi cho đầu vào
Điều này sẽ tạo ra một thanh phạm vi. Vì nó cho phép chúng tôi chọn một phạm vi, chúng tôi cũng có thể sử dụng các thuộc tính
41,
42 và
43 để đặt giá trị tối thiểu, giá trị tối đa và mức độ tăng của mỗi bước tương ứng
0Ngày Loại đầu vào HTML
Hầu hết chúng ta đều quen thuộc với
44, nhưng có rất nhiều loại ngày cho đầu vào HTML, bao gồm
45 - nhập ngày bất kỳ
46 - cho phép bạn chọn một tháng
47 - cho phép bạn chọn một tuần
48 - cho phép bạn chọn thời gian cụ thể
49 - cho phép bạn chọn kết hợp ngày/giờ
Mỗi trong số này được hiển thị dưới đây. Chúng khá hữu ích, mặc dù bị giới hạn trong việc triển khai giao diện người dùng của trình duyệt
loại ngày cho đầu vào
loại tháng cho đầu vào
loại tuần cho đầu vào
loại thời gian cho đầu vào
loại ngày cho đầu vào
Các loại đầu vào HTML khác
Ngoài tất cả những thứ này, chúng tôi cũng có các loại bổ sung sau
40 - để tải tệp lên máy chủ
41 - điều kỳ lạ nhất đối với các nút gửi đồ họa
loại tệp cho đầu vào
Loại tệp cho đầu vào tạo giao diện tải tệp lên
1loại hình ảnh cho đầu vào
Đây có lẽ là cái bạn ít có khả năng sử dụng nhất. Nó cho phép bạn cung cấp thuộc tính
42 và
43 cho thông tin đầu vào của bạn, được sử dụng làm nút gửi cho biểu mẫu của bạn - cuối cùng làm cho thông tin đầu vào của bạn hoạt động giống như một hình ảnh
2Sự kết luận
Điều đó bao gồm mọi loại đầu vào HTML mà bạn có thể sử dụng ngày nay. Tôi hy vọng bạn đã học được điều gì đó mới, ngay cả khi đó chỉ là kiểu đầu vào
44 kỳ quặc. Nếu bạn muốn tìm hiểu thêm về phát triển web, bạn có thể theo dõi tôi trên twitter hoặc xem fjolt