2

Các hình thức có lẽ là phần quan trọng nhất của bất kỳ trang web nào, vì chúng là cách chính để khách truy cập tương tác với bạn. Thật không may, các hình thức thường phức tạp và mất rất nhiều thời gian để tạo ra. Trong bài viết này, tôi đã biên soạn các công cụ yêu thích của mình để tăng tốc độ tạo và phát triển mẫu web.

Giao diện người dùng jQuery


Khi nói đến các biểu mẫu, cách dễ nhất để nâng cao chúng là sử dụng một plugin UI UI nổi tiếng. Nó bổ sung rất nhiều chức năng cho các biểu mẫu HTML5 cơ bản, chẳng hạn như bộ chọn ngày, trường tự động hoàn thành, tab và hơn thế nữa. Phải sử dụng cho mọi hình thức mà khách truy cập của bạn sẽ yêu thích!

Thông tin / Tải xuống

PureCSS.io


Các hình thức tạo kiểu thường là một nhiệm vụ dài. Pure CSS là một khung CSS nhẹ cho phép bạn tạo các biểu mẫu đẹp mắt trong vài phút, với sự hỗ trợ nổi bật của thông số kỹ thuật HTML5 mới nhất.
  Thông tin / Tải xuống

Bootstrap


Bootstrap được biết đến rộng rãi trong số các nhà phát triển front-end, và thực sự, không có gì đáng ngạc nhiên khi xem công cụ miễn phí này tuyệt vời như thế nào. Bootstrap là một khung công tác hoàn chỉnh cho phép bạn tiết kiệm rất nhiều thời gian khi tạo biểu mẫu, cũng như bất kỳ phần nào khác của trang web. Hàng tấn các trang web ngày nay đã được thực hiện với sự trợ giúp của Bootstrap. Nếu bạn chưa thử nó, tốt, bạn phải làm điều đó càng sớm càng tốt!
  Thông tin / Tải xuống

Trình xác thực Bootstrap của jQuery


Nói về Bootstrap, điều gì về việc tăng cường khả năng của nó bằng cách ghép nó với một số jQuery? Đúng như tên gọi của nó, plugin tiện dụng này cung cấp rất nhiều tùy chọn xác thực front-end và được thiết kế đặc biệt để hoạt động trên các dự án được thực hiện với Bootstrap.
  Thông tin / Tải xuống

Plugin mẫu jQuery


Plugin jQuery Form cho phép bạn dễ dàng và không phô trương nâng cấp các biểu mẫu HTML để sử dụng AJAX. Các phương thức chính, ajaxForm và ajaxSubmit, thu thập thông tin từ phần tử biểu mẫu để xác định cách quản lý quy trình gửi. Cả hai phương pháp này đều hỗ trợ nhiều tùy chọn cho phép bạn có toàn quyền kiểm soát cách gửi dữ liệu. Gửi biểu mẫu với AJAX không dễ dàng hơn thế này!
  Thông tin / Tải xuống

Xác nhận mẫu thịt lợn

Tạo biểu mẫu là một chuyện, xác nhận dữ liệu đã gửi là một việc khác. Các hình thức là một phần nhạy cảm của một trang web và, là một nhà phát triển, bạn phải luôn nghĩ về bảo mật trước tiên. Đây là lý do tại sao tất cả dữ liệu được gửi bởi các biểu mẫu nên được xác nhận cẩn thận.

Xác thực mẫu thịt lợn là một lớp PHP xử lý, như bạn có thể đoán, xác thực dữ liệu được gửi bởi các biểu mẫu. Nếu bạn đang sử dụng khung PHP như CodeIgniter hoặc Cake PHP, bạn sẽ không cần điều này vì những công cụ mạnh mẽ đó đã có nhiều công cụ để xác thực dữ liệu, nhưng trong trường hợp phát triển nhỏ hơn, tôi chắc chắn thích tiết kiệm thời gian và rắc rối bằng cách sử dụng xác nhận mẫu thịt lợn.

Đây là một ví dụ nhanh về cách thức hoạt động của nó:

$validations = array(
 'name' => 'anything',
 'email' => 'email',
 'alias' => 'anything',
 'pwd'=>'anything',
 'gsm' => 'phone',
 'birthdate' => 'date');
$required = array('name', 'email', 'alias', 'pwd');
$sanatize = array('alias');

$validator = new FormValidator($validations, $required, $sanatize);

if($validator->validate($_POST)) {
 $_POST = $validator->sanatize($_POST);
 // now do your saving, $_POST has been sanatized.
 die($validator->getScript()."<script type='text/javascript'>alert('saved changes');</script>");
} else {
 die($validator->getScript());
}

Để xác thực chỉ một yếu tố:

$validated = new FormValidator()->validate('blah@bla.', 'email');

Để vệ sinh chỉ một yếu tố:

$sanatized = new FormValidator()->sanatize('<b>blah</b>', 'string');

Thông tin / Tải xuống

|