Trong bài viết này, chúng ta sẽ xây dựng và xác thực một biểu mẫu web nhỏ bằng HTML và PHP. Biểu mẫu được tạo bằng HTML và việc xác thực cũng như xử lý nội dung của biểu mẫu được thực hiện bằng PHP. Mục tiêu của bài viết này là hướng dẫn bạn một số thành phần biểu mẫu HTML cơ bản và cách bạn có thể truy cập dữ liệu của chúng trong tập lệnh PHP của mình
Biểu mẫu chúng tôi sẽ tạo có chứa một số đầu vào. trường văn bản, nút radio, danh sách chọn nhiều tùy chọn, hộp kiểm và nút gửi. Các đầu vào này sẽ được xác thực để đảm bảo rằng người dùng đã cung cấp một giá trị cho từng đầu vào
Nếu một hoặc nhiều trường trống, biểu mẫu sẽ được hiển thị lại. Tuy nhiên, lần này, các trường trống sẽ có chuỗi lỗi “Thiếu” bên cạnh chúng. Nếu không có trường nào trống, các giá trị được cung cấp sẽ được hiển thị theo cách đơn giản
Bạn có thể tìm mã cho bài viết này trên GitHub
Biểu mẫu HTML
Hãy tạo biểu mẫu HTML. Mục đích của biểu mẫu là để công ty hư cấu “Thế giới trái cây” tiến hành khảo sát khách hàng về trái cây của họ. Biểu mẫu nắm bắt ba điều
- Thông tin chi tiết của người dùng [tên, địa chỉ và địa chỉ email]
- Sở thích tiêu thụ trái cây của người dùng [số lượng trái cây họ ăn mỗi ngày và loại trái cây yêu thích của họ]
- Nếu người dùng muốn có một tài liệu quảng cáo miễn phí
Trường văn bản
Các trường tên, địa chỉ và email sẽ được mã hóa bằng các phần tử
0
1
2
More than 2
3 và
0
1
2
More than 2
4 như thế nàyName
Address
Email
Các phần tử đầu vào HTML có một số thuộc tính. Đặt
0
1
2
More than 2
5 thành
0
1
2
More than 2
6 xác định chúng là các trường nhập một dòng chấp nhận văn bản. Thuộc tính
0
1
2
More than 2
7 được sử dụng để chỉ định tên trường và được sử dụng để truy cập phần tử trong quá trình xử lý PHP. Thuộc tính ID liên kết đầu vào với nhãn được liên kết của nó [thông qua thuộc tính
0
1
2
More than 2
8 của nhãn], điều này làm cho biểu mẫu dễ truy cập hơnNút radio
Nút radio lưu lượng trái cây người dùng ăn mỗi ngày
0
1
2
More than 2
Đặt
0
1
2
More than 2
5 thành My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
0 hiển thị đầu vào dưới dạng nút radio. Lưu ý cách mỗi nút được gán cùng một tên. Điều này coi các nút radio là một nhóm, cho phép người dùng chọn 0, 1 hoặc 2. Thuộc tính My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
1 khác nhau cho mỗi nút để cung cấp các giá trị khác nhau mà người dùng có thể chọn. Bởi vì các đầu vào được bao bọc trong các nhãn ở đây, các thuộc tính
0
1
2
More than 2
8 và My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
3 không cần thiếtChọn danh sách
Phần tử select lưu trữ lựa chọn trái cây yêu thích của người dùng
My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
Thuộc tính
0
1
2
More than 2
7 là một mảng [được xác định bởi dấu ngoặc vuông sau tên] vì cho phép có nhiều lựa chọn [do có thuộc tính My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
5]. Nếu không có thuộc tính My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
5, chỉ có thể chọn một tùy chọnThuộc tính
My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
1 cho mỗi phần tử tùy chọn là giá trị sẽ được gửi đến máy chủ và văn bản giữa thẻ mở và thẻ đóng My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
8 là giá trị mà người dùng sẽ thấy trong menu chọn. Mỗi phần tử My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
8 phải có một giá trị riêng biệthộp kiểm
Name
Address
Email
0Một phần tử hộp kiểm được sử dụng để cho phép người dùng chọn xem họ có muốn một tài liệu quảng cáo hay không. Giá trị của nó sẽ được đặt thành “Có” nếu hộp được chọn. Nếu không, nó sẽ được đặt thành “Không” một cách hiệu quả
nút gửi
Name
Address
Email
1Cuối cùng nhưng không kém phần quan trọng là nút Gửi. Giá trị của phần tử
My favorite fruit
Apple
Banana
Plum
Pomegranate
Strawberry
Watermelon
1 của nó được hiển thị dưới dạng văn bản của nút. Nhấp vào nó gửi biểu mẫuPhần tử biểu mẫu
Name
Address
Email
3Tiếp đến là phần tử
Name
Address
Email
01. Mặc dù biểu mẫu HTML hỗ trợ một số thuộc tính nhưng chỉ cần đặt hai thuộc tính. Name
Address
Email
02 và Name
Address
Email
03. Name
Address
Email
03 xác định cách gửi nội dung của biểu mẫu. Name
Address
Email
02 xác định nơi nội dung biểu mẫu được gửi khi biểu mẫu được gửiĐặt
Name
Address
Email
02 thành Name
Address
Email
07 có nghĩa là nội dung của biểu mẫu được gửi như một phần của nội dung yêu cầu HTTP. Các giá trị có thể truy xuất được trong PHP thông qua siêu toàn cầu Name
Address
Email
08. Thay thế cho Name
Address
Email
07 là Name
Address
Email
10, chuyển các giá trị của biểu mẫu như một phần của URL. Các giá trị được gửi bằng GET có thể truy xuất được bằng PHP thông qua siêu toàn cầu Name
Address
Email
11Sự khác biệt chính giữa các phương pháp
Name
Address
Email
07 và Name
Address
Email
10 là khả năng hiển thị. Có rất nhiều bài viết trên Web về việc lựa chọn giữa chúng, nhưng lời khuyên của tôi là hãy sử dụng POST khi sử dụng các biểu mẫu, trừ khi bạn có lý do chính đáng để chuyển dữ liệu người dùng vào một URL có thể xem đượcTrong ví dụ trên,
Name
Address
Email
02 được đặt thành kết quả của việc chuyển giá trị của Name
Address
Email
15, là tên của tập lệnh hiện tại đang được thực thi, cho phương thức Name
Address
Email
16 của PHP. Phương pháp này được sử dụng để chuyển đổi các ký tự HTML cụ thể thành tên thực thể HTML của chúng. ví dụ: Name
Address
Email
17 sẽ được chuyển đổi thành Name
Address
Email
18Điều này làm hai điều
- Nó ngăn biểu mẫu bị hỏng, nếu người dùng gửi đánh dấu HTML
- Nó là một phương tiện bảo vệ chống lại các cuộc tấn công XSS [Cross-Site Scripting], mà những kẻ tấn công sẽ sử dụng để cố gắng khai thác các lỗ hổng trong các ứng dụng web. Để tìm hiểu về các lỗ hổng phổ biến khác, hãy xem Top 10 của OWASP
Ghi chú. trong một ứng dụng thực tế, bạn có thể sẽ sử dụng nhiều hơn
Name
Address
Email
19 để làm sạch đầu vào của biểu mẫu, chẳng hạn như thư viện của bên thứ ba như laminas-filterSử dụng
Name
Address
Email
15 tốt hơn là chỉ cần mã hóa cứng một vị trí nếu bạn muốn biểu mẫu của mình đăng lại cùng một tập lệnh đã tạo ra nó, vì bạn sẽ không phải cập nhật mã nếu bạn thay đổi tên của tập lệnhNgay trước khi chúng ta kết thúc thảo luận về biểu mẫu, đây là ba điều cần nhớ khi làm việc với biểu mẫu HTML
- Tất cả các điều khiển biểu mẫu phải được đính kèm trong các thẻ
01Name Address Email
- Việc căn chỉnh các điều khiển văn bản và biểu mẫu có thể đạt được theo nhiều cách. CSS là tùy chọn ưu tiên cho việc này, đặc biệt là với tất cả các công cụ bố cục mới hiện có, bao gồm Flexbox và Grid. [Vui lòng không sử dụng bảng để bố trí, vì các phần tử biểu mẫu không phải là dữ liệu dạng bảng. ]
- Để có thêm khả năng truy cập, bạn nên xem xét phần tử
32 để nhóm các phần tử biểu mẫuName Address Email
Xử lý biểu mẫu
Bây giờ bạn đã xác định biểu mẫu trong HTML, hãy làm việc thông qua mã xử lý biểu mẫu. Trước khi chúng tôi làm điều đó, hãy lưu ý rằng biểu mẫu có thể ở một trong hai trạng thái
- Một biểu mẫu trống được tải khi trang được tải lần đầu tiên
- Biểu mẫu được tải nếu biểu mẫu không xác thực. Ở trạng thái này, các trường mà người dùng điền vào sẽ chứa giá trị được cung cấp. Các trường khác sẽ trống với thông báo lỗi bên cạnh chúng
Xác thực nội dung biểu mẫu
Khi biểu mẫu được gửi, các mục nhập sau sẽ được lưu trữ trong mảng
Name
Address
Email
08 [hoặc mảng Name
Address
Email
11 tùy thuộc vào thuộc tính Name
Address
Email
03 của biểu mẫu]. Các giá trị trong cột bên trái được lấy từ thuộc tính
0
1
2
More than 2
7 của điều khiển và tôi cũng đã đánh dấu xem trường này có phải là trường bắt buộc cho mục đích xác thực hay khôngLoại trườngBắt buộc hoặc Tùy chọntên biến đơn giá trịbắt buộcđịa chỉbiến đơn giá trịbắt buộcemailbiến đơn giá trịbắt buộccách thứcNhiều biến đơn giá trịbắt buộc – phải chọn một ưa thíchFruitarraybắt buộc – phải chọn mộtcuốn sách quảng cáobiến đơn giá trịtùy chọnNếu người dùng không tuân thủ các quy tắc này, một thông báo lỗi sẽ được hiển thị. Bất kỳ trường nào đã hoàn thành sẽ không thay đổi, cho phép người dùng chỉ cần điều chỉnh đầu vào của họ và gửi lại biểu mẫu mà không phải nhập lại dữ liệu
Trước khi chúng tôi tiếp tục, việc xác thực mà chúng tôi đang thực hiện trong mã trong bài viết này cực kỳ đơn giản. Thông thường, bạn sẽ thực hiện xác thực phức tạp hơn nhiều, chẳng hạn như
- liệu các trường nhất định không dài hơn một độ dài nhất định
- Địa chỉ email có đáp ứng đặc tả địa chỉ email hay không
- nếu ngày bắt đầu có định dạng đúng và trước hoặc sau một ngày nhất định
Để làm điều đó, bạn có thể sử dụng thư viện của bên thứ ba, chẳng hạn như laminas-validator hoặc thành phần xác thực Symfony
Tuy nhiên, điều đó nằm ngoài phạm vi của bài viết này.
Hãy xem PHP cần thiết để xác thực biểu mẫu, được đặt ở đầu trang, trước HTML cho biểu mẫu
0
1
2
More than 2
0Mã khởi tạo ba mảng
37. ban đầu trống, điều này lưu trữ các trường biểu mẫu không xác thực đượcName Address Email
38. điều này lưu trữ tất cả các tên trường sẽ được xử lýName Address Email
39. cái này lưu tên trường là tùy chọnName Address Email
00. ban đầu trống, đây là một mảng kết hợp sẽ chứa các trường được cung cấp và giá trị của chúng0 1 2 More than 2
Sau đó, nó sẽ kiểm tra xem phương thức được sử dụng để gửi biểu mẫu đã được đặt thành
Name
Address
Email
07 chưa. Nếu vậy, nó sẽ lặp lại các giá trị trong mảng và kiểm tra xem siêu toàn cục Name
Address
Email
08 có chứa tên trường liên quan hay không. Nếu vậy và trường có giá trị, thì trường và giá trị của nó được lưu trữ trong mảng
0
1
2
More than 2
00. Tuy nhiên, nếu trường trống và nó không có trong mảng Name
Address
Email
39, thì nó sẽ được thêm vào mảng Name
Address
Email
37Trong ví dụ ở đây, chúng tôi đang kiểm tra mảng
Name
Address
Email
08 vì phương thức của biểu mẫu được đặt thành Name
Address
Email
07. Nếu Name
Address
Email
03 được đặt thành Name
Address
Email
10, mã sẽ được cập nhật để kiểm tra siêu toàn cầu Name
Address
Email
11 thay thếSau khi kiểm tra lỗi gửi, theo một cách khá thô sơ, mã sẽ in ra các giá trị mà người dùng đã gửi, nếu không có lỗi nào được ghi lại
0
1
2
More than 2
5Sau khi chạy mã này, HTML cho trang được hiển thị. Cho rằng chúng tôi sẽ hiển thị lại biểu mẫu với các giá trị mà người dùng đã cung cấp, chúng tôi cần cập nhật biểu mẫu một chút. Cụ thể, một số mã PHP cần được tích hợp vào HTML cho từng phần tử
Đối với các trường đầu vào, chúng tôi sẽ cập nhật chúng để đặt giá trị của chúng như trong ví dụ sau, điền giá trị của trường tên
0
1
2
More than 2
6Name
Address
Email
16 được sử dụng ở đây vì lý do tương tự như nó đã được sử dụng trước đó với
0
1
2
More than 2
52 – để bảo vệ chống lại các cuộc tấn công XSS. Sau đó, HTML sau sẽ được thêm vào sau trường đầu vào để hiển thị thông báo lỗi nếu giá trị không được cung cấp
0
1
2
More than 2
9Việc sử dụng lớp
0
1
2
More than 2
53 cung cấp một cái móc để định kiểu thông báo lỗi bằng CSS
0
1
2
More than 2
0Mở rộng khả năng sử dụng của biểu mẫu
Với một chút nỗ lực hơn, bạn cũng có thể nhớ các lựa chọn mà người dùng đã thực hiện từ các nút radio và chọn
0
1
2
More than 2
1Mã đã được thêm vào để kiểm tra xem biến được liên kết với nút radio đã được xác định trong phần xác thực chưa. Nếu vậy,
0
1
2
More than 2
54 được xuất ra như một phần của HTML của phần tửBây giờ để giải quyết menu chọn. Thực sự là một ý tưởng tốt hơn nếu cấu trúc lại mã dưới dạng một vòng lặp hơn là thêm mã một cách mù quáng để kiểm tra từng tùy chọn theo cách thủ công. Vòng lặp có thể tạo HTML cho các tùy chọn một cách nhanh chóng và kiểm tra xem tùy chọn đã được chọn hay chưa có thể được tích hợp vào đó
0
1
2
More than 2
2Nếu bạn chưa quen với PHP loops, bạn có thể muốn đọc bài viết “Learning Loops”
Lưu ý rằng sự khác biệt ở đây là việc sử dụng thuộc tính
0
1
2
More than 2
55. các nút radio sử dụng
0
1
2
More than 2
54, trong khi tùy chọn
0
1
2
More than 2
57 sử dụng
0
1
2
More than 2
55. Đó chỉ là một trong những mâu thuẫn nhỏ mà chúng ta phải chung sốngMột chủ đề mà tôi chưa giải quyết và nằm ngoài phạm vi của bài viết này là bạn sẽ làm gì với dữ liệu sau khi xác thực thành công. Có một số khả năng, bao gồm lưu nó vào cơ sở dữ liệu hoặc gửi dữ liệu qua email cho chính bạn. Cho dù bạn chọn cái nào, bạn cần phải chắc chắn rằng
- biểu mẫu đã được gửi bởi người dùng
- dữ liệu do người dùng nhập không có lỗi
Bản tóm tắt
Xác thực là điều cần thiết, đặc biệt nếu bạn định lưu dữ liệu đã gửi vào cơ sở dữ liệu hoặc một số hình thức lưu trữ liên tục khác. Khi xác thực, bạn nên ghi nhớ câu nói cũ GIGO [Garbage In, Garbage Out] và bạn sẽ không đi quá xa
Trong bài viết này, bạn đã học được bốn điều
- cách tạo biểu mẫu HTML cơ bản
- cách xác thực biểu mẫu bằng PHP
- cách hiển thị lại đầu vào của người dùng
- cách hiển thị thông báo lỗi
Để biết thêm thông tin về
0
1
2
More than 2
59, Name
Address
Email
08 và Name
Address
Email
11, hãy đọc bài viết “Giới thiệu các siêu toàn cầu” và, tất nhiên, tài liệu PHPChia sẻ bài viết này
Iain Tench
Iain Tench đã làm việc trong ngành CNTT được 30 năm với tư cách là lập trình viên, quản lý dự án [Học viên Prince2], cố vấn và giáo viên. Là người quản lý dự án, ông chuyên về các dự án tích hợp chủ yếu liên quan đến hệ thống thanh toán trong lĩnh vực tài chính. Anh ấy hiện đang giảng dạy và đã có bằng Thạc sĩ về Phát triển Hệ thống Internet cũng như chứng chỉ giảng dạy. Lĩnh vực giảng dạy chuyên môn của Iain là công nghệ web, chủ yếu là lập trình bằng nhiều ngôn ngữ, HTML, CSS và tích hợp cơ sở dữ liệu. Anh ấy cũng đã viết một cuốn sách về Dreamweaver CS3 cho Hodder Education
Matthew Setter
Matthew Setter là nhà phát triển phần mềm, chuyên về mã PHP đáng tin cậy, đã được thử nghiệm và bảo mật. Anh ấy cũng là tác giả của Mezzio Essentials [https. // nhu yếu phẩm mezzio. com] giới thiệu toàn diện về phát triển ứng dụng với Khung Mezzio của PHP