Google AMP - Biểu mẫu

Chương này giải thích cách làm việc với biểu mẫu trong Google AMP.

Lưu ý rằng thẻ biểu mẫu vẫn giống như trong HTML chuẩn. AMP đã thêm hạn chế đặc biệt đối với việc sử dụng biểu mẫu do đó chúng tôi cần thêm tệp JavaScript amp-form để hoạt động với biểu mẫu.

Tập lệnh cho dạng amp

<script async custom-element = "amp-form" 
   src = "https://cdn.ampproject.org/v0/ampform-0.1.js"></script>

Để sử dụng biểu mẫu trong trang AMP, chúng tôi cần đưa tập lệnh trên vào tệp .html. Tệp JavaScript dạng amp hỗ trợhttp và xmlhttprequestđể gửi biểu mẫu. Sử dụng yêu cầu HTTP, trang được tải lại và vớixmlhttprequest nó không tải lại trang hoạt động giống như yêu cầu ajax.

Thẻ biểu mẫu trong AMP

For xmlhttprequest :
<form method = "post" class = "p2" action-xhr = "submitform.php" target = "_top">
   //Input fields here
</form>

For http :
<form method = "post" class = "p2" action = "submitform.php" target = "_top">
   //Input fields here
</form>

Amp-form cung cấp các thuộc tính đặc biệt, tức là submit-error và submit-success để xử lý lỗi và thành công khi biểu mẫu được gửi.

Example

Ví dụ cho dạng amp được hiển thị bên dưới:

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Form</title>
      <link rel = "canonical" href = "ampform.html">
      <meta name = "viewport" conten t = "width = device-width,
         minimum-scale = 1,initialscale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}  
      </style>
         <noscript>
            <style amp-boilerplate>
               body{
                  -webkit-animation:none;
                  -moz-animation:none;
                  -msanimation:none;
                  animation:none
               }
            </style>
         </noscript>
      <script async custom-element = "amp-form"
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
      </script>
      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      <style amp-custom>
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs > input {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Form</h3>
      <form method = "post" 
         class = "p2" 
         action-xhr = "submitform.php" 
         target = "_top">
         <p>AMP - Form Example</p>
         <div>
            <input type = "text" name = "name" placeholder = "Enter 
               Name" required><br/><br/>
            <input type = "email" name = "email" 
            placeholder = "Enter Email" required>
            <br/>
            <br/>
         </div>
         
         <input type = "submit" value = "Submit">
         <div submit-success>
            <template type = "amp-mustache">
               Form Submitted! Thanks {{name}}.
            </template>
         </div>
         
         <div submit-error>
            <template type = "amp-mustache">
               Error! {{name}}, please try again.
            </template>
         </div>
      </form>
   </body>
</html>

Output

Khi bạn thực thi đoạn mã hiển thị ở trên, bạn sẽ thấy kết quả như hình dưới đây:

Bây giờ, hãy nhập thông tin chi tiết và nhấp vào nút Gửi. Màn hình đầu ra hiển thị như sau:

Quan sát rằng chúng tôi đã sử dụng amp-ria mép để liên kết dữ liệu. Biểu mẫu đang sử dụng action-xhr tức là xmlhttprequest để gửi biểu mẫu. Chúng tôi vừa dùngsubmitform.php tệp trả về dữ liệu ở định dạng json.

<form method = "post" class = "p2" action-xhr = "submitform.php" 
   target = "_top">
</form>

submitform.php

<?php
   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .      "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
?>

Để biểu mẫu hoạt động bằng cách sử dụng xmlhttprequest, chúng ta cần thêm các tiêu đề theo đặc tả CORS. Chi tiết về tiêu đề phản hồi được thêm vào submitform.php được hiển thị bên dưới:

Để biểu mẫu hoạt động, chúng ta cần thêm các tiêu đề như access-control-expose-headers với giá trị AMP-Access-Control-Allow-Source-Origin và amp-access-controlallow- source-origin -http://localhost:8080.

Lưu ý rằng chúng tôi đang sử dụng tệp php và máy chủ apache. Trong tệp php, chúng tôi đã thêm các tiêu đề bắt buộc như hình dưới đây:

<?php

   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .  "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
   ?
?>

Trong trường hợp chúng tôi sử dụng yêu cầu http bình thường, trang sẽ được tải lại như hình dưới đây -

Đối với yêu cầu http, chúng tôi đã sử dụng biểu mẫu như sau:

<form method = "GET" class = "p2" action = "submitform.php" 
   target = "_top">
</form>

Example

Hãy quan sát đoạn mã sau để hiểu rõ hơn:

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Form</title>
      <link rel = "canonical" href = "ampform.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initialscale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -ampstart{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -msanimation:none;
               animation:none}
         >/style>
      </noscript>
      
      <script async custom-element = "amp-form"
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
      </script>
      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      
      <style amp-custom>
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs > 
            input {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Form</h3>
      <form method = "GET" class = "p2" action = "submitform.php" target = "_top">
         <p>AMP - Form Example</p>
         <div>
            <input type = "text" name = "name" placeholder = "Enter Name" required>
            <br/>
            <br/>
            <input type = "email" name = "email" placeholder = "Enter Email" required>
            <br/>
            <br/>
         <div>
         
         <input type = "submit" value = "Submit">
         <div submit-success>
            <template type = "amp-mustache">
               Form Submitted! Thanks {{name}}.
            </template>
         </div>
         <div submit-error>
            <template type = "amp-mustache">
               Error! {{name}}, please try again.
            </template>
         </div>
      </form>
   </body>
</html>

Output

Khi bạn thực thi đoạn mã hiển thị ở trên, bạn sẽ thấy kết quả như hình dưới đây:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved