Chúng tôi tạo một biểu mẫu đăng ký người dùng tùy chỉnh trên WordPress. Tạo biểu mẫu đăng ký người dùng tùy chỉnh trên mẫu đăng ký người dùng WordPress Majestic html

Tiết lộ: Sự hỗ trợ của bạn giúp duy trì hoạt động của trang web! Chúng tôi kiếm được phí giới thiệu cho một số dịch vụ mà chúng tôi đề xuất trên trang này. Tìm hiểu thêm

Chia sẻ là quan tâm!

Cập nhật lần cuối vào ngày 17 tháng 12 năm 2019

Các biểu mẫu web được hầu hết các trang web sử dụng cho nhiều mục đích khác nhau. Người dùng diễn đàn và mạng xã hội sử dụng các biểu mẫu để thêm nội dung và tương tác với những người dùng khác. Các trang web có thể được tùy chỉnh để tạo trải nghiệm cá nhân hóa, chẳng hạn như nguồn cấp tin tức có thể tùy chỉnh, sử dụng các biểu mẫu để cho phép người dùng kiểm soát nội dung xuất hiện trên trang. Và gần như mọi trang web đều sử dụng các biểu mẫu để cho phép khách truy cập trang web liên hệ với tổ chức hoặc người quản lý trang web. Các biểu mẫu web được thực hiện nhờ sự tích hợp của nhiều công nghệ:

  • HTML để tạo các trường và nhãn biểu mẫu và chấp nhận dữ liệu nhập của người dùng.
  • CSS để định kiểu cách trình bày biểu mẫu.
  • JavaScript để xác thực dữ liệu nhập vào biểu mẫu và cung cấp các tương tác hỗ trợ Ajax.
  • Các ngôn ngữ phía máy chủ như PHP để xử lý dữ liệu biểu mẫu.

Trong hướng dẫn này, chúng tôi sẽ đề cập đến tất cả các thành phần HTML được sử dụng để tạo biểu mẫu web. Chúng tôi cũng có các phần tử khác bao gồm các chủ đề như xây dựng biểu mẫu, tạo kiểu và thiết kế biểu mẫu cũng như đảm bảo khả năng sử dụng và khả năng truy cập của biểu mẫu.

Xác định cấu trúc của một biểu mẫu

Nội dung đoạn văn.

Mẫu liên hệ

Tên:

E-mail:

Chủ thể:

Tin nhắn: Nhập tin nhắn của bạn vào đây

Nội dung đoạn văn bổ sung

Khi được hiển thị trong trình duyệt, biểu mẫu liên hệ sẽ được tách biệt rõ ràng với nội dung xung quanh.

Phần tử bộ trường là tùy chọn nhưng thường được sử dụng để nhóm các phần tử liên quan trên các biểu mẫu dài và phức tạp hoặc để tách các trường biểu mẫu khỏi các phần tử lân cận khi biểu mẫu được trình bày cùng với nội dung không phải biểu mẫu. HTML5 đã thêm ba thuộc tính có thể được áp dụng cho các phần tử fieldset:

  • bị vô hiệu hóa: Được sử dụng để vô hiệu hóa tất cả các biểu mẫu trong một fieldset. Lưu ý rằng chúng tôi đã sử dụng thuộc tính này trong mẫu ví dụ ở trên.
  • biểu mẫu: Được sử dụng để liên kết một tập trường với id của một hoặc nhiều thành phần biểu mẫu. Lưu ý rằng trình duyệt hỗ trợ thuộc tính này rất hạn chế.
  • name: Liên kết tên với fieldset .
Yếu tố đầu vào

Tùy thuộc vào loại biểu mẫu bạn đang tạo, hoàn toàn có thể có một biểu mẫu chỉ bao gồm hai loại phần tử: một phần tử biểu mẫu và một hoặc nhiều phần tử đầu vào. Phần tử này dùng để tạo ra nhiều loại phần tử đầu vào khác nhau các trường để người dùng biểu mẫu tương tác.

Giá trị chung

Phần tử đầu vào là một phần tử rất linh hoạt, ngoại hình và hành vi của nó có thể thay đổi đáng kể dựa trên thuộc tính loại được áp dụng cho phần tử. Các giá trị loại phổ biến nhất bao gồm: text: Giá trị mặc định cho thuộc tính type="". Xác định một dòng văn bản rộng 20 ký tự. Chiều rộng có thể được điều chỉnh bằng thuộc tính size như bạn có thể thấy trong mã biểu mẫu trong ví dụ trước của chúng tôi.

mật khẩu : Loại mật khẩu về cơ bản giống với trường văn bản ngoại trừ các ký tự được nhập vào trường mật khẩu sẽ bị che đi.

Các loại đầu vào này ít phổ biến hơn những loại được liệt kê ở trên nhưng hầu như được hỗ trợ bởi tất cả các trình duyệt và có thể được sử dụng để tạo nhiều loại đầu vào biểu mẫu khác nhau.

nút : Nếu bạn muốn chạy khi một nút được nhấp vào, loại đầu vào nút có thể được sử dụng để tạo một nút có thể được liên kết với nhiều hành động khác nhau.

Một số loại đầu vào bổ sung được xác định theo đặc tả HTML5. Nhiều loại trong số này có hỗ trợ trình duyệt hạn chế. Vì vậy, nếu bạn sử dụng chúng, hãy nhớ kiểm tra caniuse.com để được trình duyệt hỗ trợ và cung cấp các tùy chọn dự phòng đầy đủ khi thích hợp.

tìm kiếm : Đây là loại thích hợp để chỉ định xem biểu mẫu của bạn có cung cấp chức năng tìm kiếm hay không. Không giống như hầu hết các loại đầu vào khác được thêm vào HTML5, type="search" được tất cả các trình duyệt hỗ trợ. Chỉ cần nhớ rằng tính năng này không thực sự cung cấp chức năng tìm kiếm, nó chỉ tạo một trường nhập biểu mẫu được thiết kế để sử dụng như một phần của màu tìm kiếm: Khi loại đầu vào này được chỉ định, nó sẽ hiển thị một nút màu khởi chạy một tính năng. công cụ chọn màu cơ bản. Đặt giá trị màu mặc định bằng cách sử dụng thuộc tính value và mã màu hex như sau: . Loại này tạo ra một trường để nhập số có các nút tăng ở phía bên phải của hộp. trong số các mục nhập có thể chấp nhận được với các thuộc tính max , min và step , nhưng các trình duyệt thiếu hỗ trợ cho phần tử này thường chuyển sang kiểu nhập văn bản tiêu chuẩn không nhận ra các phạm vi giới hạn này : Trình duyệt hỗ trợ cho phần tử này khá tốt với một vài ngoại lệ. thuộc tính này để tạo một thanh trượt có thể được sử dụng để chọn một giá trị trong một phạm vi được chỉ định. Ví dụ: mã này sẽ tạo ra một thanh trượt để chọn một số từ 100 đến 1000 với gia số là 50: . Bạn sẽ cần ghép nối phần tử phạm vi với một kỹ thuật khác để cung cấp bản xem trước trực tiếp của giá trị đã chọn. Rất may, HTML5 Doctor có một cách đơn giản để thực hiện việc này bằng cách sử dụng phần tử đầu ra. Loại ngày và giờ : HTML5 đã thêm một số loại đầu vào có thể được sử dụng để chỉ định các giá trị ngày và giờ. Ví dụ: loại ngày xác định một điều khiển để nhập năm, tháng và ngày. Để thêm thời gian vào dữ liệu nhập ngày, hãy sử dụng loại dữ liệu nhập thời gian Ít hơn. các loại đầu vào cụ thể bao gồm các tùy chọn tháng và tuần có thể được sử dụng để chọn một tuần hoặc tháng trong một năm mà không chỉ định ngày hoặc giờ. Các trình duyệt đã chậm thêm hỗ trợ cho loại này, vì vậy hãy đảm bảo kiểm tra sự hỗ trợ của trình duyệt. cung cấp dự phòng nếu bạn sử dụng loại đầu vào này. Hỗ trợ rộng rãi có sẵn cho ba loại đầu vào được sử dụng để thu thập các chi tiết thích hợp như địa chỉ email (email), số điện thoại (tel) và URL trang web (url).

Mặc dù thuộc tính type cho đến nay là thuộc tính đầu vào được sử dụng nhiều nhất và hữu ích nhất, nhưng có một số thuộc tính khác mà bạn cần biết để xây dựng các biểu mẫu hữu ích.

name : Tên được gán cho phần tử đầu vào sẽ được gửi cùng với giá trị được nhập vào trường liên quan. Nói cách khác, nếu giá trị “Fred” được nhập vào phần tử đầu vào có mã này thì giá trị được gửi sẽ là “first_name=Fred”.

value : Giá trị của phần tử đầu vào thực hiện một chức năng khác nhau tùy thuộc vào loại đầu vào mà nó được áp dụng. Khi được áp dụng cho các loại nút gửi, đặt lại hoặc nút, giá trị được sử dụng làm văn bản trên nút. Khi áp dụng cho các trường văn bản, nó sẽ cung cấp giá trị mặc định được liên kết với trường đó. Khi được liên kết với hộp kiểm hoặc nút radio, giá trị sẽ cung cấp giá trị sẽ được liên kết với trường đó nếu được chọn.

Ai đã giới thiệu bạn đến trang web của chúng tôi?:

Hồng:

Màu đỏ:

HTML5 đã thêm nhiều thuộc tính mới có thể được liên kết với các phần tử đầu vào. Hỗ trợ trình duyệt cho một số thành phần này bị hạn chế, vì vậy hãy nhớ kiểm tra hỗ trợ và cung cấp tùy chọn dự phòng cho người dùng trình duyệt không được hỗ trợ.

  • tự động hoàn thành : Nếu biểu mẫu của bạn bao gồm các trường phổ biến, việc bật tự động hoàn thành sẽ cho phép trình duyệt của khách truy cập đề xuất các mục nhập dựa trên các biểu mẫu đã hoàn thành trước đó.
  • formenctype : Chỉ định loại mã hóa sẽ được sử dụng để gửi biểu mẫu. Giá trị được sử dụng sẽ ghi đè giá trị được áp dụng cho thuộc tính enctype của phần tử biểu mẫu gốc.
  • formmethod: Thuộc tính này được sử dụng để chỉ định giá trị phương thức get hoặc post và sẽ ghi đè thuộc tính phương thức được áp dụng cho biểu mẫu gốc.
  • formnovalidate : Nếu bạn không muốn xác thực thông tin nhập vào biểu mẫu khi gửi, bạn có thể sử dụng thuộc tính này.
  • formtarget : Ghi đè thuộc tính đích được áp dụng cho thành phần biểu mẫu gốc bằng cách áp dụng thuộc tính này cho trường loại gửi hoặc loại đầu vào hình ảnh.

Xác định Kích thước của type="image" : Nếu bạn sử dụng loại đầu vào hình ảnh để tạo nút gửi biểu mẫu, bạn có thể kiểm soát kích thước của hình ảnh bằng cách sử dụng thuộc tính chiều cao và chiều rộng. Ngoài ra, bạn có thể làm điều tương tự với CSS. Hầu hết các nhà phát triển và nhà thiết kế đều khuyên bạn nên tránh các thuộc tính này và kiểm soát giao diện nút bằng CSS. Đặt giới hạn và mức tăng cho các giá trị số: Bạn có thể sử dụng các thuộc tính min, max và step để xác định các giá trị tối thiểu và tối đa cũng như mức tăng có thể chấp nhận nằm giữa các giá trị này cho bất kỳ đầu vào nào chấp nhận giá trị số.

Trình đơn thả xuống, vùng văn bản và nút

Đầu vào không phải là thành phần duy nhất có thể được sử dụng để tạo trường biểu mẫu. Các loại thành phần khác có thể được liên kết với biểu mẫu để tạo danh sách hoặc tùy chọn thả xuống, vùng văn bản dạng tự do và các nút linh hoạt.

Danh sách thả xuống được điền trước

Để tạo danh sách thả xuống gồm các tùy chọn được điền trước mà khách truy cập trang web có thể chọn một tùy chọn, hãy sử dụng phần tử chọn để tạo trường và lồng nhiều phần tử tùy chọn để tạo các tùy chọn khác nhau sẽ xuất hiện trong menu thả xuống . Ví dụ: để tạo menu thả xuống gồm các tùy chọn màu sắc hấp dẫn cho một cửa hàng thương mại điện tử hư cấu, có thể sử dụng đoạn mã sau:

Cồn cát lộng gió Rừng rậm Nước động Đêm sâu

Lưu ý rằng giá trị là những gì thực sự sẽ được gửi cùng với biểu mẫu trong khi văn bản giữa thẻ mở và thẻ đóng là những gì được hiển thị cho khách truy cập hoàn thành biểu mẫu. Ví dụ: nếu khách truy cập chọn “Rừng tươi tốt” thì giá trị thực tế được gửi cùng với biểu mẫu sẽ có màu xanh lục . Đây là cách danh sách thả xuống của chúng tôi hiển thị trong trình duyệt:

Cồn cát lộng gió Rừng rậm Nước động Đêm sâu

Vùng văn bản dạng tự do

Tất cả các kiểu nhập văn bản mà chúng ta đã thấy cho đến nay, chẳng hạn như , chỉ chấp nhận một dòng văn bản. Tuy nhiên, nếu bạn muốn tạo một vùng văn bản lớn hơn để nhập văn bản dài hơn thì trường nhập một dòng sẽ không hoạt động. Phần tử vùng văn bản là lựa chọn chính xác để tạo vùng nhập văn bản lớn có khả năng chấp nhận kiểu nhập văn bản không hiển thị tốt trên một dòng. Có ba phần trong vùng văn bản:

  • Vùng văn bản được tạo bằng cách chèn thẻ mở và đóng. Bất kỳ văn bản nào được lồng giữa các thẻ sẽ được tải trong vùng văn bản khi biểu mẫu tải và sẽ được gửi cùng với biểu mẫu trừ khi khách truy cập gửi biểu mẫu sẽ xóa văn bản ra khỏi vùng văn bản.
  • Nếu bạn muốn xác định kích thước của vùng văn bản, hãy sử dụng thuộc tính row để xác định số lượng hàng văn bản có thể hiển thị mà không cần thay đổi kích thước vùng văn bản.
  • Để đặt chiều rộng được xác định trước, hãy sử dụng thuộc tính cols. Giá trị được áp dụng sẽ là số ký tự sẽ xuất hiện trên một hàng trước khi gói sang hàng thứ hai.

    • Các phần tử vùng văn bản có thể thay đổi kích thước. Tuy nhiên, các thuộc tính row và cols sẽ xác định kích thước của vùng văn bản khi nó được trình duyệt hiển thị lần đầu tiên và cũng sẽ đặt khoảng trống tối thiểu mà vùng đó có thể được thay đổi kích thước cho phù hợp.


    Nhập văn bản ở đây

    Mã này sẽ tạo ra hai vùng văn bản có kích thước giống nhau, cao ba hàng và có thể chấp nhận 60 ký tự mỗi hàng. Chúng sẽ có thể thay đổi kích thước thành bất kỳ kích thước nào lớn hơn kích thước mặc định. Lưu ý cách văn bản giữ chỗ được thêm vào văn bản đầu tiên bằng phần tử giữ chỗ nhưng chỉ được lồng giữa thẻ mở và thẻ đóng trong ví dụ thứ hai. Dưới đây bạn có thể thấy hai bit mã này được hiển thị như thế nào.

    Mặc dù kích thước vùng văn bản có thể được chỉ định bằng cách sử dụng 'hàng" và 'cols", nhưng cách tốt hơn là sử dụng CSS để tạo kiểu và định kích thước vùng văn bản.

    Nhiều thuộc tính có thể áp dụng cho phần tử đầu vào cũng có thể được áp dụng cho phần tử vùng văn bản. Ngoài ra, đối với những thuộc tính có trong ví dụ của chúng tôi ở trên, các thuộc tính có thể được áp dụng cho vùng văn bản bao gồm: tự động lấy nét , bị vô hiệu hóa , biểu mẫu , maxlength , tên , chỉ đọc , bắt buộc và quấn .

    Nút linh hoạt

    Có 2 cách tạo nút cho biểu mẫu:

  • Vì các nút được tạo bằng thẻ mở và thẻ đóng nên các loại nội dung khác nhau – thường là văn bản và hình ảnh – có thể được lồng giữa thẻ mở và thẻ đóng và sẽ được hiển thị trên nút.
  • Các nút không nhất thiết phải được liên kết với một phần tử biểu mẫu. Chúng có thể được sử dụng làm nút độc lập để bắt đầu tập lệnh, làm nội dung của phần tử neo và thực hiện các hành động khác.
    • Các phần tử biểu mẫu được thêm vào HTML5

    Ba phần tử biểu mẫu mới đã được thêm vào HTML5: datalist : Sử dụng phần tử này để cung cấp danh sách các giá trị tự động hoàn thành được đề xuất cho phần tử đầu vào. Để sử dụng phần tử datalist, trước tiên hãy tạo phần tử đầu vào có thuộc tính danh sách. Sau đó tạo phần tử datalist với thuộc tính id. Giá trị được áp dụng cho thuộc tính danh sách đầu vào phải khớp với id nhà dữ liệu. Các giá trị được thêm vào datalist bằng cách thêm các phần tử tùy chọn giữa thẻ datalist mở và đóng. Đây là một ví dụ về cách hoạt động của tất cả những điều này:

    Khi chúng tôi kết xuất mã đó trong trình duyệt và phần tử đầu vào sẽ xuất hiện. Nếu chúng ta bắt đầu nhập, các đề xuất tự động hoàn thành sẽ được đưa ra dựa trên các tùy chọn có trong danh sách dữ liệu. Lưu ý rằng người dùng gửi biểu mẫu không bị giới hạn trong việc chọn từ một trong các tùy chọn này. Họ vẫn có thể chọn nhập một giá trị không phải là tùy chọn được bao gồm nếu họ muốn làm như vậy.

    Công nghệ web yêu thích của bạn là gì?

    đầu ra : Sử dụng phần tử này để hiển thị kết quả tính toán hoặc đầu vào của người dùng. Liên kết nó với một phần tử đầu vào bằng cách sử dụng thuộc tính for với giá trị khớp với id của phần tử đầu vào có liên quan hoặc liên kết nó với một biểu mẫu bằng cách thêm thuộc tính biểu mẫu bằng cách sử dụng giá trị khớp với id của biểu mẫu liên quan. Phần tử đầu ra cũng có thể được ghép nối với phần tử phạm vi để cho phép người dùng biểu mẫu biết giá trị chính xác được biểu thị bằng vị trí hiện tại của thanh trượt của phần tử phạm vi. Việc sử dụng các phần tử đầu ra và phạm vi theo cách này nằm ngoài phạm vi của hướng dẫn giới thiệu này, nhưng nếu muốn sử dụng hai phần tử này cùng nhau, bạn có thể tìm hiểu thêm về kỹ thuật này tại HTML5 Doctor.

    Các bước tiếp theo

    Hướng dẫn này đã cung cấp cái nhìn tổng quan về các thành phần được sử dụng để xây dựng biểu mẫu cho web. Bước tiếp theo là thử một số kiến ​​thức bạn đã thu được. Các hướng dẫn khác trong phần này sẽ hướng dẫn bạn qua quy trình tạo biểu mẫu đặt chỗ, tạo kiểu và thiết kế biểu mẫu cũng như đảm bảo rằng biểu mẫu của bạn đáp ứng các nguyên tắc về khả năng sử dụng và khả năng truy cập.

    Câu hỏi thường gặp Làm cách nào để hạn chế trường biểu mẫu chỉ chấp nhận số?

    Trước đây, việc giới hạn một trường ở số chỉ yêu cầu sử dụng JavaScript. Tuy nhiên, với việc phát hành HTML5, giờ đây việc giới hạn một trường chỉ ở dạng số đã trở nên đơn giản. Chỉ cần áp dụng giá trị số cho thuộc tính loại của phần tử đầu vào áp dụng. Ví dụ:

    Khi được hiển thị, sẽ tạo ra trường nhập văn bản chỉ chấp nhận số.

    Làm cách nào để hạn chế trường biểu mẫu chỉ chấp nhận các ký tự chữ và số?

    Trước đây, cách duy nhất để giới hạn trường nhập vào các ký tự chữ và số là sử dụng jQuery hoặc JavaScript và tạo một hàm tùy chỉnh. Tuy nhiên, HTML5 đã thêm thuộc tính mẫu cho các thành phần đầu vào có thể được sử dụng để hạn chế trường biểu mẫu chỉ chấp nhận đầu vào chữ và số. Đây là đoạn mã sẽ thực hiện thủ thuật:

    Trong trường hợp này, thành phần mẫu sẽ chấp nhận chữ thường, chữ in hoa và số. Phần thứ hai của giá trị trong dấu ngoặc nhọn quy định tổng số ký tự có thể được nhập vào trường. Hãy xem nó trông như thế nào trong trình duyệt.

    Cách thức hoạt động là khi bạn cố gắng gửi các giá trị không đáp ứng mẫu đã chỉ định, thuộc tính tiêu đề sẽ được hiển thị. Vì vậy, bạn nên đặt một số hướng dẫn bên trong thuộc tính mẫu để người dùng có thể tìm ra họ đã làm gì sai . Hỗ trợ trình duyệt cho thuộc tính tương đối mới này thực sự khá tốt. IE 9 và các phiên bản IE cũ hơn không hỗ trợ nó và Opera Mini cũng thiếu hỗ trợ. Tuy nhiên, tất cả các trình duyệt khác đều hỗ trợ thuộc tính này.

    Làm cách nào để gửi biểu mẫu khi người dùng nhấn enter?

    Nếu bạn gặp một biểu mẫu không gửi khi bạn nhấn enter thì ai đó đã cố tình thiết kế biểu mẫu đó để hoạt động theo cách đó – và họ thực sự không nên làm điều đó. Thông số kỹ thuật về khả năng truy cập web rất rõ ràng: các biểu mẫu thiết kế để cho phép gửi ngầm. Sự phục tùng ngầm là gì? Gửi biểu mẫu bằng cách nhấn enter. Các trình duyệt được thiết kế để hỗ trợ việc gửi ngầm. Đây là cách nó hoạt động. Lấy mẫu này làm ví dụ:

    Tên:
    Tuổi:

    Nếu bạn tập trung vào bất kỳ thành phần nào trong biểu mẫu đó và nhấn enter, biểu mẫu sẽ được gửi. Đây là sự gửi ngầm và tất cả các trình duyệt hiện đại đều hỗ trợ hành vi này. Sử dụng thành phần nút trong biểu mẫu và bạn thậm chí không phải sử dụng giá trị gửi cho thuộc tính loại. Nhấn enter trong khi tập trung vào bất kỳ thành phần nào trong biểu mẫu này và biểu mẫu sẽ vẫn được gửi.

    Tên:
    Tuổi:
    Nộp

    Vậy làm thế nào để các nhà phát triển phá vỡ hành vi này? Một cách để giải quyết hành vi này–và để rõ ràng, chúng tôi không khuyến nghị điều này–là loại bỏ các thành phần biểu mẫu. Trình duyệt biết những gì cần gửi bằng cách nhóm mọi thứ lại với nhau giữa các thẻ biểu mẫu. Hãy bỏ các thẻ đó và trình duyệt sẽ không làm như vậy. không biết phải nộp cái gì. Một cách khác mà một số nhà phát triển thao túng hành vi của trình duyệt là sử dụng CSS để tạo các nút thay vì các phần tử HTML thích hợp, như thế này.

    .submitButton ( đệm: 10px 20px; lề trên: 10px; màu nền: #ddd; bán kính đường viền: 5px; hiển thị: khối nội tuyến; ) .submitButton:hover ( màu nền: #ccc; ) .submitButton: đang hoạt động ( màu nền: #ddd; ) Tên:
    Tuổi:
    Nộp

    Khi được trình duyệt hiển thị, nút này sẽ tạo ra một nút trông giống như một nút nhưng không làm gì khi nhấn enter.

    SubmitButton(padding: 10px 20px; lề trên: 10px; màu nền: #ddd; bán kính đường viền: 5px; hiển thị: khối nội tuyến;).submitButton:hover(background-color: #ccc;).submitButton:active (màu nền: #ddd;)

    Dưới đây là một ví dụ về mã html cho mẫu đăng ký sinh viên. Trong ví dụ này, chúng tôi đã hiển thị nhiều trường văn bản, nút radio, nút Đặt lại và nút Gửi biểu mẫu. Chúng tôi đã sử dụng nút Đặt lại để đặt lại tất cả các trường thành trống. Chúng tôi đã sử dụng xác thực JavaScript trong mẫu đăng ký của sinh viên.

    Dưới đây là một ví dụ về mã html cho mẫu đăng ký sinh viên. Trong ví dụ này, chúng tôi đã hiển thị nhiều trường văn bản, nút radio, nút Đặt lại và nút Gửi biểu mẫu. Chúng tôi đã sử dụng nút Đặt lại để đặt lại tất cả các trường thành trống. Chúng tôi đã sử dụng xác thực JavaScript trong mẫu đăng ký của sinh viên. mã html cho mẫu đăng ký sinh viên

    Dưới đây là một ví dụ về mã html cho mẫu đăng ký sinh viên. Trong ví dụ này, chúng tôi đã hiển thị nhiều trường văn bản, nút radio, nút Đặt lại và nút Gửi biểu mẫu. Chúng tôi đã sử dụng nút Đặt lại để đặt lại tất cả các trường thành trống. Chúng tôi đã sử dụng xác thực JavaScript trong mẫu đăng ký của sinh viên. Nếu bạn không nhập giá trị vào trường văn bản thì thông báo lỗi sẽ hiển thị. Trong ví dụ này, chúng tôi đã bắt buộc nhập mọi trường, do đó sẽ hiển thị lỗi nếu một trong số chúng không được điền chính xác. Tuy nhiên, một lập trình viên có thể điều chỉnh nó cho phù hợp.

    Khi tất cả các trường được điền chính xác, biểu mẫu gửi sẽ thêm dữ liệu. Lập trình viên có thể sử dụng biểu mẫu gửi này theo ý muốn, họ có thể gửi/chuyển hướng nó đến trang khác hoặc lưu nó vào cơ sở dữ liệu.

    Đây là video hướng dẫn "Cách tạo mẫu đăng ký sinh viên bằng HTML?":

    Trong video hướng dẫn ở trên, chúng tôi đã giải thích cho bạn cách tạo trang html để đăng ký cho sinh viên và xác thực nó bằng JavaScript. JavaScript được sử dụng để xác thực trang HTML trong các ứng dụng web. Ngày nay Ajax và jQuery cũng được sử dụng để tạo các ứng dụng web động.

    Đăng ký sinh viên.html

    Mẫu đăng ký sinh viên
    Tên
    Tên cha
    Địa chỉ bưu điện
    Địa chỉ cá nhân
    Tình dục Nam Nữ
    Thành phố chọn.. DELHI MUMBAI GOA PATNA MỚI
    Khóa học chọn.. B.TECH MCA MBA BCA
    Huyện chọn.. NALANDA LÊN GOA PATNA
    Tình trạng chọn.. DELHI MUMBAI GOA BIHAR MỚI
    Mã Pin
    Id email
    ngày sinh
    Điện thoại di độngKhông

    Xác thực mẫu

    Hàm xác thực() ( if(document.StudentRegistration.textnames.value == "") ( Alert("Vui lòng cung cấp tên của bạn!"); document.StudentRegistration.textnames.focus() ; return false; ) if(document.StudentRegistration .fathername.value == "") ( cảnh báo("Vui lòng cung cấp Tên cha của bạn!"); document.StudentRegistration.fathername.focus() ; return false; ) if(document.StudentRegistration.paddress.value == "") ( cảnh báo ("Vui lòng cung cấp Địa chỉ bưu chính của bạn!"); document.StudentRegistration.paddress.focus() ; return false; ) if(document.StudentRegistration.personaladdress.value == "") ( cảnh báo("Vui lòng cung cấp Địa chỉ cá nhân của bạn !"); document.StudentRegistration.personaladdress.focus() ; return false; ) if ((StudentRegistration.sex.checked == false) && (StudentRegistration.sex.checked == false)) ( cảnh báo ("Vui lòng chọn giới tính của bạn : Nam hoặc Nữ"); trả về sai; ) if(document.StudentRegistration.City.value == "-1") ( Alert("Vui lòng cung cấp Thành phố của bạn!"); document.StudentRegistration.City.focus() ;

    Trong bài viết này, bạn sẽ tìm hiểu cách tạo biểu mẫu đăng ký và đăng nhập bằng HTML, JavaScript, PHP và MySql. Các biểu mẫu như vậy được sử dụng trên hầu hết mọi trang web, bất kể loại trang web đó. Chúng được tạo cho diễn đàn, cửa hàng trực tuyến, mạng xã hội (chẳng hạn như Facebook, Twitter, Odnoklassniki) và nhiều loại trang web khác.

    Nếu bạn có một trang web trên máy tính cục bộ của mình thì tôi hy vọng rằng bạn đã có . Không có nó, sẽ không có gì hoạt động.

    Tạo một bảng trong Cơ sở dữ liệu

    Để thực hiện đăng ký người dùng, trước hết chúng ta cần có Cơ sở dữ liệu. Nếu bạn đã có rồi thì tuyệt vời, nếu không, bạn cần phải tạo nó. Trong bài viết, tôi giải thích chi tiết cách thực hiện việc này.

    Và như vậy chúng ta đã có một Database (viết tắt là DB), bây giờ chúng ta cần tạo một bảng người dùng trong đó chúng tôi sẽ thêm người dùng đã đăng ký của mình.

    Tôi cũng đã giải thích cách tạo bảng trong cơ sở dữ liệu trong bài viết.

    Trước khi tạo bảng, chúng ta cần xác định bảng sẽ chứa những trường nào. Các trường này sẽ tương ứng với các trường từ mẫu đăng ký. người dùng Vì vậy, chúng tôi đã nghĩ, tưởng tượng những trường mà biểu mẫu của chúng tôi sẽ có và tạo một bảng

    • với các trường này: nhận dạng với các trường này:- Định danh. Cánh đồng
    • Mỗi bảng trong cơ sở dữ liệu nên có nó. tên_đầu tiên
    • - Để lưu tên. họ
    • - Để bảo toàn họ. e-mail
    • - Để lưu địa chỉ bưu điện. Chúng tôi sẽ sử dụng e-mail làm thông tin đăng nhập, vì vậy trường này phải là duy nhất, nghĩa là có chỉ mục ĐỘC ĐÁO. email_status
    • - Trường cho biết thư đã được xác nhận hay chưa. Nếu thư được xác nhận thì nó sẽ có giá trị là 1, nếu không thì giá trị là 0. Theo mặc định, trường này sẽ có giá trị là 0. mật khẩu

    - Để lưu mật khẩu.


    Tất cả các trường thuộc loại “VARCHAR” phải có giá trị mặc định là NULL.

    Nếu bạn muốn mẫu đăng ký của mình có một số trường khác, bạn cũng có thể thêm chúng vào đây. người dùng Thế là xong, bàn của chúng ta

    sẵn sàng. Hãy chuyển sang giai đoạn tiếp theo.

    Kết nối cơ sở dữ liệu

    Chúng ta đã tạo xong cơ sở dữ liệu, bây giờ chúng ta cần kết nối với nó. Chúng tôi sẽ kết nối bằng phần mở rộng PHP MySQLi. Trong thư mục của trang web của chúng tôi, tạo một tệp có tên dbconnect.php

    và viết đoạn script sau vào đó: Trong thư mục của trang web của chúng tôi, tạo một tệp có tên tập tin này

    sẽ cần phải được kết nối với trình xử lý biểu mẫu. Chú ý biến$address_site

    , ở đây tôi đã chỉ ra tên của trang web thử nghiệm mà tôi sẽ làm việc. Vui lòng cho biết tên trang web của bạn cho phù hợp.

    Cấu trúc trang web

    Bây giờ hãy xem cấu trúc HTML của trang web của chúng tôi. Chúng ta sẽ di chuyển đầu trang và chân trang của trang web thành các file riêng biệt, tiêu đề.php chân trang.php. Chúng tôi sẽ đưa chúng vào tất cả các trang. Cụ thể là trên trang chính (tập tin chỉ mục.php), đến trang có mẫu đăng ký (file form_register.php) và đến trang có mẫu ủy quyền (file form_auth.php).

    Chặn bằng các liên kết của chúng tôi, sự đăng ký tiêu đề.php ủy quyền, hãy thêm chúng vào tiêu đề trang web để chúng được hiển thị trên tất cả các trang. Một liên kết sẽ dẫn đến trang có mẫu đăng ký (file form_register.php) và trang còn lại vào trang có biểu mẫu ủy quyền (file form_auth.php).

    Nội dung của tệp header.php:

    Tên trang web của chúng tôi

    Kết quả là trang chính của chúng tôi trông như thế này:


    Tất nhiên, trang web của bạn có thể có cấu trúc hoàn toàn khác, nhưng điều này hiện không quan trọng đối với chúng tôi. Điều chính là có các liên kết (nút) để đăng ký và ủy quyền.

    Bây giờ chúng ta hãy chuyển sang mẫu đăng ký. Như bạn đã hiểu, chúng tôi có nó trong hồ sơ form_register.php.

    Đi tới Cơ sở dữ liệu (trong phpMyAdmin), mở cấu trúc bảng người dùng và xem chúng tôi cần những lĩnh vực nào. Điều này có nghĩa là chúng ta cần các trường để nhập họ và tên, trường để nhập địa chỉ bưu chính (Email) và trường để nhập mật khẩu. Và vì mục đích bảo mật, chúng tôi sẽ thêm trường để nhập hình ảnh xác thực.

    Trên máy chủ, do xử lý biểu mẫu đăng ký, nhiều lỗi khác nhau có thể xảy ra do người dùng không thể đăng ký. Vì vậy, để người dùng hiểu được nguyên nhân đăng ký không thành công, cần hiển thị thông báo về các lỗi này.

    Trước khi hiển thị biểu mẫu, hãy thêm một khối để hiển thị thông báo lỗi từ phiên.

    Và một điều nữa, nếu người dùng đã được ủy quyền và vì tò mò, anh ta sẽ truy cập trực tiếp vào trang đăng ký bằng cách viết vào thanh địa chỉ của trình duyệt site_address/form_register.php, thì trong trường hợp này, thay vì biểu mẫu đăng ký, chúng tôi sẽ hiển thị tiêu đề cho biết anh ấy đã đăng ký.

    Nói chung, mã tập tin form_register.php chúng tôi đã nhận được điều này:

    Bạn đã đăng ký rồi

    Trong trình duyệt, trang có mẫu đăng ký trông như thế này:


    Bằng cách sử dụng thuộc tính bắt buộc, chúng tôi đã đặt tất cả các trường là bắt buộc.

    Hãy chú ý đến mã của mẫu đăng ký nơi hiển thị hình ảnh xác thực:


    Chúng tôi đã chỉ định đường dẫn đến tệp trong giá trị của thuộc tính src cho hình ảnh captcha.php, tạo ra hình ảnh xác thực này.

    Hãy xem mã tập tin captcha.php:

    Mã được nhận xét tốt nên tôi sẽ chỉ tập trung vào một điểm.

    Bên trong một hàm hình ảnhTtfText(), đường dẫn đến phông chữ được chỉ định verdana.ttf. Vì vậy để captcha hoạt động chính xác chúng ta phải tạo thư mục phông chữ và đặt tập tin phông chữ ở đó verdana.ttf. Bạn có thể tìm và tải xuống từ Internet hoặc lấy từ kho lưu trữ cùng với tài liệu của bài viết này.

    Chúng ta đã hoàn thành cấu trúc HTML, đã đến lúc tiếp tục.

    Kiểm tra tính hợp lệ của email bằng jQuery

    Bất kỳ biểu mẫu nào cũng cần kiểm tra tính hợp lệ của dữ liệu đã nhập, cả ở phía máy khách (sử dụng JavaScript, jQuery) và phía máy chủ.

    Chúng ta phải đặc biệt chú ý đến trường Email. Điều rất quan trọng là địa chỉ bưu điện đã nhập là hợp lệ.

    Đối với trường nhập này, chúng tôi đặt loại email (loại="email"), điều này sẽ cảnh báo chúng tôi một chút về các định dạng không chính xác. Nhưng điều này vẫn chưa đủ, vì thông qua trình kiểm tra mã mà trình duyệt cung cấp cho chúng ta, chúng ta có thể dễ dàng thay đổi giá trị thuộc tính kiểu Với - Để bảo toàn họ. TRÊN chữ, và thế là séc của chúng tôi sẽ không còn giá trị nữa.


    Và trong trường hợp này, chúng ta phải thực hiện một cuộc kiểm tra đáng tin cậy hơn. Để làm điều này, chúng tôi sẽ sử dụng thư viện jQuery từ JavaScript.

    Để kết nối thư viện jQuery, trong tệp Chúng ta sẽ di chuyển đầu trang và chân trang của trang web thành các file riêng biệt, giữa các thẻ , trước thẻ đóng , thêm dòng này:

    Ngay sau dòng này chúng ta sẽ thêm mã xác thực email. Ở đây chúng tôi sẽ thêm một mã để kiểm tra độ dài của mật khẩu đã nhập. Độ dài của nó phải có ít nhất 6 ký tự.

    Sử dụng tập lệnh này, chúng tôi kiểm tra tính hợp lệ của địa chỉ email đã nhập. Nếu người dùng nhập Email không chính xác, chúng tôi sẽ hiển thị thông báo lỗi về điều này và tắt nút gửi biểu mẫu. Nếu mọi thứ đều ổn thì chúng tôi sẽ loại bỏ lỗi và kích hoạt nút gửi biểu mẫu.

    Và như vậy, chúng ta đã hoàn thành việc xác thực biểu mẫu ở phía máy khách. Bây giờ chúng ta có thể gửi nó đến máy chủ, nơi chúng ta cũng sẽ thực hiện một số kiểm tra và thêm dữ liệu vào cơ sở dữ liệu.

    Đăng ký người dùng

    Chúng tôi gửi biểu mẫu vào tệp để xử lý đăng ký.php, thông qua phương thức POST. Tên của tệp xử lý này được chỉ định trong giá trị thuộc tính hoạt động. Và phương thức gửi được chỉ định trong giá trị thuộc tính phương pháp.

    Mở tập tin này đăng ký.php và điều đầu tiên chúng ta cần làm là viết hàm khởi chạy phiên và kết nối tệp chúng ta đã tạo trước đó Trong thư mục của trang web của chúng tôi, tạo một tệp có tên(Trong tệp này, chúng tôi đã tạo kết nối tới cơ sở dữ liệu). Ngoài ra chúng ta hãy khai báo ngay các ô thông báo lỗi tiêu đề.php thành công_tin nhắn trong mảng phiên toàn cầu. TRONG thông báo lỗi chúng tôi sẽ ghi lại tất cả các thông báo lỗi xảy ra trong quá trình xử lý biểu mẫu và trong thành công_tin nhắn, chúng ta sẽ ghi lại những tin nhắn vui vẻ.

    Trước khi tiếp tục, chúng ta cần kiểm tra xem biểu mẫu đã được gửi chưa. Kẻ tấn công có thể nhìn vào giá trị thuộc tính hoạt động từ biểu mẫu và tìm ra tệp nào đang xử lý biểu mẫu này. Và anh ta có thể có ý tưởng truy cập trực tiếp vào tệp này bằng cách nhập địa chỉ sau vào thanh địa chỉ của trình duyệt: http://site_address/register.php

    Vì vậy, chúng ta cần kiểm tra một ô trong mảng POST toàn cục có tên khớp với tên của nút "Đăng ký" trong biểu mẫu. Bằng cách này, chúng tôi kiểm tra xem nút "Đăng ký" có được nhấp hay không.

    Nếu kẻ tấn công cố gắng truy cập trực tiếp vào tệp này, chúng sẽ nhận được thông báo lỗi. Hãy để tôi nhắc bạn rằng biến $address_site chứa tên của trang web và nó đã được khai báo trong tệp Trong thư mục của trang web của chúng tôi, tạo một tệp có tên.

    Giá trị hình ảnh xác thực trong phiên đã được thêm vào khi nó được tạo, trong tệp captcha.php. Xin nhắc lại, tôi sẽ cho bạn xem lại đoạn mã này từ tệp captcha.php, trong đó giá trị hình ảnh xác thực được thêm vào phiên:

    Bây giờ chúng ta hãy tiến hành xác minh chính nó. Trong tập tin đăng ký.php, bên trong khối if, nơi chúng tôi kiểm tra xem nút "Đăng ký" đã được nhấp hay đúng hơn là nơi nhận xét " // (1) Khoảng trống cho đoạn mã tiếp theo"chúng tôi viết:

    //Kiểm tra hình ảnh xác thực đã nhận //Cắt bớt khoảng trắng ở đầu và cuối dòng $captcha = Trim($_POST["captcha"]);

    if(isset($_POST["captcha"]) && !empty($captcha))( //So sánh giá trị nhận được với giá trị từ phiên. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Nếu hình ảnh xác thực không chính xác, chúng tôi sẽ đưa người dùng trở lại trang đăng ký và ở đó chúng tôi sẽ hiển thị thông báo lỗi cho anh ấy rằng anh ấy đã nhập sai hình ảnh xác thực $error_message = "

    Lỗi! Bạn nhập sai captcha

    "; // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] = $error_message; // Đưa người dùng trở lại trang đăng ký header("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: " .$address_site ."/form_register.php"); //Dừng tập lệnh exit(); // (2) Đặt đoạn mã tiếp theo )else( //Nếu hình ảnh xác thực không được chuyển hoặc nó trống thì thoát( "

    "); }

    Lỗi! Không có mã xác minh, tức là mã captcha. Bạn có thể vào trang chính.

    Tiếp theo, chúng ta cần xử lý dữ liệu nhận được từ mảng POST. Trước hết, chúng ta cần kiểm tra nội dung của mảng POST toàn cục, tức là xem có ô nào ở đó có tên tương ứng với tên của các trường đầu vào từ biểu mẫu của chúng ta hay không.

    Nếu ô tồn tại thì chúng tôi sẽ cắt bớt khoảng trắng ở đầu và cuối dòng so với ô này, nếu không, chúng tôi sẽ chuyển hướng người dùng quay lại trang có biểu mẫu đăng ký.

    Tiếp theo, sau khi đã cắt bớt các khoảng trắng, chúng ta thêm dòng vào biến và kiểm tra biến này xem có trống không; nếu nó không trống thì chúng ta tiếp tục, nếu không chúng ta sẽ chuyển hướng người dùng quay lại trang có biểu mẫu đăng ký. Dán mã này vào vị trí đã chỉ định"".

    /* Kiểm tra xem có dữ liệu nào được gửi từ biểu mẫu trong mảng toàn cục $_POST hay không và gói dữ liệu đã gửi trong các biến thông thường.*/ if(isset($_POST["first_name"]))( //Cắt bớt khoảng trắng từ đầu và cuối chuỗi $first_name = Trim($_POST["first_name"]); //Kiểm tra biến xem có trống không if(!empty($first_name))( // Để đảm bảo an toàn, hãy chuyển đổi các ký tự đặc biệt thành thực thể HTML $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] .= "

    Nhập tên của bạn

    Trường tên bị thiếu

    "; // Đưa người dùng trở lại tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); //Dừng tập lệnh exit(); ) if( isset($_POST["last_name"]))( //Cắt bớt khoảng trắng ở đầu và cuối dòng $last_name = Trim($_POST["last_name"]); if(!empty($last_name)) ( // Để bảo mật, hãy chuyển đổi các ký tự đặc biệt thành các thực thể HTML $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] .= "

    Vui lòng nhập họ của bạn

    "; // Đưa người dùng trở lại tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); //Dừng tập lệnh exit(); ) )else ( // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] .= "

    Trường họ bị thiếu

    "; // Đưa người dùng trở lại tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); //Dừng tập lệnh exit(); ) if( isset($_POST["email"]))( //Cắt bỏ khoảng trắng ở đầu và cuối dòng $email = Trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Vị trí mã để kiểm tra định dạng của địa chỉ email và tính duy nhất của nó )else( // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] .= "

    Nhập email của bạn

    "; // Đưa người dùng trở lại tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); //Dừng tập lệnh exit(); ) )else ( // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] .= "

    "; //Đưa người dùng trở lại tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); //Dừng tập lệnh exit(); ) if( isset($_POST["password"]))( //Cắt bớt khoảng trắng ở đầu và cuối chuỗi $password = Trim($_POST["password"]); if(!empty($password)) ( $password = htmlspecialchars ($password, ENT_QUOTES); //Mã hóa mật khẩu $password = md5($password."top_secret");else( //Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] . = "

    Nhập mật khẩu của bạn

    "; // Đưa người dùng trở lại tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); //Dừng tập lệnh exit(); ) )else ( // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] .= "

    "; // Đưa người dùng trở lại tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); //Dừng tập lệnh exit(); ) // (4) Nơi chứa mã để thêm người dùng vào cơ sở dữ liệu

    Đặc biệt quan trọng là lĩnh vực - Để bảo toàn họ.. Chúng ta phải kiểm tra định dạng của địa chỉ bưu chính nhận được và tính duy nhất của nó trong cơ sở dữ liệu. Tức là có người dùng nào có cùng địa chỉ email đã đăng ký chưa?

    Tại địa điểm được chỉ định" // (3) Mã vị trí để kiểm tra định dạng của địa chỉ bưu chính và tính duy nhất của nó"thêm đoạn mã sau:

    //Kiểm tra định dạng của địa chỉ email đã nhận bằng biểu thức chính quy $reg_email = "/^**@(+(*+)*\.)++/i";

    //Nếu định dạng của địa chỉ email nhận được không khớp với biểu thức chính quy if(!preg_match($reg_email, $email))( // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] .= "

    Bạn đã nhập sai email

    "; // Đưa người dùng trở lại tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); //Dừng tập lệnh exit(); ) // Chúng tôi kiểm tra xem địa chỉ đó đã có trong cơ sở dữ liệu chưa $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email.""); chính xác là một hàng, có nghĩa là người dùng có địa chỉ email này đã được đăng ký if($result_query->num_rows == 1)( //Nếu kết quả thu được không sai if(($row = $result_query->fetch_assoc() ) != false) ( // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] .= "

    Người dùng có địa chỉ email này đã được đăng ký

    "; //Trả người dùng về tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); )else( // Lưu thông báo lỗi vào phiên $_SESSION["error_messages"] .= "

    "; //Trả người dùng về tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); ) /* đóng lựa chọn */ $ result_query-> close(); //Dừng tập lệnh exit() ) /* đóng vùng chọn */ $result_query->close();

    Và như vậy, chúng ta đã hoàn tất tất cả các bước kiểm tra, đã đến lúc thêm người dùng vào cơ sở dữ liệu. Tại địa điểm được chỉ định" // (4) Nơi chứa code thêm người dùng vào cơ sở dữ liệu"thêm đoạn mã sau:

    //Truy vấn để thêm người dùng vào cơ sở dữ liệu $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, Last_name, email, pass) GIÁ TRỊ ("".$first_name."", "".$last_name ." ", "".$email.", "".$password."")");

    if(!$result_query_insert)( // Lưu thông báo lỗi vào phiên. $_SESSION["error_messages"] .= "

    Lỗi khi yêu cầu thêm người dùng vào cơ sở dữ liệu

    "; // Đưa người dùng trở lại tiêu đề trang đăng ký("HTTP/1.1 301 Đã di chuyển vĩnh viễn"); header("Location: ".$address_site."/form_register.php"); //Dừng tập lệnh exit(); )else( $_SESSION["success_messages"] = "
    Đăng ký đã thành công!!!

    Bây giờ bạn có thể đăng nhập bằng tên người dùng và mật khẩu của bạn.

    "; //Gửi người dùng đến trang ủy quyền header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); ) /* Hoàn thành yêu cầu */ $ result_query_insert-> close(); //Đóng kết nối tới cơ sở dữ liệu $mysqli->close();

    Nếu xảy ra lỗi trong yêu cầu thêm người dùng vào cơ sở dữ liệu, chúng tôi sẽ thêm thông báo về lỗi này vào phiên và đưa người dùng trở lại trang đăng ký.

    Ngược lại, nếu mọi thứ suôn sẻ, chúng tôi cũng thêm một thông báo vào phiên, nhưng lần này thú vị hơn, cụ thể là chúng tôi thông báo cho người dùng rằng đăng ký đã thành công. Và chúng tôi chuyển hướng nó đến trang có biểu mẫu ủy quyền. Chúng ta sẽ di chuyển đầu trang và chân trang của trang web thành các file riêng biệt,Đoạn script kiểm tra định dạng địa chỉ email và độ dài mật khẩu có trong file

    , do đó, nó cũng sẽ áp dụng cho các trường từ biểu mẫu này. Chúng ta sẽ di chuyển đầu trang và chân trang của trang web thành các file riêng biệt, Phiên cũng được bắt đầu trong tập tin form_auth.php, vì vậy trong tập tin


    Không cần phải bắt đầu một phiên vì chúng ta sẽ gặp lỗi. Như tôi đã nói, tập lệnh kiểm tra định dạng địa chỉ email và độ dài mật khẩu cũng hoạt động ở đây. Do đó, nếu người dùng nhập sai địa chỉ email hoặc mật khẩu ngắn, ngay lập tức sẽ nhận được thông báo lỗi. Một nútđăng nhập

    sẽ trở nên không hoạt động. Như tôi đã nói, tập lệnh kiểm tra định dạng địa chỉ email và độ dài mật khẩu cũng hoạt động ở đây. Do đó, nếu người dùng nhập sai địa chỉ email hoặc mật khẩu ngắn, ngay lập tức sẽ nhận được thông báo lỗi. Một nút Sau khi sửa lỗi, nút

    bắt đầu hoạt động và người dùng sẽ có thể gửi biểu mẫu đến máy chủ, nơi nó sẽ được xử lý.

    Ủy quyền người dùng hoạt độngĐể thuộc tính giá trị handicap ủy quyền có một tập tin được chỉ định, điều này có nghĩa là biểu mẫu sẽ được xử lý trong tệp này.

    Và vì vậy, hãy mở tập tin handicap ủy quyền có một tập tin được chỉ định và viết mã để xử lý mẫu ủy quyền. Điều đầu tiên bạn cần làm là bắt đầu một phiên và kết nối tệp Trong thư mục của trang web của chúng tôi, tạo một tệp có tênđể kết nối với cơ sở dữ liệu.

    Khi bạn nhấp vào liên kết thoát khỏi trang web, chúng tôi sẽ được đưa đến một tập tin đăng xuất.php, trong đó chúng tôi chỉ cần hủy các ô có địa chỉ email và mật khẩu khỏi phiên. Sau đó, chúng tôi đưa người dùng quay lại trang đã nhấp vào liên kết ra.

    Mã tập tin đăng xuất.php:

    Thế thôi. Bây giờ bạn đã biết cách triển khai và xử lý các biểu mẫu đăng ký và ủy quyền người dùng trên trang web của mình. Những biểu mẫu này được tìm thấy trên hầu hết mọi trang web, vì vậy mọi lập trình viên nên biết cách tạo chúng.

    Chúng tôi cũng đã học cách xác thực dữ liệu đầu vào, cả ở phía máy khách (trong trình duyệt, sử dụng JavaScript, jQuery) và phía máy chủ (sử dụng PHP). Chúng tôi cũng đã học cách thực hiện quy trình rời khỏi địa điểm.

    Tất cả các tập lệnh đã được thử nghiệm và đang hoạt động. Bạn có thể tải xuống kho lưu trữ với các tệp của trang web nhỏ này từ liên kết này.

    Trong tương lai tôi sẽ viết một bài báo mà tôi sẽ mô tả. Và tôi cũng định viết một bài để giải thích (không cần tải lại trang). Vì vậy, để được thông tin về việc phát hành các bài viết mới, bạn có thể đăng ký vào trang web của tôi.

    Nếu bạn có bất kỳ câu hỏi nào, xin vui lòng liên hệ với tôi và nếu bạn nhận thấy bất kỳ sai sót nào trong bài viết, vui lòng cho tôi biết.

    Giáo án (Phần 5):

  • Tạo cấu trúc HTML cho biểu mẫu ủy quyền
  • Chúng tôi xử lý dữ liệu nhận được
  • Chúng tôi hiển thị lời chào của người dùng trong tiêu đề trang web
    • Bạn có thích bài viết này không?

    WordPress có một mẫu đăng ký cho phép người dùng mới đăng ký trên trang web. Nhưng nếu bạn muốn tạo một biểu mẫu đăng ký tùy chỉnh không đáp ứng các tùy chọn của Bảng điều khiển WordPress và thêm các trường mới vào đó thì sao?

    | Tải xuống plugin biểu mẫu làm sẵn |

    Trong hướng dẫn hôm nay, bạn sẽ tìm hiểu cách tạo biểu mẫu đăng ký trong WordPress bằng cách sử dụng kết hợp thẻ mẫu và mã ngắn.

    Mẫu đăng ký tiêu chuẩn chỉ bao gồm hai trường - tên người dùng và e-mail.

    Chỉ có hai trường để điền vào mẫu đăng ký khiến quá trình đăng ký trở nên rất đơn giản. Đầu tiên, bạn nhập tên người dùng và địa chỉ email của mình, sau đó mật khẩu để vào trang web sẽ tự động được gửi cho bạn qua e-mail. Sau đó, bạn đăng nhập vào trang web bằng mật khẩu được gửi cho bạn, điền vào hồ sơ của bạn và thay đổi mật khẩu thành mật khẩu mới mà bạn tự nghĩ ra và có thể dễ dàng ghi nhớ.

    Hoặc bạn có thể thay đổi một chút quy trình đăng ký nêu trên trên trang web của mình và sử dụng các trường bổ sung cùng với hai trường đã có sẵn. Đây có thể là trường mật khẩu, URL trang web của người dùng, mọi thông tin cá nhân, biệt danh, họ và tên.

    Và hôm nay chúng tôi sẽ tạo một plugin WordPress cho biểu mẫu đăng ký tùy chỉnh bằng cách sử dụng các trường sau:

    • tên người dùng
    • mật khẩu
    • e-mail
    • URL trang web
    • họ
    • biệt hiệu
    • thông tin cá nhân

    Biểu mẫu đăng ký tùy chỉnh có thể được tích hợp vào WordPress bằng cách sử dụng mã ngắn plugin và thẻ mẫu thích hợp.

    Mã ngắn cho phép bạn tạo một trang và biến nó thành trang đăng ký chính trên trang web của bạn. Bạn cũng có thể sử dụng mã ngắn trong bài đăng để người dùng có thể đăng ký nhận thông tin cập nhật trên trang web của bạn sau khi đọc một trong những bài viết họ thích.

    Nếu bạn muốn thêm biểu mẫu đăng ký vào thanh bên hoặc bất kỳ trang nào khác trên trang web của mình, bạn sẽ cần chỉnh sửa chủ đề bạn đang sử dụng và đặt thẻ mẫu vào nơi bạn muốn biểu mẫu đăng ký xuất hiện.

    Trước khi bắt đầu tạo plugin, điều đáng chú ý là chúng ta cần các trường có tên người dùng, mật khẩu và e-mail.

    Chúng tôi sẽ tuân theo quy tắc này khi tạo chức năng xác thực.

    Tạo một plugin

    Với tất cả những gì đã nói, hãy bắt đầu mã hóa plugin. Đầu tiên, bao gồm tiêu đề và tiêu đề của plugin.

    Phần kết luận

    Trong bài đăng hôm nay, chúng tôi đã xem xét quá trình tạo một plugin thêm biểu mẫu đăng ký tùy chỉnh vào trang web WordPress. Dựa trên thông tin được cung cấp, bạn có thể mở rộng số lượng trường cần điền, nhưng chỉ bằng cách đảm bảo rằng các trường biểu mẫu là siêu dữ liệu hợp lệ cho wp_insert_user .