Xác thực biểu mẫu Bootstrap – biểu mẫu liên hệ bootstrap 4 với xác thực

Cung cấp phản hồi có giá trị, có thể hành động cho người dùng của bạn với xác thực biểu mẫu HTML5 – có sẵn trong tất cả các trình duyệt được hỗ trợ của chúng tôi. Chọn từ phản hồi xác thực mặc định của trình duyệt hoặc triển khai các thông báo tùy chỉnh với các lớp và JavaScript khởi động tích hợp của chúng tôi.

Bạn đang xem : biểu mẫu liên hệ bootstrap 4 có xác thực

Xác thực

Xác thực Bootstrap

Lưu ý: Tài liệu này dành cho phiên bản cũ hơn của Bootstrap (v.4). Một
phiên bản mới hơn có sẵn cho Bootstrap 5. Chúng tôi khuyên bạn nên chuyển sang phiên bản mới nhất của sản phẩm – Material Design cho
Bootstrap 5.

Đi tới tài liệu v.5

Cung cấp phản hồi hữu ích, có giá trị cho người dùng của bạn với xác thực biểu mẫu HTML5 – khả dụng trong tất cả các trình duyệt được hỗ trợ của chúng tôi . Chọn từ phản hồi xác thực mặc định của trình duyệt,
hoặc triển khai các thông báo tùy chỉnh bằng các lớp tích hợp sẵn của chúng tôi và JavaScript dành cho người mới bắt đầu.

Lưu ý: Đối với người dùng nâng cao, chúng tôi khuyên bạn nên sử dụng xác thực tùy chỉnh được mô tả trong hướng dẫn này vì các kiểu là mặc định của trình duyệt gốc không được thông báo cho trình đọc màn hình.

Làm thế nào nó hoạt động

Dưới đây là cách xác thực biểu mẫu hoạt động với Bootstrap:

  • Xác thực biểu mẫu HTML được áp dụng qua hai lớp giả của CSS, : không hợp lệ : hợp lệ . Nó
    áp dụng cho các phần tử & lt; input & gt; , & lt; select & gt; & lt; textarea & gt; .
  • Bootstrap bao gồm các kiểu : không hợp lệ : hợp lệ đến .was-validated mẹ của chúng
    , thường được áp dụng cho & lt; form & gt; . Nếu không, bất kỳ trường bắt buộc nào không có giá trị sẽ hiển thị
    không hợp lệ khi một trang được tải. Bằng cách này, bạn có thể chọn thời điểm kích hoạt chúng (thường sau khi gửi biểu mẫu là
    cố gắng).
  • Để đặt lại giao diện của biểu mẫu (ví dụ: trong trường hợp gửi biểu mẫu động bằng AJAX), hãy xóa
    lớp .was-valid từ & lt; form & gt; một lần nữa sau khi gửi.
  • Như một dự phòng, các lớp .is-valid .is-valid có thể được sử dụng thay cho các lớp
    lớp giả để xác thực phía máy chủ . Chúng không yêu cầu .was-validate
    lớp cha mẹ.
  • Do những hạn chế về cách hoạt động của CSS, chúng tôi (hiện tại) không thể áp dụng các kiểu cho & lt; label & gt;
    xuất hiện trước điều khiển biểu mẫu trong DOM mà không cần sử dụng JavaScript tùy chỉnh.
  • Tất cả các trình duyệt hiện đại đều hỗ trợ API xác thực ràng buộc , một loạt các phương pháp JavaScript để xác thực các điều khiển biểu mẫu.
  • Thông báo phản hồi có thể sử dụng mặc định của trình duyệt (khác nhau đối với mỗi trình duyệt,
    và không thể xóa thông qua CSS) hoặc các kiểu phản hồi tùy chỉnh của chúng tôi với HTML và CSS bổ sung.
  • Bạn có thể cung cấp thông báo hợp lệ tùy chỉnh bằng setCustomValidity () trong JavaScript.

Với ý nghĩ đó, hãy kiểm tra các bản trình diễn sau để biết các kiểu xác thực biểu mẫu tùy chỉnh của chúng tôi,
các lớp phía máy chủ tùy chọn và các lớp mặc định của trình duyệt.

Phong cách tùy chỉnh

Đối với thông báo xác thực biểu mẫu Bootstrap tùy chỉnh, bạn cần thêm novalidate
thuộc tính boolean cho & lt; form & gt; của bạn. Thao tác này sẽ tắt chú giải công cụ phản hồi mặc định của trình duyệt, nhưng vẫn
cung cấp quyền truy cập vào các API xác thực biểu mẫu trong JavaScript. Cố gắng gửi biểu mẫu dưới đây; JavaScript của chúng tôi sẽ
chặn nút gửi và chuyển phản hồi cho bạn.

Khi cố gắng gửi, bạn sẽ thấy : không hợp lệ : hợp lệ
các kiểu được áp dụng cho các điều khiển biểu mẫu của bạn.

Kiểu mặc định

Họ

Có vẻ tốt!

Họ

Có vẻ tốt!

tên tài khoản

@

Vui lòng chọn một tên người dùng.

Thành phố

Vui lòng cung cấp một thành phố hợp lệ.

Tiểu bang

Vui lòng cung cấp trạng thái hợp lệ.

Zip

Vui lòng cung cấp một mã zip hợp lệ.

Đồng ý với các điều khoản và điều kiện

Bạn phải đồng ý trước khi gửi.

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; form class = "need-validation" novalidate & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationCustom01" & gt; Tên & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom01" placeholder = "First name" value = "Mark"
                    bắt buộc & gt;
                  & lt; div class = "valid-feedback" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationCustom02" & gt; Họ & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom02" placeholder = "Last name" value = "Otto"
                    bắt buộc & gt;
                  & lt; div class = "valid-feedback" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationCustomUsername" & gt; Tên người dùng & lt; / label & gt;
                  & lt; div class = "input-group" & gt;
                    & lt; div class = "input-group-prepend" & gt;
                      & lt; span class = "input-group-text" id = "inputGroupPrepend" & gt; @ & lt; / span & gt;
                    & lt; / div & gt;
                    & lt; input type = "text" class = "form-control" id = "validationCustomUsername" placeholder = "Username"
                      aria-descriptionby = "inputGroupPrepend" bắt buộc & gt;
                    & lt; div class = "sai-phản hồi" & gt;
                      Vui lòng chọn một tên người dùng.
                    & lt; / div & gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-6 mb-3" & gt;
                  & lt; label for = "validationCustom03" & gt; Thành phố & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom03" placeholder = "City" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp một thành phố hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3" & gt;
                  & lt; label for = "validationCustom04" & gt; State & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom04" placeholder = "State" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp trạng thái hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3" & gt;
                  & lt; label for = "validationCustom05" & gt; Zip & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom05" placeholder = "Zip" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp một mã zip hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-group" & gt;
                & lt; div class = "form-check" & gt;
                  & lt; input class = "form-check-input" type = "checkbox" value = "" id = "invalidCheck" bắt buộc & gt;
                  & lt; label class = "form-check-label" for = "invalidCheck" & gt;
                    Đồng ý với các điều khoản và điều kiện
                  & lt; / label & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Bạn phải đồng ý trước khi gửi.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; button class = "btn btn-primary btn-sm" type = "submit" & gt; Gửi biểu mẫu & lt; / button & gt;
            & lt; / form & gt;

          
        
    

            

              (hàm số () {
                  'Sử dụng nghiêm ngặt';
                  window.addEventListener ('load', function () {
                    // Tìm nạp tất cả các biểu mẫu mà chúng tôi muốn áp dụng các kiểu xác thực Bootstrap tùy chỉnh cho
                    var form = document.getElementsByClassName ('cần xác thực');
                    // Lặp lại chúng và ngăn chặn việc gửi
                    var validation = Array.prototype.filter.call (biểu mẫu, hàm (biểu mẫu) {
                      form.addEventListener ('submit', function (event) {
                        if (form.checkValidity () === false) {
                          event.preventDefault ();
                          event.stopPropagation ();
                        }
                        form.classList.add ('đã được xác thực');
                      }, sai);
                    });
                  }, sai);
                }) ();

          
        
    

Kiểu vật liệu Thành phần MDB Pro


Họ

Có vẻ tốt!

Họ

Có vẻ tốt!

tên tài khoản

Vui lòng chọn một tên người dùng.

Thành phố

Vui lòng cung cấp một thành phố hợp lệ.

Tiểu bang

Vui lòng cung cấp trạng thái hợp lệ.

Zip

Vui lòng cung cấp một mã zip hợp lệ.

Đồng ý với các điều khoản và điều kiện

Bạn phải đồng ý trước khi gửi.

Hiển thị mã


Chỉnh sửa trong hộp cát


            

            & lt; form class = "need-validation" novalidate & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationCustom012" & gt; Tên & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom012" placeholder = "First name" value = "Mark"
                    bắt buộc & gt;
                  & lt; div class = "valid-feedback" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationCustom022" & gt; Họ & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom022" value = "Otto" bắt buộc & gt;
                  & lt; div class = "valid-feedback" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationCustomUsername2" & gt; Tên người dùng & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustomUsername2" aria-descriptionby = "inputGroupPrepend2"
                    bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng chọn một tên người dùng.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-6 mb-3 md-form" & gt;
                  & lt; label for = "validationCustom032" & gt; Thành phố & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom032" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp một thành phố hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3 md-form" & gt;
                  & lt; label for = "validationCustom042" & gt; State & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom042" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp trạng thái hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3 md-form" & gt;
                  & lt; label for = "validationCustom052" & gt; Zip & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationCustom052" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp một mã zip hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-group" & gt;
                & lt; div class = "form-check pl-0" & gt;
                  & lt; input class = "form-check-input" type = "checkbox" value = "" id = "invalidCheck2" bắt buộc & gt;
                  & lt; label class = "form-check-label" for = "invalidCheck2" & gt;
                    Đồng ý với các điều khoản và điều kiện
                  & lt; / label & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Bạn phải đồng ý trước khi gửi.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; button class = "btn btn-primary btn-sm btn-round" type = "submit" & gt; Gửi biểu mẫu & lt; / button & gt;
            & lt; / form & gt;

          
        
    
        
            

              (hàm số () {
                  'Sử dụng nghiêm ngặt';
                  window.addEventListener ('load', function () {
                    // Tìm nạp tất cả các biểu mẫu mà chúng tôi muốn áp dụng các kiểu xác thực Bootstrap tùy chỉnh cho
                    var form = document.getElementsByClassName ('cần xác thực');
                    // Lặp lại chúng và ngăn chặn việc gửi
                    var validation = Array.prototype.filter.call (biểu mẫu, hàm (biểu mẫu) {
                      form.addEventListener ('submit', function (event) {
                        if (form.checkValidity () === false) {
                          event.preventDefault ();
                          event.stopPropagation ();
                        }
                        form.classList.add ('đã được xác thực');
                      }, sai);
                    });
                  }, sai);
                }) ();

          
        
    

Mặc định của trình duyệt

Không quan tâm đến thông báo phản hồi xác thực tùy chỉnh hoặc viết JavaScript để thay đổi
hình thành các hành vi? Tốt thôi, bạn có thể sử dụng mặc định của trình duyệt. Hãy thử gửi biểu mẫu bên dưới. Phụ thuộc vào bạn
trình duyệt và hệ điều hành, bạn sẽ thấy kiểu phản hồi hơi khác.

Mặc dù không thể tạo kiểu phản hồi này bằng CSS, bạn vẫn có thể tùy chỉnh
văn bản phản hồi thông qua JavaScript.

Kiểu mặc định

Họ

Họ

tên tài khoản

@

Thành phố

Tiểu bang

Zip

Đồng ý với các điều khoản và điều kiện

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; biểu mẫu & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationDefault01" & gt; Tên & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault01" placeholder = "First name" value = "Mark"
                    bắt buộc & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationDefault02" & gt; Họ & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault02" placeholder = "Last name" value = "Otto"
                    bắt buộc & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationDefaultUsername" & gt; Tên người dùng & lt; / label & gt;
                  & lt; div class = "input-group" & gt;
                    & lt; div class = "input-group-prepend" & gt;
                      & lt; span class = "input-group-text" id = "inputGroupPrepend21" & gt; @ & lt; / span & gt;
                    & lt; / div & gt;
                    & lt; input type = "text" class = "form-control" id = "validationDefaultUsername" placeholder = "Username"
                      aria-descriptionby = "inputGroupPrepend21" bắt buộc & gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-6 mb-3" & gt;
                  & lt; label for = "validationDefault03" & gt; Thành phố & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault03" placeholder = "City" bắt buộc & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3" & gt;
                  & lt; label for = "validationDefault04" & gt; State & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault04" placeholder = "State" bắt buộc & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3" & gt;
                  & lt; label for = "validationDefault05" & gt; Zip & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault05" placeholder = "Zip" bắt buộc & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-group" & gt;
                & lt; div class = "tùy chỉnh-điều khiển tùy chỉnh-hộp kiểm" & gt;
                  & lt; input type = "checkbox" class = "custom-control-input" id = "invalidCheck12" bắt buộc & gt;
                  & lt; label class = "custom-control-label" for = "invalidCheck" & gt; Đồng ý với các điều khoản và điều kiện & lt; / label & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; button class = "btn btn-primary btn-sm" type = "submit" & gt; Gửi biểu mẫu & lt; / button & gt;
            & lt; / form & gt;

          
        
    

Kiểu vật liệu Thành phần MDB Pro

Họ

Họ

tên tài khoản

Thành phố

Tiểu bang

Zip

Đồng ý với các điều khoản và điều kiện

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            


            & lt; biểu mẫu & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationDefault22" & gt; Tên & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault22" value = "Mark" bắt buộc & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationDefault22" & gt; Họ & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault22" value = "Otto" bắt buộc & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationDefaultUsername22" & gt; Tên người dùng & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefaultUsername22" aria-descriptionby = "inputGroupPrepend23"
                    bắt buộc & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-6 mb-3 md-form" & gt;
                  & lt; label for = "validationDefault22" & gt; Thành phố & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault22" bắt buộc & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3 md-form" & gt;
                  & lt; label for = "validationDefault22" & gt; State & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault22" bắt buộc & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3 md-form" & gt;
                  & lt; label for = "validationDefault22" & gt; Zip & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationDefault22" bắt buộc & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-group" & gt;
                & lt; div class = "form-check pl-0" & gt;
                  & lt; input class = "form-check-input" type = "checkbox" value = "" id = "invalidCheck222" bắt buộc & gt;
                  & lt; label class = "form-check-label" for = "invalidCheck222" & gt;
                    Đồng ý với các điều khoản và điều kiện
                  & lt; / label & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; button class = "btn btn-primary btn-sm" type = "submit" & gt; Gửi biểu mẫu & lt; / button & gt;
            & lt; / form & gt;
          
        
    

Phía máy chủ

Chúng tôi khuyên bạn nên sử dụng xác thực phía máy khách, nhưng trong trường hợp bạn yêu cầu phía máy chủ, bạn có thể
chỉ ra các trường biểu mẫu không hợp lệ và hợp lệ bằng .is-valid .is-valid . Lưu ý rằng .invalid-feedback
cũng được hỗ trợ bởi các lớp học này.

Kiểu mặc định

Họ

Có vẻ tốt!

Họ

Có vẻ tốt!

tên tài khoản

@

Vui lòng chọn một tên người dùng.

Thành phố

Vui lòng cung cấp một thành phố hợp lệ.

Tiểu bang

Vui lòng cung cấp trạng thái hợp lệ.

Zip

Vui lòng cung cấp một mã zip hợp lệ.

Đồng ý với các điều khoản và điều kiện

Bạn phải đồng ý trước khi gửi.

Bạn phải đồng ý trước khi gửi.

Hiển thị mã


Chỉnh sửa trong hộp cát


            

            & lt; biểu mẫu & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationServer013" & gt; Tên & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-valid" id = "validationServer013" placeholder = "First name"
                    value = "Đánh dấu" bắt buộc & gt;
                  & lt; div class = "valid-feedback" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationServer023" & gt; Họ & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-valid" id = "validationServer023" placeholder = "Last name"
                    value = "Otto" bắt buộc & gt;
                  & lt; div class = "valid-feedback" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationServerUsername33" & gt; Tên người dùng & lt; / label & gt;
                  & lt; div class = "input-group" & gt;
                    & lt; div class = "input-group-prepend" & gt;
                      & lt; span class = "input-group-text" id = "inputGroupPrepend33" & gt; @ & lt; / span & gt;
                    & lt; / div & gt;
                    & lt; input type = "text" class = "form-control is-valid" id = "validationServerUsername33" placeholder = "Username"
                      aria-descriptionby = "inputGroupPrepend33" bắt buộc & gt;
                    & lt; div class = "sai-phản hồi" & gt;
                      Vui lòng chọn một tên người dùng.
                    & lt; / div & gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-6 mb-3" & gt;
                  & lt; label for = "validationServer033" & gt; Thành phố & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-invalid" id = "validationServer033" placeholder = "City"
                    bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp một thành phố hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3" & gt;
                  & lt; label for = "validationServer043" & gt; State & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-valid" id = "validationServer043" placeholder = "State"
                    bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp trạng thái hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3" & gt;
                  & lt; label for = "validationServer053" & gt; Zip & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-valid" id = "validationServer053" placeholder = "Zip"
                    bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp một mã zip hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-group" & gt;
                & lt; div class = "tùy chỉnh-điều khiển tùy chỉnh-hộp kiểm" & gt;
                  & lt; input type = "checkbox" class = "custom-control-input is-invalid" id = "invalidCheck33" bắt buộc & gt;
                  & lt; label class = "custom-control-label" for = "invalidCheck33" & gt; Đồng ý với các điều khoản và điều kiện & lt; / label & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Bạn phải đồng ý trước khi gửi.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "sai-phản hồi" & gt;
                  Bạn phải đồng ý trước khi gửi.
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; button class = "btn btn-primary btn-sm" type = "submit" & gt; Gửi biểu mẫu & lt; / button & gt;
            & lt; / form & gt;

          
        
    

Kiểu vật liệu

Họ

Có vẻ tốt!

Họ

Có vẻ tốt!

tên tài khoản

Vui lòng chọn một tên người dùng.

Thành phố

Vui lòng cung cấp một thành phố hợp lệ.

Tiểu bang

Vui lòng cung cấp trạng thái hợp lệ.

Zip

Vui lòng cung cấp một mã zip hợp lệ.

Đồng ý với các điều khoản và điều kiện

Bạn phải đồng ý trước khi gửi.

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; biểu mẫu & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationServer015" & gt; Tên & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-valid" id = "validationServer015" value = "Đánh dấu" bắt buộc & gt;
                  & lt; div class = "valid-feedback" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationServer025" & gt; Họ & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-valid" id = "validationServer025" value = "Otto" bắt buộc & gt;
                  & lt; div class = "valid-feedback" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationServerUsername55" & gt; Tên người dùng & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-invalid" id = "validationServerUsername55" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng chọn một tên người dùng.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-6 mb-3 md-form" & gt;
                  & lt; label for = "validationServer035" & gt; Thành phố & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-invalid" id = "validationServer035" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp một thành phố hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3 md-form" & gt;
                  & lt; label for = "validationServer045" & gt; State & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-invalid" id = "validationServer045" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp trạng thái hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3 md-form" & gt;
                  & lt; label for = "validationServer055" & gt; Zip & lt; / label & gt;
                  & lt; input type = "text" class = "form-control is-invalid" id = "validationServer055" bắt buộc & gt;
                  & lt; div class = "sai-phản hồi" & gt;
                    Vui lòng cung cấp một mã zip hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-group" & gt;
                & lt; div class = "form-check pl-0 md-form m-0" & gt;
                  & lt; input class = "form-check-input is-valid" type = "checkbox" value = "" id = "invalidCheck35" bắt buộc & gt;
                  & lt; label class = "form-check-label" for = "invalidCheck35" & gt;
                    Đồng ý với các điều khoản và điều kiện
                  & lt; / label & gt;
                & lt; / div & gt;
                & lt; div class = "không hợp lệ-phản hồi mt-3 ml-4" & gt;
                  Bạn phải đồng ý trước khi gửi.
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; button class = "btn btn-primary btn-sm btn-round" type = "submit" & gt; Gửi biểu mẫu & lt; / button & gt;
            & lt; / form & gt;


          
        
    

Các yếu tố được hỗ trợ

Biểu mẫu mẫu của chúng tôi hiển thị & lt; input & gt; s dạng văn bản gốc ở trên, nhưng biểu mẫu
các kiểu xác thực cũng có sẵn cho các điều khiển biểu mẫu tùy chỉnh của chúng tôi.

Kiểu mặc định

Hiển thị mã


Chỉnh sửa trong hộp cát


            

            & lt; form class = "was-validated" & gt;
              & lt; div class = "custom-control custom-checkbox mb-3" & gt;
                & lt; input type = "checkbox" class = "custom-control-input" id = "customControlValidation1" bắt buộc & gt;
                & lt; label class = "custom-control-label" for = "customControlValidation1" & gt; Chọn hộp kiểm tùy chỉnh này & lt; / label & gt;
                & lt; div class = "invalid-feedback" & gt; Ví dụ văn bản phản hồi không hợp lệ & lt; / div & gt;
              & lt; / div & gt;

              & lt; div class = "custom-control custom-radio" & gt;
                & lt; input type = "radio" class = "custom-control-input" id = "customControlValidation2" name = "radio-stacked"
                  bắt buộc & gt;
                & lt; label class = "custom-control-label" for = "customControlValidation2" & gt; Chuyển đổi đài tùy chỉnh này & lt; / label & gt;
              & lt; / div & gt;
              & lt; div class = "custom-control custom-radio mb-3" & gt;
                & lt; input type = "radio" class = "custom-control-input" id = "customControlValidation3" name = "radio-stacked"
                  bắt buộc & gt;
                & lt; label class = "custom-control-label" for = "customControlValidation3" & gt; Hoặc chuyển đổi radio tùy chỉnh khác này & lt; / label & gt;
                & lt; div class = "valid-feedback" & gt; Ví dụ khác về văn bản phản hồi không hợp lệ & lt; / div & gt;
              & lt; / div & gt;

              & lt; div class = "form-group" & gt;
                & lt; select class = "custom-select browser-default" bắt buộc & gt;
                  & lt; option value = "" & gt; Mở menu chọn này & lt; / option & gt;
                  & lt; option value = "1" & gt; Một & lt; / option & gt;
                  & lt; option value = "2" & gt; Hai & lt; / option & gt;
                  & lt; option value = "3" & gt; Ba & lt; / option & gt;
                & lt; / select & gt;
                & lt; div class = "valid-feedback" & gt; Ví dụ về phản hồi lựa chọn tùy chỉnh không hợp lệ & lt; / div & gt;
              & lt; / div & gt;

              & lt; div class = "custom-file" & gt;
                & lt; input type = "file" class = "custom-file-input" id = "validatedCustomFile" duoc yeu cau & gt;
                & lt; label class = "custom-file-label" for = "validatedCustomFile" & gt; Chọn tệp ... & lt; / label & gt;
                & lt; div class = "invalid-feedback" & gt; Ví dụ về phản hồi tệp tùy chỉnh không hợp lệ & lt; / div & gt;
              & lt; / div & gt;
            & lt; / form & gt;

          
        
    

Phong cách vật liệu
MDB
Thành phần chuyên nghiệp


Hiển thị mã


Chỉnh sửa trong hộp cát


            

            & lt; form class = "was-validated" & gt;
              & lt; div class = "custom-control custom-checkbox mb-3" & gt;
                & lt; input type = "checkbox" class = "custom-control-input" id = "customControlValidation1" bắt buộc & gt;
                & lt; label class = "custom-control-label" for = "customControlValidation1" & gt; Chọn hộp kiểm tùy chỉnh này & lt; / label & gt;
                & lt; div class = "invalid-feedback" & gt; Ví dụ văn bản phản hồi không hợp lệ & lt; / div & gt;
              & lt; / div & gt;

              & lt; div class = "custom-control custom-radio" & gt;
                & lt; input type = "radio" class = "custom-control-input" id = "customControlValidation2" name = "radio-stacked"
                  bắt buộc & gt;
                & lt; label class = "custom-control-label" for = "customControlValidation2" & gt; Chuyển đổi đài tùy chỉnh này & lt; / label & gt;
              & lt; / div & gt;
              & lt; div class = "custom-control custom-radio mb-3" & gt;
                & lt; input type = "radio" class = "custom-control-input" id = "customControlValidation3" name = "radio-stacked"
                  bắt buộc & gt;
                & lt; label class = "custom-control-label" for = "customControlValidation3" & gt; Hoặc chuyển đổi radio tùy chỉnh khác này & lt; / label & gt;
                & lt; div class = "valid-feedback" & gt; Ví dụ khác về văn bản phản hồi không hợp lệ & lt; / div & gt;
              & lt; / div & gt;

              & lt; div class = "form-group" & gt;
                & lt; select class = "custom-select browser-default" bắt buộc & gt;
                  & lt; option value = "" & gt; Mở menu chọn này & lt; / option & gt;
                  & lt; option value = "1" & gt; Một & lt; / option & gt;
                  & lt; option value = "2" & gt; Hai & lt; / option & gt;
                  & lt; option value = "3" & gt; Ba & lt; / option & gt;
                & lt; / select & gt;
                & lt; div class = "valid-feedback" & gt; Ví dụ về phản hồi lựa chọn tùy chỉnh không hợp lệ & lt; / div & gt;
              & lt; / div & gt;

              & lt; div class = "custom-file" & gt;
                & lt; input type = "file" class = "custom-file-input" id = "validatedCustomFile" duoc yeu cau & gt;
                & lt; label class = "custom-file-label" for = "validatedCustomFile" & gt; Chọn tệp ... & lt; / label & gt;
                & lt; div class = "invalid-feedback" & gt; Ví dụ về phản hồi tệp tùy chỉnh không hợp lệ & lt; / div & gt;
              & lt; / div & gt;
            & lt; / form & gt;

          
        
    

Chú giải công cụ

Nếu bố cục biểu mẫu của bạn cho phép, bạn có thể hoán đổi . {valid | invalid} -feedback
các lớp cho các lớp . {valid | invalid} -tooltip để hiển thị phản hồi xác thực trong một chú giải công cụ được tạo kiểu. Thì là ở
đảm bảo có phụ huynh có position: relative với nó để định vị chú giải công cụ. Trong ví dụ dưới đây,
của chúng tôi
các lớp cột đã có tính năng này, nhưng dự án của bạn có thể yêu cầu thiết lập thay thế.

Kiểu mặc định

Họ

Có vẻ tốt!

Họ

Có vẻ tốt!

tên tài khoản

@

Vui lòng chọn một tên người dùng hợp lệ và duy nhất.

Thành phố

Vui lòng cung cấp một thành phố hợp lệ.

Tiểu bang

Vui lòng cung cấp trạng thái hợp lệ.

Zip

Vui lòng cung cấp một mã zip hợp lệ.

Hiển thị mã


Chỉnh sửa trong hộp cát


            

            & lt; form class = "need-validation" novalidate & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationTooltip01" & gt; Tên & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip01" placeholder = "First name" value = "Mark"
                    bắt buộc & gt;
                  & lt; div class = "valid-tooltip" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationTooltip02" & gt; Họ & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip02" placeholder = "Last name" value = "Otto"
                    bắt buộc & gt;
                  & lt; div class = "valid-tooltip" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3" & gt;
                  & lt; label for = "validationTooltipUsername" & gt; Tên người dùng & lt; / label & gt;
                  & lt; div class = "input-group" & gt;
                    & lt; div class = "input-group-prepend" & gt;
                      & lt; span class = "input-group-text" id = "validationTooltipUsernamePrepend" & gt; @ & lt; / span & gt;
                    & lt; / div & gt;
                    & lt; input type = "text" class = "form-control" id = "validationTooltipUsername" placeholder = "Username"
                      aria-descriptionby = "validationTooltipUsernamePrepend" bắt buộc & gt;
                    & lt; div class = "invalid-tooltip" & gt;
                      Vui lòng chọn một tên người dùng hợp lệ và duy nhất.
                    & lt; / div & gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-6 mb-3" & gt;
                  & lt; label for = "validationTooltip03" & gt; Thành phố & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip03" placeholder = "City" bắt buộc & gt;
                  & lt; div class = "invalid-tooltip" & gt;
                    Vui lòng cung cấp một thành phố hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3" & gt;
                  & lt; label for = "validationTooltip04" & gt; State & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip04" placeholder = "State" bắt buộc & gt;
                  & lt; div class = "invalid-tooltip" & gt;
                    Vui lòng cung cấp trạng thái hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3" & gt;
                  & lt; label for = "validationTooltip05" & gt; Zip & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip05" placeholder = "Zip" bắt buộc & gt;
                  & lt; div class = "invalid-tooltip" & gt;
                    Vui lòng cung cấp một mã zip hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; button class = "btn btn-primary btn-sm" type = "submit" & gt; Gửi biểu mẫu & lt; / button & gt;
            & lt; / form & gt;

          
        
    
        
            

            // Khởi tạo chú giải công cụ
            $ (function () {
              $ ('[data-toggle = "tooltip"]'). tooltip ()
            })

          
        
    

Phong cách vật liệu
MDB
Thành phần chuyên nghiệp


Họ

Có vẻ tốt!

Họ

Có vẻ tốt!

tên tài khoản

Vui lòng chọn một tên người dùng hợp lệ và duy nhất. & Gt;

Thành phố

Vui lòng cung cấp một thành phố hợp lệ.

Tiểu bang

Vui lòng cung cấp trạng thái hợp lệ.

Zip

Vui lòng cung cấp một mã zip hợp lệ.

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

            & lt; form class = "need-validation" novalidate & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationTooltip011" & gt; Tên & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip011" value = "Đánh dấu" bắt buộc & gt;
                  & lt; div class = "valid-tooltip" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationTooltip021" & gt; Họ & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip021" value = "Otto" bắt buộc & gt;
                  & lt; div class = "valid-tooltip" & gt;
                    Có vẻ tốt!
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-4 mb-3 md-form" & gt;
                  & lt; label for = "validationTooltipUsername1" & gt; Tên người dùng & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltipUsername1" bắt buộc & gt;
                  & lt; div class = "invalid-tooltip" & gt;
                    Vui lòng chọn một tên người dùng hợp lệ và duy nhất. & Gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; div class = "form-row" & gt;
                & lt; div class = "col-md-6 mb-3 md-form" & gt;
                  & lt; label for = "validationTooltip031" & gt; Thành phố & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip031" bắt buộc & gt;
                  & lt; div class = "invalid-tooltip" & gt;
                    Vui lòng cung cấp một thành phố hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3 md-form" & gt;
                  & lt; label for = "validationTooltip041" & gt; State & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip041" bắt buộc & gt;
                  & lt; div class = "invalid-tooltip" & gt;
                    Vui lòng cung cấp trạng thái hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-3 mb-3 md-form" & gt;
                  & lt; label for = "validationTooltip051" & gt; Zip & lt; / label & gt;
                  & lt; input type = "text" class = "form-control" id = "validationTooltip051" bắt buộc & gt;
                  & lt; div class = "invalid-tooltip" & gt;
                    Vui lòng cung cấp một mã zip hợp lệ.
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
              & lt; button class = "btn btn-primary btn-sm btn-round" type = "submit" & gt; Gửi biểu mẫu & lt; / button & gt;
            & lt; / form & gt;

          
        
    
        
            

            // Khởi tạo chú giải công cụ
            $ (function () {
              $ ('[data-toggle = "tooltip"]'). tooltip ()
            })

          
        
    

Xác thực Lựa chọn Vật liệu Thành phần MDB Pro ”

Vui lòng chọn một quốc gia.

Đồng ý với các điều khoản và điều kiện

Bạn sẽ không đạt!

Hiển thị mã


Chỉnh sửa trong hộp cát


            

        & lt; form class = "need-validation container" novalidate & gt;
          & lt; div class = "form-row" & gt;
            & lt; div class = "mb-3 md-form" & gt;
              & lt; select class = "mdb-select" bắt buộc & gt;
                & lt; option value = "1" & gt; Hoa Kỳ & lt; / option & gt;
                & lt; option value = "2" & gt; Đức & lt; / option & gt;
                & lt; option value = "3" & gt; Ba Lan & lt; / option & gt;
              & lt; / select & gt;
              & lt; div class = "invalid-feedback" & gt; Vui lòng chọn một quốc gia. & lt; / div & gt;
            & lt; / div & gt;
          & lt; / div & gt;
          & lt; div class = "form-row mb-4" & gt;
            & lt; div class = "form-check pl-0" & gt;
              & lt; input class = "form-check-input" type = "checkbox" value = "" id = "invalidCheck29" bắt buộc & gt;
              & lt; label class = "form-check-label" for = "invalidCheck29" & gt; Đồng ý với các điều khoản và điều kiện & lt; / label & gt;
              & lt; div class = "invalid-feedback" & gt; Bạn sẽ không đạt! & lt; / div & gt;
            & lt; / div & gt;
          & lt; / div & gt;
          & lt; button class = "btn btn-primary btn-sm btn-round" type = "submit" & gt; Gửi biểu mẫu & lt; / button & gt;
        & lt; / form & gt;
      
        
    
        
            

          (hàm số () {
              'Sử dụng nghiêm ngặt';
              window.addEventListener ('load', function () {
                // Tìm nạp tất cả các biểu mẫu mà chúng tôi muốn áp dụng các kiểu xác thực Bootstrap tùy chỉnh cho
                var form = document.getElementsByClassName ('cần xác thực');
                // Lặp lại chúng và ngăn chặn việc gửi
                var validation = Array.prototype.filter.call (biểu mẫu, hàm (biểu mẫu) {
                  form.addEventListener ('submit', function (event) {
                    if (form.checkValidity () === false) {
                      event.preventDefault ();
                      event.stopPropagation ();
                    }
                    form.classList.add ('đã được xác thực');
                  }, sai);
                });
              }, sai);
            }) ();

            $ (tài liệu) .ready (function () {
              $ ('. mdb-select'). materialSelect ();
              $ ('. mdb-select.select-wrapper .select-dropdown'). val (""). removeAttr ('readonly'). attr ("placeholder",
                "Chọn quốc gia của bạn") .prop ('bắt buộc', đúng) .addClass ('form-control'). Css ('background-color', '#fff');
            });

      
        
    


Xem thêm những thông tin liên quan đến chủ đề biểu mẫu liên hệ bootstrap 4 với xác thực

Hướng dẫn sử dụng Bootstrap 4 | Trần Nghĩa CFD

  • Tác giả: CFD Circle
  • Ngày đăng: 2020-08-20
  • Đánh giá: 4 ⭐ ( 7260 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn sử dụng Boostrap 4 và Code demo trong khóa học Creative Front-End Developer của Trần Nghĩa.
    CFD Website: http://cfdtraining.vn/
    CFD Page: facebook.com/cfdcommunity
    CFD Group: https://www.facebook.com/groups/cfdteam/
    Nghia Tran: http://nghiatran.info/

Bootstrap Form – Biểu mẫu Bootstrap

  • Tác giả: lamvt.vn
  • Đánh giá: 5 ⭐ ( 5294 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Mẫu form liên hệ đẹp được thiết kế bằng material design và bootstrap

  • Tác giả: www.toilaquantri.com
  • Đánh giá: 5 ⭐ ( 9471 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng tôi cung cấp Dịch vụ SEO Audit, SEO tổng thể website. Tư vấn tối ưu Web/Content phục vụ cho quảng cáo Google Adwords

Mẫu form liên hệ đẹp được thiết kế bằng material design và bootstrap

  • Tác giả: www.thietkeblogspot.com
  • Đánh giá: 4 ⭐ ( 2589 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mẫu Form liên hệ được thiết kế bằng material design và bootstrap rất thích hợp cho Blog có chủ đề Landing Page

5 Mẫu biểu mẫu Bootstrap sẵn sàng sử dụng cho các dự án của bạn

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 1387 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap là khung web mặt trước phổ biến nhất và có lẽ là hoàn chỉnh nhất, cho phép các nhà phát triển nhanh chóng tạo ra một trang web hoặc ứng dụng web. Trong bài viết này, tôi đã biên…

Xây dựng một Form liên hệ Bootstrap Sử dụng PHP và AJAX

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 3 ⭐ ( 1373 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này tôi sẽ đi qua các bước để tạo ra một form liên hệ, tận dụng framework front-end phổ biến nhất, Bootstrap, kết hợp với AJAX và PHP. Từ đó chúng ta có thể khám phá một số tính…

Xác thực JQuery trên Biểu mẫu Bootstrap trong Salesforce?

  • Tác giả: vi.hullettmarsh.org
  • Đánh giá: 5 ⭐ ( 4033 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang gặp sự cố trong đó tôi đang sử dụng Plugin xác thực Jquery để giúp xác thực một số trường trong trang visualforce để tôi có thể đảm bảo rằng nó trông đẹp và vì vậy tôi có thể kiểm soát các lỗi và tham số …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Elif trong Python là gì? - elif có nghĩa là gì trong python