Hướng dẫn how send data using submit button in html? - làm thế nào để gửi dữ liệu bằng cách sử dụng nút gửi trong html?

Kiến trúc máy khách/máy chủ

Về cơ bản nhất, web sử dụng kiến ​​trúc máy khách/máy chủ có thể được tóm tắt như sau: máy khách [thường là trình duyệt web] gửi yêu cầu đến máy chủ [hầu hết thời gian máy chủ web như Apache, NGINX, IIS, Tomcat , v.v.], sử dụng giao thức HTTP. Máy chủ trả lời yêu cầu bằng cách sử dụng cùng một giao thức.

Một biểu mẫu HTML trên trang web không gì khác hơn là một cách thân thiện với người dùng thuận tiện để định cấu hình yêu cầu HTTP để gửi dữ liệu đến máy chủ. Điều này cho phép người dùng cung cấp thông tin được gửi trong yêu cầu HTTP.

Về phía máy khách: Xác định cách gửi dữ liệu

Phần tử

…

…

…

Thuộc tính hành động

Thuộc tính

…

Trong ví dụ này, dữ liệu được gửi đến URL tuyệt đối -

…

…

Ở đây, chúng tôi sử dụng URL tương đối - dữ liệu được gửi đến một URL khác trên cùng một nguồn gốc:

…

Khi được chỉ định không có thuộc tính, như dưới đây, dữ liệu

…

Lưu ý: Có thể chỉ định URL sử dụng giao thức HTTPS [HTTP an toàn]. Khi bạn làm điều này, dữ liệu được mã hóa cùng với phần còn lại của yêu cầu, ngay cả khi bản thân biểu mẫu được lưu trữ trên trang không an toàn được truy cập bằng HTTP. Mặt khác, nếu biểu mẫu được lưu trữ trên một trang an toàn nhưng bạn chỉ định URL HTTP không an toàn với thuộc tính

…

…

Các tên và giá trị của các điều khiển biểu mẫu không tệp được gửi đến máy chủ khi các cặp

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

…

…

…

Cách dữ liệu được gửi phụ thuộc vào thuộc tính

…

Thuộc tính phương thức

Thuộc tính

…

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

Để hiểu sự khác biệt giữa hai phương pháp đó, hãy lùi lại và kiểm tra cách HTTP hoạt động. Mỗi lần bạn muốn liên hệ với tài nguyên trên web, trình duyệt sẽ gửi yêu cầu đến URL. Yêu cầu HTTP bao gồm hai phần: một tiêu đề chứa một tập hợp siêu dữ liệu toàn cầu về khả năng của trình duyệt và một cơ thể có thể chứa thông tin cần thiết cho máy chủ để xử lý yêu cầu cụ thể.

Phương pháp Get

Phương thức

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

Xem xét hình thức sau:

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

Vì phương thức

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com

Dữ liệu được gắn vào URL dưới dạng một loạt các cặp tên/giá trị. Sau khi địa chỉ web URL kết thúc, chúng tôi bao gồm một dấu câu hỏi [

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com

• GET /?say=Hi&to=Mom HTTP/2.0
  Host: foo.com
  

  5, có giá trị

  GET /?say=Hi&to=Mom HTTP/2.0
  Host: foo.com
  

  6

• GET /?say=Hi&to=Mom HTTP/2.0
  Host: foo.com
  

  7, có giá trị

  GET /?say=Hi&to=Mom HTTP/2.0
  Host: foo.com
  

  8

Yêu cầu HTTP trông như thế này:

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com

Phương pháp bài

Phương pháp

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

Chúng ta hãy xem một ví dụ - đây là cùng một hình thức chúng ta đã xem trong phần

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

…

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

Khi biểu mẫu được gửi bằng phương thức

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

Tiêu đề

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

Xem các yêu cầu HTTP

Các yêu cầu HTTP không bao giờ được hiển thị cho người dùng [nếu bạn muốn xem chúng, bạn cần sử dụng các công cụ như Mạng Firefox hoặc Công cụ dành cho nhà phát triển Chrome]. Ví dụ, dữ liệu biểu mẫu của bạn sẽ được hiển thị như sau trong tab Mạng Chrome. Sau khi gửi biểu mẫu:

1. Mở các công cụ nhà phát triển.
2. Chọn mạng"
3. Chọn tất cả"
4. Chọn "Foo.com" trong tab "Tên"
5. Chọn "Tiêu đề"

Sau đó, bạn có thể nhận được dữ liệu biểu mẫu, như trong hình ảnh dưới đây.

Điều duy nhất được hiển thị cho người dùng là URL được gọi là. Như chúng tôi đã đề cập ở trên, với yêu cầu

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

1. Nếu bạn cần gửi mật khẩu [hoặc bất kỳ thông tin nhạy cảm nào khác], không bao giờ sử dụng phương thức

   
     
       What greeting do you want to say?
       
     
     
       Who do you want to say it to?
       
     
     
       Send my greetings
     
   
   

   8 hoặc bạn có nguy cơ hiển thị nó trong thanh URL, điều này sẽ rất không an toàn.
2. Nếu bạn cần gửi một lượng lớn dữ liệu, phương thức

   
     
       What greeting do you want to say?
       
     
     
       Who do you want to say it to?
       
     
     
       Send my greetings
     
   
   

   9 được ưa thích vì một số trình duyệt giới hạn kích thước của URL. Ngoài ra, nhiều máy chủ giới hạn độ dài của các URL mà họ chấp nhận.

Về phía máy chủ: Lấy dữ liệu

Bất cứ phương thức HTTP nào bạn chọn, máy chủ sẽ nhận được một chuỗi sẽ được phân tích cú pháp để lấy dữ liệu làm danh sách các cặp khóa/giá trị. Cách bạn truy cập danh sách này phụ thuộc vào nền tảng phát triển bạn sử dụng và trên bất kỳ khung cụ thể nào bạn có thể sử dụng với nó.

Ví dụ: PHP thô

PHP cung cấp một số đối tượng toàn cầu để truy cập dữ liệu. Giả sử bạn đã sử dụng phương thức

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

Ví dụ này hiển thị một trang với dữ liệu chúng tôi đã gửi. Bạn có thể thấy điều này trong hành động trong tệp ví dụ của chúng tôi. Khi nó được gửi, nó sẽ gửi dữ liệu biểu mẫu đến Php-example.php, chứa mã PHP được thấy trong khối trên. Khi mã này được thực thi, đầu ra trong trình duyệt là

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

Lưu ý: Ví dụ này sẽ không hoạt động khi bạn tải nó vào trình duyệt cục bộ - trình duyệt không thể diễn giải mã PHP, vì vậy khi biểu mẫu được gửi, trình duyệt sẽ chỉ cung cấp để tải xuống tệp PHP cho bạn. Để làm cho nó hoạt động, bạn cần chạy ví dụ thông qua một máy chủ PHP nào đó. Các tùy chọn tốt để kiểm tra PHP cục bộ là MAMP [Mac và Windows] và AMPP [Mac, Windows, Linux]. This example won't work when you load it into a browser locally — browsers cannot interpret PHP code, so when the form is submitted the browser will just offer to download the PHP file for you. To get it to work, you need to run the example through a PHP server of some kind. Good options for local PHP testing are MAMP [Mac and Windows] and AMPPS [Mac, Windows, Linux].

Cũng lưu ý rằng nếu bạn đang sử dụng MAMP nhưng không cài đặt Mamp Pro [hoặc nếu thử nghiệm thời gian demo Mamp Pro đã hết hạn], bạn có thể gặp khó khăn khi nó hoạt động. Để làm cho nó hoạt động trở lại, chúng tôi đã thấy rằng bạn có thể tải ứng dụng MAMP, sau đó chọn Tùy chọn menu MAMP> Tùy chọn> PHP và đặt "Phiên bản tiêu chuẩn:" thành "7.2.x" [x sẽ khác nhau tùy thuộc vào phiên bản nào Bạn đã cài đặt].

Ví dụ: Python

Ví dụ này cho thấy cách bạn sẽ sử dụng Python để làm điều tương tự - hiển thị dữ liệu đã gửi trên một trang web. Điều này sử dụng khung bình để hiển thị các mẫu, xử lý việc gửi dữ liệu biểu mẫu, v.v. [xem python-example.py].

from flask import Flask, render_template, request

app = Flask[__name__]

@app.route['/', methods=['GET', 'POST']]
def form[]:
    return render_template['form.html']

@app.route['/hello', methods=['GET', 'POST']]
def hello[]:
    return render_template['greeting.html', say=request.form['say'], to=request.form['to']]

if __name__ == "__main__":
    app.run[]

Hai mẫu được tham chiếu trong mã trên như sau [chúng cần phải nằm trong một thư mục con gọi là

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

• Form.html: Hình thức tương tự như chúng ta đã thấy ở trên trong phần Phương thức bài nhưng với

  …
  

  6 được đặt thành

  POST / HTTP/2.0
  Host: foo.com
  Content-Type: application/x-www-form-urlencoded
  Content-Length: 13
  
  say=Hi&to=Mom
  

  9. Đây là một mẫu Jinja, về cơ bản là HTML nhưng có thể chứa các cuộc gọi đến mã Python đang chạy máy chủ web có trong niềng răng xoăn.
  0 về cơ bản là nói "chuyển hướng đến
  1 khi biểu mẫu được gửi".
• Lời chào.html: Mẫu này chỉ chứa một dòng hiển thị hai bit dữ liệu được truyền cho nó khi nó được hiển thị. Điều này được thực hiện thông qua hàm
  2 được thấy ở trên, chạy khi URL
  1 được điều hướng.

Lưu ý: Một lần nữa, mã này sẽ không hoạt động nếu bạn chỉ cố gắng tải trực tiếp vào trình duyệt. Python hoạt động hơi khác với PHP - để chạy mã này cục bộ, bạn sẽ cần cài đặt Python/PIP, sau đó cài đặt bình bằng

Các ngôn ngữ và khung khác

Có nhiều công nghệ phía máy chủ khác mà bạn có thể sử dụng để xử lý biểu mẫu, bao gồm Perl, Java, .NET, Ruby, v.v. Chỉ cần chọn loại bạn thích nhất. Điều đó nói rằng, điều đáng chú ý là việc sử dụng các công nghệ này là rất hiếm khi sử dụng các công nghệ này vì điều này có thể khó khăn. Điều phổ biến hơn là sử dụng một trong nhiều khung chất lượng cao giúp các hình thức xử lý dễ dàng hơn, chẳng hạn như:

• Django cho Python [một chút nặng hơn một chút so với bình, nhưng với nhiều công cụ và tùy chọn hơn].
• Thể hiện cho Node.js.
• Laravel cho PHP.
• Ruby trên đường ray cho Ruby.
• Boot mùa xuân cho Java.

Điều đáng chú ý là ngay cả khi sử dụng các khung này, làm việc với các biểu mẫu cũng không nhất thiết phải dễ dàng. Nhưng nó dễ dàng hơn nhiều so với việc cố gắng tự viết tất cả các chức năng từ đầu và sẽ giúp bạn tiết kiệm rất nhiều thời gian.

Lưu ý: Nó nằm ngoài phạm vi của bài viết này để dạy cho bạn bất kỳ ngôn ngữ hoặc khung phía máy chủ nào. Các liên kết trên sẽ cung cấp cho bạn một số trợ giúp, nếu bạn muốn tìm hiểu chúng. It is beyond the scope of this article to teach you any server-side languages or frameworks. The links above will give you some help, should you wish to learn them.

Một trường hợp đặc biệt: Gửi tệp

Gửi các tệp có biểu mẫu HTML là một trường hợp đặc biệt. Các tệp là dữ liệu nhị phân - hoặc được xem xét như vậy - trong khi tất cả dữ liệu khác là dữ liệu văn bản. Bởi vì HTTP là một giao thức văn bản, có những yêu cầu đặc biệt để xử lý dữ liệu nhị phân.

Thuộc tính Enctype

Thuộc tính này cho phép bạn chỉ định giá trị của tiêu đề

  
    What greeting do you want to say?
    
  
  
    Who do you want to say it to?
    
  
  
    Send my greetings
  

Nếu bạn muốn gửi tệp, bạn cần thực hiện ba bước bổ sung:

• Đặt thuộc tính

  …
  

  0 thành

  
    
      What greeting do you want to say?
      
    
    
      Who do you want to say it to?
      
    
    
      Send my greetings
    
  
  

  9 vì nội dung tệp không thể được đặt bên trong các tham số URL.
• Đặt giá trị của

  from flask import Flask, render_template, request
  
  app = Flask[__name__]
  
  @app.route['/', methods=['GET', 'POST']]
  def form[]:
      return render_template['form.html']
  
  @app.route['/hello', methods=['GET', 'POST']]
  def hello[]:
      return render_template['greeting.html', say=request.form['say'], to=request.form['to']]
  
  if __name__ == "__main__":
      app.run[]
  

  1 thành

  from flask import Flask, render_template, request
  
  app = Flask[__name__]
  
  @app.route['/', methods=['GET', 'POST']]
  def form[]:
      return render_template['form.html']
  
  @app.route['/hello', methods=['GET', 'POST']]
  def hello[]:
      return render_template['greeting.html', say=request.form['say'], to=request.form['to']]
  
  if __name__ == "__main__":
      app.run[]
  

  2 vì dữ liệu sẽ được chia thành nhiều phần, một cho mỗi tệp cộng với một tệp cho dữ liệu văn bản có trong phần thân biểu mẫu [nếu văn bản cũng được nhập vào biểu mẫu].
• Bao gồm một hoặc nhiều điều khiển

  from flask import Flask, render_template, request
  
  app = Flask[__name__]
  
  @app.route['/', methods=['GET', 'POST']]
  def form[]:
      return render_template['form.html']
  
  @app.route['/hello', methods=['GET', 'POST']]
  def hello[]:
      return render_template['greeting.html', say=request.form['say'], to=request.form['to']]
  
  if __name__ == "__main__":
      app.run[]
  

  3 để cho phép người dùng của bạn chọn [các] tệp sẽ được tải lên.

Ví dụ:

  
    Choose a file
    
  
  
    Send the file
  

Lưu ý: Máy chủ có thể được cấu hình với giới hạn kích thước cho các tệp và yêu cầu HTTP để ngăn chặn lạm dụng. Servers can be configured with a size limit for files and HTTP requests in order to prevent abuse.

Vấn đề an ninh

Mỗi lần bạn gửi dữ liệu đến một máy chủ, bạn cần xem xét bảo mật. Các biểu mẫu HTML cho đến nay là các vectơ tấn công máy chủ phổ biến nhất [những nơi có thể xảy ra các cuộc tấn công]. Các vấn đề không bao giờ đến từ chính các hình thức HTML - chúng đến từ cách máy chủ xử lý dữ liệu.

Bài viết bảo mật trang web của chủ đề học tập phía máy chủ của chúng tôi thảo luận về một số cuộc tấn công phổ biến và phòng thủ tiềm năng chống lại chúng một cách chi tiết. Bạn nên đi và kiểm tra bài viết đó, để có ý tưởng về những gì có thể.

Hãy hoang tưởng: Không bao giờ tin tưởng người dùng của bạn

Vì vậy, làm thế nào để bạn chống lại những mối đe dọa này? Đây là một chủ đề vượt xa hướng dẫn này, nhưng có một vài quy tắc cần ghi nhớ. Quy tắc quan trọng nhất là: Không bao giờ tin tưởng người dùng của bạn, bao gồm cả chính bạn; Ngay cả một người dùng đáng tin cậy cũng có thể đã bị tấn công.

Tất cả dữ liệu đến máy chủ của bạn phải được kiểm tra và vệ sinh. Luôn luôn. Không có ngoại lệ.

• Thoát khỏi các nhân vật nguy hiểm tiềm năng. Các ký tự cụ thể mà bạn nên thận trọng với thay đổi tùy thuộc vào ngữ cảnh mà dữ liệu được sử dụng và nền tảng máy chủ bạn sử dụng, nhưng tất cả các ngôn ngữ phía máy chủ đều có chức năng cho việc này. Những điều cần chú ý là các chuỗi ký tự trông giống như mã thực thi [chẳng hạn như các lệnh JavaScript hoặc SQL].. The specific characters you should be cautious with vary depending on the context in which the data is used and the server platform you employ, but all server-side languages have functions for this. Things to watch out for are character sequences that look like executable code [such as JavaScript or SQL commands].
• Giới hạn lượng dữ liệu đến chỉ cho phép những gì cần thiết..
• Hộp cát tải lên các tập tin. Lưu trữ chúng trên một máy chủ khác và chỉ cho phép truy cập vào tệp thông qua một tên miền phụ khác hoặc thậm chí tốt hơn thông qua một miền hoàn toàn khác.. Store them on a different server and allow access to the file only through a different subdomain or even better through a completely different domain.

Bạn sẽ có thể tránh được nhiều vấn đề/hầu hết các vấn đề nếu bạn tuân theo ba quy tắc này, nhưng luôn luôn là một ý tưởng tốt để có được đánh giá bảo mật được thực hiện bởi một bên thứ ba có thẩm quyền. Đừng cho rằng bạn đã thấy tất cả các vấn đề có thể xảy ra.

Bản tóm tắt

Như chúng tôi đã ám chỉ ở trên, việc gửi dữ liệu biểu mẫu rất dễ dàng, nhưng việc đảm bảo một ứng dụng có thể khó khăn. Chỉ cần nhớ rằng một nhà phát triển mặt trước không phải là người nên xác định mô hình bảo mật của dữ liệu. Có thể thực hiện xác thực biểu mẫu phía máy khách, nhưng máy chủ không thể tin tưởng xác thực này vì nó không có cách nào để thực sự biết những gì đã thực sự xảy ra trên phía máy khách.

Nếu bạn đã làm việc theo cách của mình thông qua các hướng dẫn này theo thứ tự, bây giờ bạn biết cách đánh dấu và tạo kiểu mẫu, thực hiện xác thực phía khách hàng và có một số ý tưởng về việc gửi biểu mẫu.

Xem thêm

Trong mô -đun này

Chủ đê nâng cao