Tạo biểu mẫu liên hệ Bootstrap bằng PHP và AJAX. Tập lệnh PHP để xử lý biểu mẫu HTML

Một trong những nhiệm vụ phổ biến nhất trong thực tế là thực hiện biểu mẫu nhận xét. Ý bạn là viết mã HTML, thiết kế nó bằng CSS, Tạo PHP một tập lệnh sẽ xử lý dữ liệu nhận được từ người dùng và gửi nó đến email của chúng tôi, viết một tập lệnh JS để kiểm tra biểu mẫu xem dữ liệu đã nhập có đầy đủ hay không, bảo vệ đứa con tinh thần của chúng tôi khỏi thư rác để chúng tôi Hộp thưđã không sụp đổ vì các cuộc tấn công của bot.

Tất cả những điểm trên sẽ được thảo luận trong bài đánh giá của chúng tôi và nhận xét chi tiết.

Vì vậy, hãy bắt đầu tạo một biểu mẫu phản hồi:

Trước hết, chúng tôi viết mã HTML, trong đó chỉ định các trường mà người dùng sẽ điền vào. Chúng sẽ được chính thức hóa trong tương lai. Mã biểu mẫu trông như thế này:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Tên:< input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Điện thoại:< input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail:< input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Tin nhắn:< textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Gửi" />

Và trực quan nó bây giờ trông như thế này:

Tôi đồng ý, cho đến nay mọi thứ vẫn còn xấu và chưa có gì rõ ràng, nhưng chúng ta chỉ mới bắt đầu.

Chúng ta hãy xem xét đoạn mã trên một cách chi tiết:

• < form method= "post" action= "mail.php" > …

  
  Để tạo biểu mẫu, bạn cần sử dụng thẻ biểu mẫu. Chính anh ta là người xác định phần đầu và phần cuối của biểu mẫu cho trình thông dịch mã. Nó, giống như bất kỳ thẻ nào, có toàn bộ các thuộc tính, nhưng chỉ có hai thuộc tính bắt buộc để biểu mẫu hoạt động, đó là phương thức (phương thức gửi yêu cầu đến máy chủ, bài đăng được sử dụng làm tiêu chuẩn cho biểu mẫu) và hành động ( chỉ ra đường dẫn đến tệp xử lý biểu mẫu, cụ thể là trong Tệp này sẽ chứa một tập lệnh PHP, sau đó sẽ gửi các giá trị do người dùng nhập cho chúng tôi qua email. Trong trường hợp của chúng tôi, chúng tôi thấy rằng tệp này được gọi là mail.php và. nó nằm trong cùng thư mục trang web với trang chúng tôi đang xem xét).

• < input maxlength= "30" type= "text" name= "name" />

  
  Tiếp theo chúng ta có đầu vào. Đây thực sự là các trường biểu mẫu mà người dùng sẽ nhập thông tin chúng tôi cần (type="text" cho biết đây sẽ là văn bản). Thuộc tính maxlength chỉ định số lượng ký tự người dùng có thể nhập vào một trường biểu mẫu nhất định. Thuộc tính quan trọng nhất là tên - nó chỉ định tên của một trường cụ thể. Chính nhờ những cái tên này mà trong tương lai Tập lệnh PHP sẽ xử lý thông tin nhập vào nó. Nếu muốn, bạn cũng có thể đặt thuộc tính giữ chỗ, thuộc tính này hiển thị văn bản bên trong trường sẽ biến mất khi con trỏ được đặt bên trong trường đó. Một trong những vấn đề với trình giữ chỗ là nó không được một số trình duyệt cũ hỗ trợ.

• < label for = "name" >Tên:

  
  Được sử dụng nếu chúng tôi đã bỏ phần giữ chỗ. Chữ ký trường thông thường, thuộc tính for cho biết trường cụ thể mà nó đề cập đến chữ ký này. Giá trị cho biết tên của trường mà chúng tôi quan tâm.

• < textarea rows= "7" cols= "50" name= "message" >

  
  Cũng giống như đầu vào, nó nhằm mục đích cho người dùng nhập thông tin, chỉ có điều lần này trường này được thiết kế cho tin nhắn dài. Hàng chỉ định kích thước trường theo hàng, cols theo ký tự. Nói chung, họ đặt chiều cao và chiều rộng cho trường của chúng tôi.

• < input type= "submit" value= "Gửi" />

  
  Type="submit" cho chúng ta biết rằng đây là nút để gửi biểu mẫu và giá trị chỉ định văn bản sẽ nằm bên trong nút này.

• < div class = "right" >

  
  chỉ được sử dụng để tiếp tục thiết kế trực quan các hình thức.

Để biểu mẫu phản hồi của chúng tôi trông đẹp mắt, nó cần phải được định dạng. Để có được kết quả sau:

Chúng tôi đã sử dụng mã này:

biểu mẫu ( nền: #f4f5f7; phần đệm: 20px; ) biểu mẫu . trái, hình thức . bên phải ( display: inline- block; Vertical-align: top; width: 458px; ) dạng . phải ( đệm- trái: 20px; ) nhãn ( display: block; font- size: 18px; text- Align: center; lề: 10px 0px 0px 0px; ) đầu vào, vùng văn bản ( đường viền: 1px Solid #82858D; đệm: 10px; cỡ chữ: 16px; chiều rộng: 436px; ) vùng văn bản ( chiều cao: 98px; lề- dưới: 32px; ) đầu vào [ type= "submit" ] ( width: 200px; float: right; border: none; nền: #595B5F; màu sắc: #fff; văn bản- biến đổi: chữ hoa;

Tôi không hiểu mục đích của việc mô tả chi tiết CSS là gì; tôi sẽ chỉ thu hút sự chú ý của bạn vào những điểm chính:

Đối với những người muốn tiết kiệm thời gian thiết kế trang web, tôi có thể khuyên bạn nên sử dụng CSS framework khi tạo trang web, đặc biệt là những trang tự viết. Lựa chọn của tôi về vấn đề này là Twitter Bootstrap. Bạn có thể xem bài học về cách thiết kế biểu mẫu bằng cách sử dụng nó.

Chà, đã đến lúc làm cho biểu mẫu của chúng ta hoạt động.

Chúng tôi đi đến thư mục gốc của trang web và tạo tệp mail.php ở đó mà trước đây chúng tôi đã chỉ định đường dẫn trong thuộc tính hành động thẻ biểu mẫu.

Cuối cùng, mã của anh ấy sẽ trông như thế này:

tin nhắn của bạn đã được gởi đi thành công

Bạn có thể bỏ qua phần thảo luận về phần HTML và CSS của tài liệu này. Cốt lõi của nó là trang thông thường trang web mà bạn có thể thiết kế theo mong muốn và nhu cầu của mình. Hãy xem phần quan trọng nhất của nó - tập lệnh PHP để xử lý biểu mẫu:

$trở lại = "

sự trở lại

Với dòng này chúng ta tạo link để quay lại trang trước. Vì chúng tôi không biết trước người dùng sẽ truy cập trang này từ trang nào nên việc này được thực hiện bằng cách sử dụng một hàm JS nhỏ. Trong tương lai, chúng ta sẽ chỉ truy cập biến này để hiển thị nó ở những nơi chúng ta cần.

if (! trống ($_POST [ "tên" ] ) và ! trống ($_POST [ "điện thoại" ] ) và ! trống ($_POST [ "thư" ] ) và ! trống ($_POST [ "tin nhắn" ] ) ) ( //phần bên trong của trình xử lý ) else ( echo "Để gửi tin nhắn, hãy điền vào tất cả các trường! $back " ; exit ; )

Ở đây chúng tôi thêm kiểm tra biểu mẫu để đảm bảo rằng các trường đã đầy. Như bạn đã đoán, trong phần $_POST["name"], trong dấu ngoặc kép, chúng ta viết giá trị của thuộc tính name của dữ liệu đầu vào.

Nếu tất cả các trường được điền thì tập lệnh sẽ bắt đầu xử lý dữ liệu ở phần bên trong của nó, nhưng nếu ít nhất một trường chưa được điền thì một thông báo sẽ hiển thị trên màn hình người dùng yêu cầu họ điền vào tất cả. các trường có dạng echo “Để gửi tin nhắn, hãy điền vào tất cả các trường! $back” và một liên kết để quay lại trang trước mà chúng tôi đã tạo ngay từ dòng đầu tiên.

Tiếp theo chúng ta chèn vào phần bên trong xử lý biểu mẫu:

$name = Trim(strip_tags($_POST["name"])); $phone = cắt(strip_tags($_POST["phone"])); $mail = cắt(strip_tags($_POST["mail"])); $message = Trim(strip_tags($_POST["message"]));

Bằng cách này, chúng tôi đã xóa đầu vào của người dùng khỏi thẻ html Và khoảng trống thừa. Điều này cho phép chúng ta tự bảo vệ mình khỏi việc nhận được mã độc trong các tin nhắn gửi cho chúng tôi.

Việc kiểm tra có thể phức tạp hơn nhưng điều này tùy thuộc vào quyết định của bạn. Chúng tôi đã cài đặt biện pháp bảo vệ tối thiểu ở phía máy chủ. Chúng tôi sẽ thực hiện phần còn lại ở phía máy khách bằng cách sử dụng JS.

Tôi không khuyên bạn nên từ bỏ hoàn toàn tính năng bảo vệ biểu mẫu ở phía máy chủ để chuyển sang sử dụng JS, vì mặc dù cực kỳ hiếm nhưng vẫn có những tính năng duy nhất bị vô hiệu hóa JS trong trình duyệt.

Sau khi làm sạch các thẻ, thêm gửi tin nhắn:

mail ("[email protected]" , "Thư từ_your_site_address" , "Tôi đã viết cho bạn: " . $name . "
Số của anh ấy: " . $phone ."
Email của anh ấy: " . $mail ."
Tin nhắn của anh ấy: " . $message, "Content-type:text/html;charset=windows-1251" ) ;

Chính dòng này chịu trách nhiệm tạo và gửi tin nhắn cho chúng tôi. Nó được điền như sau:

QUAN TRỌNG!

Mã hóa được chỉ định trong phần “head” của tài liệu (< meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" />), mã hóa từ thông báo Content-type:text/html;charset=windows-1251 và nói chung, mã hóa của tệp PHP phải khớp với các thông báo nhận được qua thư thay vì tiếng Nga hoặc chữ cái tiếng anh“krakozyabry” sẽ được hiển thị.

Nhiều người không chỉ ra rõ ràng mã hóa của tin nhắn được gửi, nhưng trên một số ứng dụng thư khách Vì điều này, các vấn đề có thể phát sinh trong tương lai (những bức thư không đọc được sẽ được gửi qua đường bưu điện), vì vậy tôi khuyên bạn vẫn nên chỉ rõ điều đó.

Để đảm bảo người dùng không vô tình bỏ sót các trường và điền chính xác mọi thứ, cần kiểm tra dữ liệu đã nhập.

Điều này có thể được thực hiện cả bằng PHP ở phía máy chủ và trong JS ở phía máy khách. Tôi sử dụng tùy chọn thứ hai, vì bằng cách này, một người có thể ngay lập tức phát hiện ra mình đã làm gì sai và sửa lỗi mà không cần thực hiện chuyển đổi trang bổ sung.

Chúng tôi dán mã tập lệnh vào cùng một tệp nơi chúng tôi có phần HTML của biểu mẫu. Đối với trường hợp của chúng tôi, nó sẽ trông như thế này:

< script>hàm checkForm(form) ( var name = form. name. value; var n = name.match(/ ^[ A- Za- zA- Jaa- z ] * [ A- Za- zA- Ja- z ] + $/ ) ; if (! n) ( cảnh báo("Tên được nhập sai, vui lòng sửa lỗi" ) ; return false ; ) var phone = form phone. ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) ( cảnh báo("Điện thoại nhập sai") ; return false ; ) var mail = form mail . A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za - z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; , vui lòng sửa lỗi" ) ; return false ; ) return true ; )

Vâng, bây giờ là phân tích thông thường:

Để chúng tôi kiểm tra biểu mẫu khi nhấp vào nút gửi, chúng tôi đính kèm phần khởi chạy tập lệnh của mình vào thẻ biểu mẫu:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Bây giờ chúng ta hãy xem danh sách kiểm tra từng điểm một:

Như bạn có thể thấy, một tấm séc nhỏ như vậy được viết cho từng trường của chúng tôi. Tôi đã đánh dấu kiểm tra một trường trong ảnh chụp màn hình bằng hình vuông màu đỏ; đối với các trường khác, nó có cấu trúc tương tự và nếu cần thêm hoặc xóa trường đó, giờ đây bạn có thể dễ dàng thực hiện việc này.

Bài viết này thảo luận chi tiết về việc sử dụng biến PHP _SELF.

Biến PHP _SELF trả về tên và đường dẫn của tệp hiện tại (liên quan đến gốc tài liệu). Bạn có thể sử dụng biến này trong thuộc tính hành động của biểu mẫu. Ngoài ra còn có một số sắc thái mà bạn nên biết. Tất nhiên, chúng ta không thể bỏ qua những sắc thái này.

Hãy xem xét một vài ví dụ.

Echo $_SERVER["PHP_SELF"];

1) Giả sử rằng tập tin php tọa lạc tại địa chỉ sau:

Http://www.yourserver.com/form-action.php

Trong trường hợp này, biến PHP _SELF sẽ chứa:

"/form-action.php"

2) Giả sử tệp php của bạn nằm ở địa chỉ này:

Http://www.yourserver.com/dir1/form-action.php

PHP_SELF sẽ là:

"/dir1/form-action.php"

Thường xuyên Biến PHP _SELF được sử dụng trong thuộc tính hành động của thẻ biểu mẫu. Thuộc tính hành động chỉ định địa chỉ mà nội dung của biểu mẫu sẽ được gửi sau khi xác nhận (người dùng nhấp vào nút có loại = "gửi"). Theo quy định, đây chính là trang mà biểu mẫu đã rời đi.

Tuy nhiên, nếu đổi tên tệp được tham chiếu theo biểu mẫu, bạn sẽ cần đổi tên tệp trong thuộc tính hành động, nếu không biểu mẫu sẽ không hoạt động.

Biến PHP _SELF sẽ giúp bạn tránh khỏi những sửa đổi không cần thiết vì địa chỉ trang sẽ được tạo tự động dựa trên tên tệp.

Giả sử bạn có một tệp biểu mẫu có tên form-action.php và bạn muốn biểu mẫu được gửi đến cùng một tệp sau khi xác nhận. Thông thường họ viết như thế này:

Nhưng bạn có thể sử dụng biến PHP _SELF thay vì form-action.php. Trong trường hợp này, mã sẽ trông như sau: