Xác thực bootstrap 3

Biểu mẫu HTML (HTML Form) là một phần không thể thiếu của các trang web và ứng dụng, nhưng việc tạo bố cục biểu mẫu hoặc tạo kiểu cho các thành phần của biểu mẫu theo cách thủ công từng cái một bằng CSS thường rất may

Bootstrap đơn giản hóa đáng kể quá trình tạo kiểu và căn chỉnh các thành phần của biểu mẫu như nhãn, đầu vào, hộp chọn, vùng văn bản, nút, v. v. thông qua tập hợp các lớp được định nghĩa trước

Bootstrap cung cấp ba loại bố cục toàn cục cho các mẫu khác nhau

  • Vertical icon (local icon default)
  • ngang mẫu biểu
  • Biểu mẫu trên cùng một hàng

Phần sau đây sẽ cung cấp cho bạn tổng quan chi tiết về tất cả các bố cục biểu mẫu này cũng như từng thành phần Bootstrap liên quan đến các biểu mẫu khác nhau. Chúng ta hãy bắt đầu

Create vertical vertical icon

Để tạo bố cục cục bộ biểu tượng dọc (bố cục biểu mẫu dọc), chỉ cần sử dụng các lớp tiện ích lề (lề) được định nghĩa trước cho nhóm nhãn, điều khiển biểu mẫu, văn bản biểu mẫu tùy chọn và thông báo xác thực

Đây là một ví dụ trong đó các biểu mẫu điều khiển được xếp chồng lên nhau theo chiều dọc với các nhãn ở trên cùng


    

Email

Password

Remember me

Sign in

Kết quả của ví dụ trên sẽ giống như sau

Xác thực bootstrap 3

Bạn sẽ tìm hiểu về hộp kiểm tra tùy chọn và các điều khiển biểu mẫu tùy chỉnh khác trong chương trình tiếp theo

Lưu ý. Tất cả các điều khiển biểu ngữ văn bản, chẳng hạn như

    
        

Email

Password

Remember me

Sign in

4 và

    
        

Email

Password

Remember me

Sign in

5

Kết quả của ví dụ trên sẽ giống như sau

Xác thực bootstrap 3

Tuy nhiên, nếu bạn muốn vô hiệu hóa tất cả các điều khiển trong

cùng một lúc, hãy đặt chúng bên trong một phần tử và áp dụng thuộc tính

    
        

Email

Password

Remember me

Sign in

6 trên phần tử đó, như thể hiện trong ví dụ sau.

    
        

Email

Password

Remember me

Sign in

Kết quả của ví dụ trên sẽ giống như sau

Xác thực bootstrap 3

Create input only read

Bạn cũng có thể thêm thuộc tính boolean


    
        

Email

Password

Remember me

Sign in

7 vào một phần đầu vào điện tử hoặc vùng văn bản để ngăn chặn việc sửa đổi giá trị của nó. Đầu vào chỉ đọc xuất hiện trong nền sáng hơn (giống như đầu vào bị vô hiệu hóa), nhưng nó vẫn giữ nguyên con trỏ văn bản tiêu chuẩn. Vui lòng xem ví dụ sau để xem nó hoạt động như thế nào


Kết quả của ví dụ trên sẽ giống như sau

Xác thực bootstrap 3

Chiều cao của điều khiển biểu mẫu

Bạn có thể dễ dàng thay đổi chiều cao của đầu vào văn bản và chọn các hộp để phù hợp với kích thước của nút

Sử dụng các lớp định mức cao của biểu mẫu điều khiển, chẳng hạn như


    
        

Email

Password

Remember me

Sign in

8 và

    
        

Email

Password

Remember me

Sign in

9 trên các phần tử đầu vào để tạo kích thước lớn hơn hoặc nhỏ hơn. This is a ví dụ

Email

Email

Email

Kết quả của ví dụ trên sẽ giống như sau

Xác thực bootstrap 3
mẹo. An ninh áp dụng Lớp

    
        

Email

Password

Remember me

Sign in

0 hoặc

    
        

Email

Password

Remember me

Sign in

1 trên các phần tử

    
        

Email

Password

Remember me

Sign in

4 hoặc

    
        

Email

Password

Remember me

Sign in

4 để thay đổi kích thước nhãn một cách chính xác theo các biểu mẫu điều khiển

Tương tự như vậy, bạn có thể tạo các biến có thể lớn hơn và nhỏ hơn của các hộp chọn bằng cách sử dụng các lớp


    
        

Email

Password

Remember me

Sign in

4 và

    
        

Email

Password

Remember me

Sign in

5 trên phần tử

    
        

Email

Password

Remember me

Sign in

6


    
        

Email

Password

Remember me

Sign in

7


    
        

Email

Password

Remember me

Sign in

8

Kết quả của ví dụ trên sẽ giống như sau

Xác thực bootstrap 3

Xác thực biểu mẫu Bootstrap

Bootstrap cung cấp một cách dễ dàng và nhanh chóng để xác thực các biểu mẫu web ở phía máy khách. Nó sử dụng API xác thực biểu mẫu gốc của trình duyệt để thực hiện biểu mẫu. Các kiểu xác thực biểu mẫu được áp dụng thông qua các lớp CSS giả mạo


    
        

Email

Password

Remember me

Sign in

9 và

0. Nó áp dụng cho các phần tử

    
        

Email

Password

Remember me

Sign in

4,

2