آموزش فرم در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش فرم در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فرم در گوگل AMP خواهیم پرداخت.

در این درس نحوه کار با فرم در Google AMP توضیح داده شده است.

توجه داشته باشید که برچسب اشکال همان HTML استاندارد باقی مانده است. AMP محدودیت ویژه ای در استفاده از فرم ها ایجاد کرده است که به دلیل آن ما باید برای کار با فرم ها، پرونده جاوا اسکریپت amp-form را اضافه کنیم.

اسکریپت برای amp-form

&lt;script async custom-element = "amp-form" 
   src = "https://cdn.ampproject.org/v0/ampform-0.1.js"&gt;&lt;/script&gt;

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

برای استفاده از فرم ها در صفحه AMP، باید اسکریپت فوق را در فایل html. قرار دهیم. پرونده جاوا اسکریپت amp-form از http و xmlhttprequest برای ارسال فرم پشتیبانی می کند. با استفاده از درخواست HTTP صفحه بارگیری می شود و با xmlhttprequest صفحه بارگیری مجدد نمی شود مانند درخواست ajax عمل می کند.

فرم تگ در AMP

For xmlhttprequest :
&lt;form method = "post" class = "p2" action-xhr = "submitform.php" target = "_top"&gt;
   //Input fields here
&lt;/form&gt;

For http :
&lt;form method = "post" class = "p2" action = "submitform.php" target = "_top"&gt;
   //Input fields here
&lt;/form&gt;

For xmlhttprequest :

//Input fields here

</form>

For http :

//Input fields here

</form>

فرم Amp ویژگی های خاصی را ارائه می دهد ، یعنی ارسال خطا و ارسال موفقیت برای رسیدگی به خطا و موفقیت هنگام ارسال فرم.

مثال

یک مثال برای فرم Amp در زیر نشان داده شده است –

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Form&lt;/title&gt;
      &lt;link rel = "canonical" href = "ampform.html"&gt;
      &lt;meta name = "viewport" conten t = "width = device-width,
         minimum-scale = 1,initialscale = 1"&gt;
      
      &lt;style amp-boilerplate&gt;
         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}}  
      &lt;/style&gt;
         &lt;noscript&gt;
            &lt;style amp-boilerplate&gt;
               body{
                  -webkit-animation:none;
                  -moz-animation:none;
                  -msanimation:none;
                  animation:none
               }
            &lt;/style&gt;
         &lt;/noscript&gt;
      &lt;script async custom-element = "amp-form"
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"&gt;
      &lt;/script&gt;
      &lt;script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js"&gt;
      &lt;/script&gt;
      &lt;style amp-custom&gt;
         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 &gt; input {
            display: none;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h3&gt;Google AMP - Form&lt;/h3&gt;
      &lt;form method = "post" 
         class = "p2" 
         action-xhr = "submitform.php" 
         target = "_top"&gt;
         &lt;p&gt;AMP - Form Example&lt;/p&gt;
         &lt;div&gt;
            &lt;input type = "text" name = "name" placeholder = "Enter 
               Name" required&gt;&lt;br/&gt;&lt;br/&gt;
            &lt;input type = "email" name = "email" 
            placeholder = "Enter Email" required&gt;
            &lt;br/&gt;
            &lt;br/&gt;
         &lt;/div&gt;
         
         &lt;input type = "submit" value = "Submit"&gt;
         &lt;div submit-success&gt;
            &lt;template type = "amp-mustache"&gt;
               Form Submitted! Thanks {{name}}.
            &lt;/template&gt;
         &lt;/div&gt;
         
         &lt;div submit-error&gt;
            &lt;template type = "amp-mustache"&gt;
               Error! {{name}}, please try again.
            &lt;/template&gt;
         &lt;/div&gt;
      &lt;/form&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - Form</title>

minimum-scale = 1,initialscale = 1">

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>

body{

-webkit-animation:none;

-moz-animation:none;

-msanimation:none;

animation:none

}

</style>

</noscript>

src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">

</script>

src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">

</script>

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/>

</div>

Form Submitted! Thanks {{name}}.

</template>

</div>

Error! {{name}}, please try again.

</template>

</div>

</form>

</body>

</html>

خروجی

هنگامی که کدی را که در بالا نشان داده شده است اجرا کردید ، نتیجه را همانطور که در زیر نشان داده شده است خواهید یافت –

AMP Form
اکنون، جزئیات را وارد کرده و بر روی دکمه ارسال کلیک کنید. صفحه خروجی نمایش داده شده به شرح زیر است –

AMP Form Submitted
مشاهده کنید که ما از amp-mustache برای اتصال داده استفاده کرده ایم. فرم برای ارسال فرم از action-xhr یعنی xmlhttprequest استفاده می کند. ما از فایل submitform.php استفاده کرده ایم که داده ها را در فرمت json برمی گرداند.

&lt;form method = "post" class = "p2" action-xhr = "submitform.php" 
   target = "_top"&gt;
&lt;/form&gt;

<form method = "post" class = "p2" action-xhr = "submitform.php"

target = "_top">

</form>

submitform.php

&lt;?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;
   }
?&gt;

<?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;

}

برای اینکه فرم با استفاده از xmlhttprequest کار کند ، باید عنوان ها را مطابق مشخصات CORS اضافه کنیم. جزئیات عناوین پاسخ اضافه شده به submitform.php در زیر نشان داده شده است –

برای کار کردن فرم، باید عناوینی مانند سرصفحه های کنترل access-control-expose-headers AMP-Access-Control-Allow-Source-Origin و AMP-Access-Control-Allow-Source-Origin اضافه کنیم

توجه داشته باشید که ما از یک فایل php و سرور apache استفاده می کنیم. در فایل php، عناوین مورد نیاز را مانند تصویر زیر اضافه کرده ایم –

&lt;?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;
   }
   ?
?&gt;

<?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;

}

در صورت استفاده از یک درخواست http معمولی، صفحه بارگیری می شود همانطور که در زیر نشان داده شده است –

برای درخواست http ما از فرم به شرح زیر استفاده کرده ایم –

&lt;form method = "GET" class = "p2" action = "submitform.php" 
   target = "_top"&gt;
&lt;/form&gt;

<form method = "GET" class = "p2" action = "submitform.php"

target = "_top">

</form>

مثال

برای درک بهتر کد زیر را رعایت کنید –

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Form&lt;/title&gt;
      &lt;link rel = "canonical" href = "ampform.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,minimum-scale = 1,initialscale = 1"&gt;
      
      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -msanimation:none;
               animation:none}
         &gt;/style&gt;
      &lt;/noscript&gt;
      
      &lt;script async custom-element = "amp-form"
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"&gt;
      &lt;/script&gt;
      &lt;script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js"&gt;
      &lt;/script&gt;
      
      &lt;style amp-custom&gt;
         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 &gt; 
            input {
            display: none;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h3&gt;Google AMP - Form&lt;/h3&gt;
      &lt;form method = "GET" class = "p2" action = "submitform.php" target = "_top"&gt;
         &lt;p&gt;AMP - Form Example&lt;/p&gt;
         &lt;div&gt;
            &lt;input type = "text" name = "name" placeholder = "Enter Name" required&gt;
            &lt;br/&gt;
            &lt;br/&gt;
            &lt;input type = "email" name = "email" placeholder = "Enter Email" required&gt;
            &lt;br/&gt;
            &lt;br/&gt;
         &lt;div&gt;
         
         &lt;input type = "submit" value = "Submit"&gt;
         &lt;div submit-success&gt;
            &lt;template type = "amp-mustache"&gt;
               Form Submitted! Thanks {{name}}.
            &lt;/template&gt;
         &lt;/div&gt;
         &lt;div submit-error&gt;
            &lt;template type = "amp-mustache"&gt;
               Error! {{name}}, please try again.
            &lt;/template&gt;
         &lt;/div&gt;
      &lt;/form&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - Form</title>

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>

body {

-webkit-animation:none;

-moz-animation:none;

-msanimation:none;

animation:none}

>/style>

</noscript>

src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">

</script>

src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">

</script>

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>

<p>AMP - Form Example</p>

<div>

<br/>

<br/>

<div>

Form Submitted! Thanks {{name}}.

</template>

</div>

Error! {{name}}, please try again.

</template>

</div>

</form>

</body>

</html>

خروجی

هنگامی که کدی را که در بالا نشان داده شده است اجرا کردید، نتیجه را همانطور که در زیر نشان داده شده است خواهید یافت –

Google Amp Form

Google Amp Forms

منبع.

لیست جلسات قبل آموزش گوگل AMP

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش فرم در گوگل AMP

آموزش فرم در گوگل AMP

اسکریپت برای amp-form

فرم تگ در AMP

مثال

خروجی

submitform.php

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش فرم در گوگل AMP

اسکریپت برای amp-form

فرم تگ در AMP

مثال

خروجی

submitform.php

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه