Hướng dẫn how can we store form data in html? - làm thế nào chúng ta có thể lưu trữ dữ liệu biểu mẫu trong html?

  • Trước
  • Tổng quan: Hình thức

Khi dữ liệu biểu mẫu đã được xác thực ở phía máy khách, bạn sẽ ổn khi gửi biểu mẫu. Và, vì chúng tôi đã đề cập đến xác thực trong bài viết trước, chúng tôi đã sẵn sàng để gửi! Bài viết này xem xét những gì xảy ra khi người dùng gửi biểu mẫu - dữ liệu đi đâu và làm thế nào để chúng ta xử lý nó khi nó đến đó? Chúng tôi cũng xem xét một số mối quan tâm bảo mật liên quan đến việc gửi dữ liệu biểu mẫu.

Đầu tiên chúng ta sẽ thảo luận về những gì xảy ra với dữ liệu khi một biểu mẫu được gửi.

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.

Hướng dẫn how can we store form data in html? - làm thế nào chúng ta có thể lưu trữ dữ liệu biểu mẫu trong html?

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ử

xác định cách dữ liệu sẽ được gửi. Tất cả các thuộc tính của nó được thiết kế để cho phép bạn định cấu hình yêu cầu sẽ được gửi khi người dùng nhấn nút gửi. Hai thuộc tính quan trọng nhất là
<form action="/somewhere_else">form>
0 và
<form action="/somewhere_else">form>
1.

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

Thuộc tính

<form action="/somewhere_else">form>
0 xác định nơi dữ liệu được gửi. Giá trị của nó phải là một URL tương đối hoặc tuyệt đối hợp lệ. Nếu thuộc tính này không được cung cấp, dữ liệu sẽ được gửi đến URL của trang chứa biểu mẫu - trang hiện tại.

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

<form action="/somewhere_else">form>
3:

<form action="https://example.com">form>

Ở đâ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:

<form action="/somewhere_else">form>

Khi được chỉ định không có thuộc tính, như dưới đây, dữ liệu được gửi đến cùng một trang mà biểu mẫu có mặt trên:

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

<form action="/somewhere_else">form>
0, tất cả các trình duyệt đều hiển thị cảnh báo bảo mật cho người dùng mỗi khi họ cố gắng gửi dữ liệu vì dữ liệu sẽ không được mã hóa. It's possible to specify a URL that uses the HTTPS (secure HTTP) protocol. When you do this, the data is encrypted along with the rest of the request, even if the form itself is hosted on an insecure page accessed using HTTP. On the other hand, if the form is hosted on a secure page but you specify an insecure HTTP URL with the
<form action="/somewhere_else">form>
0 attribute, all browsers display a security warning to the user each time they try to send data because the data will not be encrypted.

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

<form action="/somewhere_else">form>
6 được nối với ampersands. Giá trị
<form action="/somewhere_else">form>
0 phải là một tệp trên máy chủ có thể xử lý dữ liệu đến, bao gồm đảm bảo xác thực phía máy chủ. Sau đó, máy chủ trả lời, thường xử lý dữ liệu và tải URL được xác định bởi thuộc tính
<form action="/somewhere_else">form>
0, gây ra tải trang mới (hoặc làm mới trang hiện có, nếu ____10 trỏ đến cùng một trang).

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

<form action="/somewhere_else">form>
1.

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

Thuộc tính

<form action="/somewhere_else">form>
1 xác định cách dữ liệu được gửi. Giao thức HTTP cung cấp một số cách để thực hiện yêu cầu; Dữ liệu hình thức HTML có thể được truyền qua một số phương pháp khác nhau, phổ biến nhất là phương pháp
<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
2 và phương pháp
<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
3

Để 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 pháp

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
2 là phương thức được trình duyệt sử dụng để yêu cầu máy chủ gửi lại một tài nguyên nhất định: "Hey Server, tôi muốn lấy tài nguyên này." Trong trường hợp này, trình duyệt gửi một cơ thể trống rỗng. Vì thân trống, nếu một biểu mẫu được gửi bằng phương thức này, dữ liệu được gửi đến máy chủ được thêm vào URL.

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

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>

Vì phương thức

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
2 đã được sử dụng, bạn sẽ thấy URL
<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
6 xuất hiện trong thanh địa chỉ trình duyệt khi bạn gửi biểu mẫu.

Hướng dẫn how can we store form data in html? - làm thế nào chúng ta có thể lưu trữ dữ liệu biểu mẫu trong html?

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 hỏi (

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
7) theo sau là các cặp tên/giá trị, mỗi cặp được phân tách bằng một ampersand và (
<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
8). Trong trường hợp này, chúng tôi đang chuyển hai phần dữ liệu cho máy chủ:

  • <form action="http://www.foo.com" method="GET">
      <div>
        <label for="say">What greeting do you want to say?label>
        <input name="say" id="say" value="Hi" />
      div>
      <div>
        <label for="to">Who do you want to say it to?label>
        <input name="to" id="to" value="Mom" />
      div>
      <div>
        <button>Send my greetingsbutton>
      div>
    form>
    
    9, có giá trị
    GET /?say=Hi&to=Mom HTTP/2.0
    Host: foo.com
    
    0
  • GET /?say=Hi&to=Mom HTTP/2.0
    Host: foo.com
    
    1, có giá trị
    GET /?say=Hi&to=Mom HTTP/2.0
    Host: foo.com
    
    2

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

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
3 là một chút khác nhau. Đó là phương thức mà trình duyệt sử dụng để nói chuyện với máy chủ khi yêu cầu phản hồi có tính đến dữ liệu được cung cấp trong phần thân của yêu cầu HTTP: "Hey Server, hãy xem dữ liệu này và gửi lại cho tôi một kết quả thích hợp." Nếu một biểu mẫu được gửi bằng phương pháp này, dữ liệu sẽ được thêm vào phần thân của yêu cầu HTTP.

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

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
2 ở trên, nhưng với thuộc tính
<form action="/somewhere_else">form>
1 được đặt thành
<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
3.

<form action="http://www.foo.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>

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

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
3, bạn không nhận được dữ liệu nào được thêm vào URL và yêu cầu HTTP trông giống như vậy, với dữ liệu được bao gồm trong thân yêu cầu thay thế: thay vào đó:

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

say=Hi&to=Mom

Tiêu đề

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com
8 cho biết kích thước của cơ thể và tiêu đề
GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com
9 cho biết loại tài nguyên được gửi đến máy chủ. Chúng ta sẽ thảo luận về những tiêu đề này sau này.

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.

Hướng dẫn how can we store form data in html? - làm thế nào chúng ta có thể lưu trữ dữ liệu biểu mẫu trong html?

Đ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

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
2, người dùng sẽ xem dữ liệu trong thanh URL của họ, nhưng với yêu cầu
<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
3 họ sẽ không. Điều này có thể rất quan trọng vì hai lý do:

  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
    <form action="http://www.foo.com" method="GET">
      <div>
        <label for="say">What greeting do you want to say?label>
        <input name="say" id="say" value="Hi" />
      div>
      <div>
        <label for="to">Who do you want to say it to?label>
        <input name="to" id="to" value="Mom" />
      div>
      <div>
        <button>Send my greetingsbutton>
      div>
    form>
    
    2 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
    <form action="http://www.foo.com" method="GET">
      <div>
        <label for="say">What greeting do you want to say?label>
        <input name="say" id="say" value="Hi" />
      div>
      <div>
        <label for="to">Who do you want to say it to?label>
        <input name="to" id="to" value="Mom" />
      div>
      <div>
        <button>Send my greetingsbutton>
      div>
    form>
    
    3 đượ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

<form action="http://www.foo.com" method="GET">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
3, ví dụ sau đây chỉ lấy dữ liệu và hiển thị nó cho người dùng. Tất nhiên, những gì bạn làm với dữ liệu là tùy thuộc vào bạn. Bạn có thể hiển thị nó, lưu trữ nó vào cơ sở dữ liệu, gửi qua email hoặc xử lý nó theo một cách khác.


  // The global $_POST variable allows you to access the data sent with the POST method by name
  // To access the data sent with the GET method, you can use $_GET
  $say = htmlspecialchars($_POST['say']);
  $to  = htmlspecialchars($_POST['to']);

  echo  $say, ' ', $to;
?>

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à

<form action="http://www.foo.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi" />
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom" />
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>
9.

Hướng dẫn how can we store form data in html? - làm thế nào chúng ta có thể lưu trữ dữ liệu biểu mẫu trong html?

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 được gọi là

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

say=Hi&to=Mom
0 trong cùng thư mục với tệp
POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom
1, nếu bạn cố gắng tự mình chạy ví dụ):

  • 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
    <form action="/somewhere_else">form>
    
    0 đượ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
    
    3. Đâ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.
    POST / HTTP/2.0
    Host: foo.com
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 13
    
    say=Hi&to=Mom
    
    4 về cơ bản là nói "chuyển hướng đến
    POST / HTTP/2.0
    Host: foo.com
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 13
    
    say=Hi&to=Mom
    
    5 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
    POST / HTTP/2.0
    Host: foo.com
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 13
    
    say=Hi&to=Mom
    
    6 được thấy ở trên, chạy khi URL
    POST / HTTP/2.0
    Host: foo.com
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 13
    
    say=Hi&to=Mom
    
    5 đượ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

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

say=Hi&to=Mom
8. Tại thời điểm này, bạn sẽ có thể chạy ví dụ bằng
POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom
9, sau đó điều hướng đến

  // The global $_POST variable allows you to access the data sent with the POST method by name
  // To access the data sent with the GET method, you can use $_GET
  $say = htmlspecialchars($_POST['say']);
  $to  = htmlspecialchars($_POST['to']);

  echo  $say, ' ', $to;
?>
0 trong trình duyệt của bạn.
Again, this code won't work if you just try to load it into a browser directly. Python works a bit differently to PHP — to run this code locally you'll need to install Python/PIP, then install Flask using
POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom
8. At this point you should be able to run the example using
POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom
9, then navigating to

  // The global $_POST variable allows you to access the data sent with the POST method by name
  // To access the data sent with the GET method, you can use $_GET
  $say = htmlspecialchars($_POST['say']);
  $to  = htmlspecialchars($_POST['to']);

  echo  $say, ' ', $to;
?>
0 in your browser.

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 đề

GET /?say=Hi&to=Mom HTTP/2.0
Host: foo.com
9 HTTP có trong yêu cầu được tạo khi biểu mẫu được gửi. Tiêu đề này rất quan trọng vì nó cho máy chủ biết loại dữ liệu nào được gửi. Theo mặc định, giá trị của nó là

  // The global $_POST variable allows you to access the data sent with the POST method by name
  // To access the data sent with the GET method, you can use $_GET
  $say = htmlspecialchars($_POST['say']);
  $to  = htmlspecialchars($_POST['to']);

  echo  $say, ' ', $to;
?>
2. Theo thuật ngữ của con người, điều này có nghĩa là: "Đây là dữ liệu hình thức đã được mã hóa thành các tham số URL."

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
    <form action="/somewhere_else">form>
    
    1 thành
    <form action="http://www.foo.com" method="GET">
      <div>
        <label for="say">What greeting do you want to say?label>
        <input name="say" id="say" value="Hi" />
      div>
      <div>
        <label for="to">Who do you want to say it to?label>
        <input name="to" id="to" value="Mom" />
      div>
      <div>
        <button>Send my greetingsbutton>
      div>
    form>
    
    3 vì nội dung tệp không thể được đặt bên trong các tham số URL.
  • Đặt giá trị của
    
      // The global $_POST variable allows you to access the data sent with the POST method by name
      // To access the data sent with the GET method, you can use $_GET
      $say = htmlspecialchars($_POST['say']);
      $to  = htmlspecialchars($_POST['to']);
    
      echo  $say, ' ', $to;
    ?>
    
    5 thành
    
      // The global $_POST variable allows you to access the data sent with the POST method by name
      // To access the data sent with the GET method, you can use $_GET
      $say = htmlspecialchars($_POST['say']);
      $to  = htmlspecialchars($_POST['to']);
    
      echo  $say, ' ', $to;
    ?>
    
    6 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
    
      // The global $_POST variable allows you to access the data sent with the POST method by name
      // To access the data sent with the GET method, you can use $_GET
      $say = htmlspecialchars($_POST['say']);
      $to  = htmlspecialchars($_POST['to']);
    
      echo  $say, ' ', $to;
    ?>
    
    7 để 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ụ:

<form method="post" action="https://www.foo.com" enctype="multipart/form-data">
  <div>
    <label for="file">Choose a filelabel>
    <input type="file" id="file" name="myFile" />
  div>
  <div>
    <button>Send the filebutton>
  div>
form>

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

Làm thế nào chúng ta có thể lưu trữ dữ liệu biểu mẫu trong lưu trữ cục bộ trong HTML?

Việc triển khai tính năng lưu cho các tính năng sau này bằng cách sử dụng địa phương liên quan đến việc lưu trữ các giá trị của biểu mẫu trong trình tự lưu trữ và sử dụng chúng để phổ biến trước biểu mẫu bất cứ khi nào cần thiết. Trong mã trên, chúng tôi chọn tất cả các yếu tố chúng tôi cần tương tác với bao gồm biểu mẫu, hộp cảnh báo và nút lưu của chúng tôi.storing the form's values in LocalStorage and using them to pre-populate the form whenever needed. In the code above, we select all the elements we need to interact with including our form, alert box and save button.

Làm cách nào để hiển thị dữ liệu biểu mẫu trong HTML?

Thuộc tính FormTarget chỉ định tên hoặc từ khóa cho biết nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu. Thuộc tính FormTarget ghi đè thuộc tính đích của phần tử. Lưu ý: Thuộc tính FormTarget là mới cho phần tử có loại = "Gửi" trong HTML5.. The formtarget attribute overrides the target attribute of the element. Note: The formtarget attribute is new for the element with type="submit" in HTML5.

Làm cách nào để lưu trữ dữ liệu biểu mẫu HTML trong cơ sở dữ liệu truy cập?

Chúng tôi cần tạo trang truy cập dữ liệu bằng cách sử dụng trang truy cập Wizard hoặc Data Access bằng cách sử dụng HTML ...
Trong cửa sổ cơ sở dữ liệu, nhấp vào nút biểu mẫu đối tượng ..
Nhấp chuột phải vào biểu mẫu bạn đã tạo từ truy vấn ..
Chọn tài liệu HTML từ hộp lưu xuống dưới dạng loại ..
Nhấp vào Xuất tất cả ..
Nhấp vào OK để chấp nhận mẫu HTML mặc định ..

Làm thế nào chúng ta có thể lưu trữ dữ liệu biểu mẫu HTML trong PHP?

Hoàn thành các bước để thiết kế dự án:..
Bắt đầu XAMPP Server ..
Mở LocalHost/PHPMyAdmin trong trình duyệt web của bạn ..
Tạo cơ sở dữ liệu của nhân viên tên và bảng của trường đại học ..
Viết mã HTML và PHP trong notepad của bạn vào một thư mục cụ thể ..
Gửi dữ liệu thông qua biểu mẫu HTML ..
Xác minh kết quả ..