Cách hiển thị dữ liệu biểu mẫu sau khi gửi trong HTML?

Phương pháp 1



  
  
  

  


  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Một cách khác bạn có thể làm điều đó. Điểm cần lưu ý loại đầu vào là nút

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

Thực hiện theo mã này




    HTML JavaScript output on same page
    


Enter message:

Message is:

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

phương pháp 3

Đọc thêm

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

điều kiện tiên quyết. Trình độ máy tính cơ bản, hiểu biết về HTML và kiến ​​thức cơ bản về HTTP và lập trình phía máy chủ. Khách quan. Để hiểu điều gì sẽ xảy ra khi dữ liệu biểu mẫu được gửi, bao gồm cả việc nắm được ý tưởng cơ bản về cách dữ liệu được xử lý trên máy chủ

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

Ở mức 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ột 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 là 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ùng một giao thức

Cách hiển thị dữ liệu biểu mẫu sau khi gửi trong HTML?

Biểu mẫu HTML trên trang web không gì khác hơn là một cách thuận tiện, thân thiện với người dùng để đị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 sẽ được gửi trong yêu cầu HTTP

Ghi chú. Để hiểu rõ hơn về cách thức hoạt động của kiến ​​trúc máy khách-máy chủ, hãy đọc mô-đun các bước đầu tiên về lập trình trang web phía máy chủ của chúng tôi

Phần tử

<form action="/somewhere_else">form>
0 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 đượ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à và

Thuộc tính 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 một URL tuyệt đối —

<form action="/somewhere_else">form>
4

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

Ở đây, chúng tôi sử dụng một 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ư bên dưới, dữ liệu

<form action="/somewhere_else">form>
0 được gửi đến cùng một trang có biểu mẫu

<form>form>

Ghi chú. Có thể chỉ định một 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 biểu mẫu được lưu trữ trên một 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 bảo mật nhưng bạn chỉ định URL HTTP không an toàn với thuộc tính, thì tất cả các trình duyệt sẽ 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

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

<form action="/somewhere_else">form>
7 được nối với ký hiệu và. Giá trị
<form action="/somewhere_else">form>
1 phải là một tệp trên máy chủ có thể xử lý dữ liệu đến, bao gồm cả việc đảm bảo xác thực phía máy chủ. Sau đó, máy chủ sẽ phản hồ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>
1, gây ra tải trang mới (hoặc làm mới trang hiện có, nếu
<form action="/somewhere_else">form>
1 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>
2

Thuộc tính 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 một yêu cầu;

Để hiểu sự khác biệt giữa hai phương thức đó, hãy quay lại và kiểm tra cách thức hoạt động của HTTP. Mỗi khi bạn muốn truy cập một tài nguyên trên Web, trình duyệt sẽ gửi yêu cầu tới một URL. Một 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 chung về các khả năng của trình duyệt và một phần thân có thể chứa thông tin cần thiết để máy chủ xử lý yêu cầu cụ thể

Phương thức NHẬN

Phương thức

<form>form>
3 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. "Này máy chủ, tôi muốn lấy tài nguyên này. " Trong trường hợp này, trình duyệt sẽ gửi một nội dung trống. Vì phần thân trống nên nếu một biểu mẫu được gửi bằng phương thức này thì dữ liệu được gửi đến máy chủ sẽ được thêm vào URL

Hãy xem xét các hình thức sau đây




    HTML JavaScript output on same page
    


Enter message:

Message is:

6

Vì phương thức

<form>form>
3 đã được sử dụng nên bạn sẽ thấy URL
<form>form>
7 xuất hiện trên thanh địa chỉ của trình duyệt khi bạn gửi biểu mẫu

Cách hiển thị dữ liệu biểu mẫu sau khi gửi trong HTML?

Dữ liệu được thêm 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 chấm hỏi (_______78) theo sau là các cặp tên/giá trị, mỗi cặp được phân tách bằng dấu và (

<form>form>
9). Trong trường hợp này, chúng tôi đang chuyển hai phần dữ liệu đến máy chủ

  • 
    
    
        HTML JavaScript output on same page
        
    
    
    
    Enter message:

    Message is:

    60, có giá trị là
    
    
    
        HTML JavaScript output on same page
        
    
    
    
    Enter message:

    Message is:

    61
  • 
    
    
        HTML JavaScript output on same page
        
    
    
    
    Enter message:

    Message is:

    62, có giá trị là
    
    
    
        HTML JavaScript output on same page
        
    
    
    
    Enter message:

    Message is:

    63

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

<form action="/somewhere_else">form>
5

Ghi chú. Bạn có thể tìm thấy ví dụ này trên GitHub — xem get-method. html (cũng xem trực tiếp)

Phương thức ĐĂNG

Phương pháp

<form>form>
4 hơi khác một chút. Đó 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. "Này máy chủ, hãy xem dữ liệu này và gửi lại cho tôi một kết quả phù hợp. " Nếu một biểu mẫu được gửi bằng phương pháp này, thì dữ liệu sẽ được thêm vào phần thân của yêu cầu HTTP

Hãy xem một ví dụ — đây là dạng giống như chúng ta đã xem trong phần

<form>form>
3 ở trên, nhưng với thuộc tính được đặt thành
<form>form>
4

<form action="/somewhere_else">form>
9

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

<form>form>
4, bạn sẽ 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, thay vào đó là dữ liệu được bao gồm trong nội dung yêu cầu

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

Tiêu đề




    HTML JavaScript output on same page
    


Enter message:

Message is:

69 cho biết kích thước của phần thân và tiêu đề
<form action="/somewhere_else">form>
50 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

Ghi chú. Bạn có thể tìm thấy ví dụ này trên GitHub — xem phần hậu phương pháp. html (cũng xem trực tiếp)

Các yêu cầu HTTP không bao giờ được hiển thị cho người dùng (nếu muốn xem chúng, bạn cần sử dụng các công cụ như Firefox Network Monitor hoặc Chrome Developer Tools). 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ông cụ dành cho 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ể lấy dữ liệu biểu mẫu, như trong hình bên dưới

Cách hiển thị dữ liệu biểu mẫu sau khi gửi trong HTML?

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

<form>form>
3, người dùng sẽ thấy dữ liệu trong thanh URL của họ, nhưng với yêu cầu
<form>form>
4 thì họ sẽ không thấy. Đ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ỳ phần dữ liệu nhạy cảm nào khác), đừng bao giờ sử dụng phương pháp
    <form>form>
    
    3 nếu không bạn có nguy cơ hiển thị mật khẩu 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 pháp
    <form>form>
    
    4 được ưu tiên hơn 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 URL mà họ chấp nhận

Cho dù bạn chọn phương thức HTTP nào, 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 dưới dạng danh sách các cặp khóa/giá trị. Cách bạn truy cập danh sách này tùy thuộc vào nền tảng phát triển mà bạn sử dụng và trên bất kỳ khung cụ thể nào mà bạn có thể đang sử dụng với nó

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

<form>form>
4, ví dụ sau chỉ lấy dữ liệu và hiển thị 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ị, lưu trữ trong cơ sở dữ liệu, gửi qua email hoặc xử lý theo cách khác

<form action="/somewhere_else">form>
9

Ví dụ này hiển thị một trang có dữ liệu chúng tôi đã gửi. Bạn có thể thấy điều này đang hoạt động trong ví dụ php-example của chúng tôi. html — chứa mẫu ví dụ giống như chúng ta đã thấy trước đây, với một

<form action="/somewhere_else">form>
2 của
<form>form>
4 và một
<form action="/somewhere_else">form>
1 của
<form action="/somewhere_else">form>
59. Khi nó được gửi, nó sẽ gửi dữ liệu biểu mẫu tới php-example. php, chứa mã PHP nhìn 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="/somewhere_else">form>
90

Cách hiển thị dữ liệu biểu mẫu sau khi gửi trong HTML?

Ghi chú. 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ỉ đề nghị 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 loại 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à AMPPS (Mac, Windows, Linux)

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

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 Flask để hiển thị các mẫu, xử lý việc gửi dữ liệu biểu mẫu, v.v. (xem python-ví dụ. py)

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

Hai mẫu được tham chiếu trong đoạn mã trên như sau (những mẫu này cần nằm trong thư mục con có tên là

<form action="/somewhere_else">form>
91 trong cùng thư mục với tệp
<form action="/somewhere_else">form>
92, nếu bạn thử tự mình chạy ví dụ)

  • hình thức. html. Biểu mẫu tương tự như chúng ta đã thấy ở phần trên nhưng với
    <form action="/somewhere_else">form>
    
    1 được đặt thành
    <form action="/somewhere_else">form>
    
    94. Đây là mẫu Jinja, về cơ bản là HTML nhưng có thể chứa lệnh gọi mã Python đang chạy máy chủ web được chứa trong dấu ngoặc nhọn.
    <form action="/somewhere_else">form>
    
    95 về cơ bản là nói "chuyển hướng đến
    <form action="/somewhere_else">form>
    
    96 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 chức năng
    <form action="/somewhere_else">form>
    
    97 đã thấy ở trên, chức năng này sẽ chạy khi URL
    <form action="/somewhere_else">form>
    
    96 được điều hướng đến

Ghi chú. Xin nhắc lại, mã này sẽ không hoạt động nếu bạn cố tải trực tiếp mã này vào trình duyệt. Python hoạt động hơi khác một chút so với PHP — để chạy mã này cục bộ, bạn cần , sau đó cài đặt Flask bằng cách sử dụng

<form action="/somewhere_else">form>
99. Tại thời điểm này, bạn sẽ có thể chạy ví dụ bằng cách sử dụng
<form action="/somewhere_else">form>
10, sau đó điều hướng đến
<form action="/somewhere_else">form>
11 trong trình duyệt của bạn

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,. Mạng, Ruby, v.v. Chỉ cần chọn một trong những bạn thích nhất. Điều đó nói rằng, điều đáng chú ý là rất hiếm khi sử dụng trực tiếp các công nghệ này vì điều này có thể phức tạp. Việc sử dụng một trong nhiều khung chất lượng cao giúp xử lý các biểu mẫu dễ dàng hơn là phổ biến hơn, chẳng hạn như

  • Django cho Python (nặng hơn một chút so với Flask, nhưng có nhiều công cụ và tùy chọn hơn)
  • Express cho nút. js
  • Laravel cho PHP
  • Ruby On Rails cho Ruby
  • Khởi động 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 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

Ghi chú. Việc dạy cho bạn bất kỳ ngôn ngữ hoặc khung phía máy chủ nào nằm ngoài phạm vi của bài viết này. 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

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

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

<form action="/somewhere_else">form>
50 được bao gồm 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 đang được gửi. Theo mặc định, giá trị của nó là
<form action="/somewhere_else">form>
13. Về mặt con người, điều này có nghĩa là. "Đây là dữ liệu biểu mẫu đã được mã hóa thành tham số URL. "

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

  • Đặt thuộc tính thành
    <form>form>
    
    4 vì không thể đặt nội dung tệp bên trong tham số URL
  • Đặt giá trị của thành
    <form action="/somewhere_else">form>
    
    17 vì dữ liệu sẽ được chia thành nhiều phần, một phần cho mỗi tệp cộng với một phần cho dữ liệu văn bản có trong nội dung 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
    <form action="/somewhere_else">form>
    
    18 để 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 action="/somewhere_else">form>
2

Ghi chú. Máy chủ có thể được định 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

Mỗi lần gửi dữ liệu lên máy chủ, bạn cần quan tâm đến vấn đề 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 biểu mẫu HTML - chúng đến từ cách máy chủ xử lý dữ liệu

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

Vì vậy, làm thế nào để bạn chống lại những mối đe dọa này? . Quy tắc quan trọng nhất là. đừng bao giờ tin tưởng người dùng của bạn, bao gồm cả chính bạn;

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 những nhân vật nguy hiểm tiềm tàng. Các ký tự cụ thể mà bạn nên thận trọng sẽ khác nhau tùy thuộc vào ngữ cảnh sử dụng dữ liệu và nền tảng máy chủ mà bạn sử dụng, nhưng tất cả các ngôn ngữ phía máy chủ đều có các chức năng cho điều 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)
  • Giới hạn lượng dữ liệu đến để chỉ cho phép những gì cần thiết
  • Các tệp đã tải lên hộp cát. 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 tên miền hoàn toàn khác

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

Như chúng tôi đã đề cập ở trên, việc gửi dữ liệu biểu mẫu rất dễ dàng, nhưng việc bảo mật một ứng dụng có thể phức tạp. Chỉ cần nhớ rằng nhà phát triển front-end 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 vào việc xác thực này vì không có cách nào để thực sự biết điều gì đã thực sự xảy ra ở phía máy khách

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

Làm cách nào để hiển thị dữ liệu bảng sau khi nhấp vào nút gửi trong HTML?

Bạn có thể hiển thị DataGrid trong khi nhấp vào nút gửi của biểu mẫu. Điều này có thể đạt được bằng cách hiển thị DataGrid bên trong sự kiện “gửi” biểu mẫu và ngăn hành động gửi mặc định bằng cách sử dụng phương thức “preventDefault” .

Dữ liệu từ một biểu mẫu HTML được gửi tới một URL như thế nào sau khi nó được gửi?

Dữ liệu được thêm vào URL dưới dạng một chuỗi 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 chấm hỏi ( ? ), theo sau là các cặp tên/giá trị, mỗi cặp được phân tách bằng dấu và ( & ).

Điều gì xảy ra sau khi gửi biểu mẫu trong HTML?

Hầu hết các biểu mẫu HTML đều có nút gửi ở cuối biểu mẫu. Khi tất cả các trường trong biểu mẫu đã được điền vào, người dùng nhấp vào nút gửi để ghi lại dữ liệu biểu mẫu. Hành vi tiêu chuẩn là thu thập tất cả dữ liệu đã được nhập vào biểu mẫu và gửi dữ liệu đó đến một chương trình khác để xử lý .

Làm cách nào để giữ dữ liệu biểu mẫu sau khi gửi javascript?

Làm cách nào để giữ giá trị trong biểu mẫu sau khi gửi? . Toán tử bậc ba là phiên bản ngắn hơn và thiết thực hơn của câu lệnh if/else tiêu chuẩn. Giữ cho dữ liệu biểu mẫu được làm mới bằng toán tử kết hợp Null PHP. Keep Form Data on Refresh Using the PHP Ternary Operator. The ternary operator is a shorter and more practical version of the standard if/else statement. Keep the Form Data on Refresh with the PHP Null Coalescing Operator.