amp-form

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

Davranış

amp-form uzantısı, bir AMP belgesindeki giriş alanlarını göndermek için formlar (<form>) oluşturmanıza olanak tanır. amp-form uzantısı, tarayıcılardaki bazı eksik davranışlar için çoklu dolgular da sağlar.

Bir <form> oluşturmadan önce, <amp-form> uzantısı için gerekli komut dosyasını eklemeniz gerekir; aksi takdirde, dokümanınız geçersiz olur. input etiketlerini, değerlerini (ör. <form> içinde olmayan girişler) gönderme dışında başka amaçlarla kullanıyorsanız amp-form uzantısını yüklemeniz gerekmez.

Temel bir form örneğini burada bulabilirsiniz:

<form method="post"
    action-xhr="https://example.com/subscribe"  
    target="_top">
    <fieldset>
      <label>
        <span>Name:</span>
        <input type="text"
          name="name"
          required>
      </label>
      <br>
      <label>
        <span>Email:</span>
        <input type="email"
          name="email"
          required>
      </label>
      <br>
      <input type="submit"
        value="Subscribe">
    </fieldset>
    <div submit-success>
      <template type="amp-mustache">
        Subscription successful!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Subscription failed!
      </template>
    </div>
  </form>

Özellikler

target

Formu gönderdikten sonra form yanıtının görüntüleneceği yeri belirtir. _blank veya _top değerini almalıdır.

action

Form girişini işlemek için bir sunucu uç noktası belirtir. Değer bir https URL'si (mutlak veya göreli) olmalı ve bir CDN bağlantısı olmamalıdır.

• method=GET için: bu özelliği veya action-xhr özelliğini kullanın.
• method=POST için: action-xhr özelliğini kullanın.

action-xhr

Form girişini işlemek ve XMLHttpRequest (XHR) aracılığıyla formu göndermek için bir sunucu uç noktası belirtir. Bir XHR isteği (bazen AJAX isteği olarak da bilinir), tarayıcının sayfa tam yüklenmeden veya yeni bir sayfa açılmadan istekte bulunmasına neden olur. Tarayıcılar, uygun durumlarda isteği Getirme API'sini kullanarak arka planda gönderir ve eski tarayıcılar için XMLHttpRequest API'sini kullanır.

Bu özellik method=POST için gereklidir ve method=GET için isteğe bağlıdır.

action-xhr değeri, action özelliğiyle aynı veya bundan farklı bir uç nokta olabilir ve yukarıdaki action gereksinimlerine sahiptir.

Formu başarıyla gönderdikten sonra kullanıcıyı yönlendirme hakkında bilgi edinmek için aşağıdaki Gönderimden sonra yönlendirme bölümüne bakın.

Diğer form özellikleri

Diğer tüm form özellikleri isteğe bağlıdır.

custom-validation-reporting

Bu, özel bir doğrulama raporlama stratejisini etkinleştiren ve seçen isteğe bağlı bir özelliktir. Geçerli değerler şunlardan biridir: show-first-on-submit, show-all-on-submit veya as-you-go.

Daha ayrıntılı bilgi için Özel Doğrulama bölümüne bakın.

Girişler ve alanlar

İzin Verilenler:

• Formla ilgili diğer öğeler; örneğin: <textarea>, <select>, <option>, <fieldset>, <label>, <input type=text>, <input type=submit> vb.
• <form method=POST action-xhr> içindeki <input type=password> ve <input type=file>.
• amp-selector

İzin Verilmeyenler:

• <input type=button>, <input type=image>
• Girişlerdeki formla ilgili çoğu özellik; örneğin: form, formaction, formtarget, formmethod ve diğerleri.

(Gelecekte bu kurallardan bazılarının gevşetilmesi yeniden değerlendirilebilir; sizin için gerekli olanlar varsa lütfen bunları bize bildirin ve kullanım örnekleri sağlayın).

Geçerli girişler ve alanlarla ilgili ayrıntılar için AMP doğrulayıcı spesifikasyonundaki amp-form kurallarına bakın.

İşlemler

amp-form öğesi, aşağıdaki işlemleri sunar:

Etkinlikler

amp-form aşağıdaki etkinlikleri sunar:

Bu etkinlikler, on özelliği aracılığıyla kullanılabilir.

Örneğin, aşağıdakiler hem submit-success hem de submit-error etkinliklerini dinler ve etkinliğe bağlı olarak farklı lightbox'lar gösterir:

<form ...="" on="submit-success:success-lightbox;submit-error:error-lightbox">
</form>

Tam örneği burada görebilirsiniz.

Giriş etkinlikleri

AMP, alt <input> öğelerinde change ve input-debounced etkinliklerini gösterir. Bu, bir giriş değeri değiştiğinde herhangi bir öğede bir işlemi yürütmek için on özelliğini kullanmanıza olanak tanır.

Örneğin, giriş değişikliğinde (bir anketi yanıtlamak için bir radyo düğmesinin seçilmesi, bir sayfanın çevirisini yapmak için select girişinden bir dilin seçilmesi vb.) bir form gönderilmesi yaygın bir kullanım örneğidir.

<form id="myform"
    method="post"
    action-xhr="https://example.com/myform"  
    target="_blank">
    <fieldset>
      <label>
        <input name="answer1"
          value="Value 1"
          type="radio"
          on="change:myform.submit">Value 1
      </label>
      <label>
        <input name="answer1"
          value="Value 2"
          type="radio"
          on="change:myform.submit">Value 2
      </label>
    </fieldset>
  </form>

Tam örneği burada görebilirsiniz.

Analiz tetikleyicileri

amp-form uzantısı, amp-analytics yapılandırmanızda izleyebileceğiniz aşağıdaki etkinlikleri tetikler:

Analizlerinizi aşağıdaki örnekte olduğu gibi bu etkinlikleri gönderecek şekilde yapılandırabilirsiniz:

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://www.example.com/analytics/event?eid=${eventId}",
        "searchEvent": "https://www.example.com/analytics/search?formId=${formId}&query=${formFields[query]}"
      },
      "triggers": {
        "formSubmit": {
          "on": "amp-form-submit",
          "request": "searchEvent"
        },
        "formSubmitSuccess": {
          "on": "amp-form-submit-success",
          "request": "event",
          "vars": {
            "eventId": "form-submit-success"
          }
        },
        "formSubmitError": {
          "on": "amp-form-submit-error",
          "request": "event",
          "vars": {
            "eventId": "form-submit-error"
          }
        }
      }
    }
  </script>
</amp-analytics>

Bu üç etkinlik de belirli bir forma ve formdaki alanlara karşılık gelen bir dizi değişken oluşturur. Bu değişkenler analiz için kullanılabilir.

Örneğin, aşağıdaki formun bir alanı vardır:

<form id="submit_form" action-xhr="/comment" method="POST">
  <input type="text" name="comment">
    <input type="submit" value="Yorum">
    </form>

amp-form-submit, amp-form-submit-success veya amp-form-submit-error etkinliği etkinleştiğinde, formda belirtilen değerleri içeren şu değişkenleri oluşturur:

• formId
• formFields[comment]

Başarı/hata yanıtı oluşturma

Formunuzdaki başarı veya hata yanıtlarını, amp-moustache gibi genişletilmiş şablonları kullanarak veya başarı yanıtlarını, verileri, amp-bind ve aşağıdaki yanıt özellikleriyle bağlayarak oluşturabilirsiniz:

Yanıtları şablonlarla oluşturmak için:

• <form> öğesinin doğrudan alt öğelerine bir yanıt özelliği uygulayın.
• İçinde <template></template> veya <script type="text/plain"></script> etiketiyle bir şablona ekleyerek ya da template="id_of_other_template" özelliğiyle bir şablonu referans alarak alt öğede yanıtı oluşturun.
• submit-success ve submit-error yanıtları için geçerli bir JSON nesnesi sağlayın. Hem başarı hem de hata yanıtlarının Content-Type: application/json üstbilgisi olmalıdır.

Örnek: Başarı, hata ve gönderiliyor medjlarını görüntüleyen form

Aşağıdaki örnekte, yanıtlar, formun içindeki bir satır içi şablonda oluşturulur.

<form ...>
  <fieldset>
    <input type="text" name="firstName">
      ...
    </fieldset>
    <div verify-error="">
      <template type="amp-mustache">
        There is a mistake in the form!
        {{#verifyErrors}}{{message}}{{/verifyErrors}}
    </template>
  </div>
  <div submitting="">
    <template type="amp-mustache">
      Form submitting... Thank you for waiting {{name}}.
    </template>
  </div>
  <div submit-success="">
    <template type="amp-mustache">
      Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}}
    to confirm! After that we'll start sending you weekly articles on {{#interests}}<b>{{name}}</b> {{/interests}}.
  </template>
</div>
<div submit-error="">
  <template type="amp-mustache">
    Oops! {{name}}, {{message}}.
  </template>
</div>
</form>

Yayıncının action-xhr uç noktası aşağıdaki JSON yanıtlarını döndürür:

Başarılı olursa:

{
  "name": "Jane Miller",
  "interests": [{"name": "Basketball"}, {"name": "Swimming"}, {"name": "Reading"}],
  "email": "email@example.com"
}

Hata için:

{
  "name": "Jane Miller",
  "message": "The email (email@example.com) you used is already subscribed."
}

submit-success ve submit-error özelliklerine sahip öğelerde ayarlanmış template özelliğinin değeri için şablon kimliğini kullanarak, dokümanın önceki bölümlerinde tanımlanmış bir referans alınan şablonda yanıtları oluşturabilirsiniz.

<template id="submit_success_template" type="amp-mustache">
  Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}}
to confirm! After that we'll start sending you weekly articles on {{#interests}}<b>{{name}}</b> {{/interests}}.
</template>
<template id="submit_error_template" type="amp-mustache">
  Oops! {{name}}, {{message}}.
</template></p>

<form ...="">
  <fieldset>
    ...
  </fieldset>
  <div submit-success="" template="submit_success_template"></div>
  <div submit-error="" template="submit_error_template"></div>
</form>

Tam örneği burada görebilirsiniz.

Veri bağlama ile bir başarılı yanıtı oluşturmak için

• Form submit-success özelliğini AMP.setState() yöntemine bağlamak için on özelliğini kullanın.
• Yanıt verilerini yakalamak için event özelliğini kullanın.
• Form yanıtını bağlamak için durum özelliğini istediğiniz öğeye ekleyin.

Aşağıdaki örnekte amp-bind özelliğiyle oluşturulmuş bir form submit-success yanıtı gösterilmektedir:

<p [text]="'Thanks, ' + subscribe +'! You have successfully subscribed.'">Subscribe to our newsletter</p>
<form method="post"
      action-xhr="/components/amp-form/submit-form-input-text-xhr"
      target="_ top"
      on="submit-success: AMP.setState({'subscribe': event.response.name})">
  <div>
    <input type="text"
        name="name"
        placeholder="Name..."
        required>
    <input type="email"
      name="email"
      placeholder="Email..."
      required>
  </div>
  <input type="submit" value="Subscribe">
</form>

Form başarıyla gönderildiğinde, aşağıdakine benzer bir JSON yanıtı döndürür:

{
  "name": "Jane Miller",
  "email": "email@example.com"
}

Ardından, amp-bind özelliği <p> öğesinin metnini subscibe durumuyla eşleşecek şekilde günceller:

...
  <p [text]="'Thanks, ' + subscribe +'! You have successfully subscribed.'">Thanks Jane Miller! You have successfully subscribed.</p>
...

Gönderimden sonra yönlendirme

AMP-Redirect-To yanıt üstbilgisini ayarlayarak ve bir yönlendirme URL'si belirterek, başarılı bir form gönderildikten sonra kullanıcıları yeni bir sayfaya yönlendirebilirsiniz. Yönlendirme URL'si bir HTTPS URL'si olmalıdır; aksi takdirde, AMP bir hata bildirir ve yönlendirme gerçekleşmez. HTTP yanıtı üstbilgileri, sunucunuz aracılığıyla yapılandırılır.

AMP-Redirect-To yanıt üstbilgisini izin verilen üstbilgiler listesine eklemek için Access-Control-Expose-Headers yanıt üstbilginizi güncellediğinizden emin olun. Bu başlıklar hakkında daha fazla bilgiyi AMP'de CORS Güvenliği sayfasında edinebilirsiniz.

Örnek yanıt üstbilgileri:

AMP-Redirect-To: https://example.com/forms/thank-you
Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin, AMP-Redirect-To

Özel doğrulamalar

amp-form uzantısı, kendi özel doğrulama kullanıcı arayüzünüzü oluşturmak için custom-validation-reporting özelliğini ve şu raporlama stratejilerinden birini kullanmanıza olanak tanır: show-first-on-submit, show-all-on-submit veya as-you-go.

Formunuzda özel doğrulamayı belirtmek için:

1. form öğenizde custom-validation-reporting özelliğini, doğrulama raporlama stratejilerinden birine ayarlayın.
2. Özel özelliklerle işaretlenmiş kendi doğrulama kullanıcı arayüzünüzü sağlayın. AMP, özel özellikleri keşfeder ve belirttiğiniz raporlama stratejisine bağlı olarak bunları doğru zamanda bildirir.

Aşağıda bir örnek verilmiştir:

<form method="post"
    action-xhr="https://example.com/subscribe"
    custom-validation-reporting="show-all-on-submit"  
    target="_blank">
    <fieldset>
      <label>
        <span>Name:</span>
        <input type="text"
          name="name"
          id="name5"
          required
          pattern="\w+\s\w+">
        <span visible-when-invalid="valueMissing"
          validation-for="name5"></span>
        <span visible-when-invalid="patternMismatch"
          validation-for="name5">
          Please enter your first and last name separated by a space (e.g. Jane Miller)
        </span>
      </label>
      <br>
      <label>
        <span>Email:</span>
        <input type="email"
          name="email"
          id="email5"
          required>
        <span visible-when-invalid="valueMissing"
          validation-for="email5"></span>
        <span visible-when-invalid="typeMismatch"
          validation-for="email5"></span>
      </label>
      <br>
      <input type="submit"
        value="Subscribe">
    </fieldset>
  </form>

Daha fazla örnek için examples/forms.amp.html sayfasına bakın.

Doğrulama mesajlarında, öğenizin içinde herhangi bir metin içeriği yoksa AMP, öğenizi tarayıcının varsayılan doğrulama mesajıyla doldurur. Yukarıdaki örnekte name5 girişi boş olduğunda ve doğrulama işlemi başlatıldığında (ör. kullanıcı, formu göndermeyi denediğinde) AMP, <span visible-when-invalid="valueMissing" validation-for="name5"></span> öğesini, tarayıcının doğrulama mesajıyla doldurur ve bu span öğesini kullanıcıya gösterir.

Raporlama stratejileri

custom-validation-reporting özelliği için aşağıdaki raporlama seçeneklerinden birini belirtin:

Gönderimde İlkini Göster

show-first-on-submit raporlama seçeneği, varsayılan ilk doğrulama devreye girdiğinde tarayıcının varsayılan davranışını taklit eder. Bulduğu ilk doğrulama hatasını gösterir ve orada durur.

Gönderimde Tümünü Göster

show-all-on-submit raporlama seçeneği, form gönderildiğinde tüm geçersiz girişlerdeki tüm doğrulama hatalarını gösterir. Bu, doğrulamaların bir özetini göstermek istiyorsanız yararlı olur.

Devam Ederken

as-you-go raporlama seçeneği, kullanıcınızın girişle etkileşimde bulunurken doğrulama mesajlarını görmesine olanak tanır. Örneğin, kullanıcı geçersiz bir e-posta adresi girerse hatayı hemen görür. Değeri düzelttikten sonra hata kaybolur.

Etkileşimde Bulun ve Gönder

interact-and-submit raporlama seçeneği, show-all-on-submit ve as-you-go davranışını birleştirir. Tek tek alanlar, etkileşimlerden hemen sonra hataları gösterir ve gönderimde, form tüm geçersiz alanlardaki hataları gösterir.

Doğrulama

HTML5 doğrulaması, yalnızca sayfada bulunan bir değerin belirli bir kalıpla eşleşip eşleşmediği gibi bilgilere dayalı geri bildirimler sağlar. amp-form doğrulaması ile kullanıcıya, HTML5 doğrulamasının tek başına sağlayamayacağı bir geri bildirim sunabilirsiniz. Örneğin, bir form, bir e-posta adresinin önceden kayıtlı olup olmadığını kontrol etmek için doğrulamayı kullanabilir. Başka bir kullanım örneği, bir şehir alanı ve posta kodu alanının birbiriyle eşleştiğini doğrulamaktır.

Burada, bir örneği görebilirsiniz:

<h4>Doğrulama örneği</h4>
<form method="post" action-xhr="/form/verify-json/post" verify-xhr="/form/verify-json/post"{% if not format=='email'%}   target="_blank"{% endif %}>
  <fieldset>
    <label>
      <span>E-posta</span>
      <input type="text" name="email" required="">
      </label>
      <label>
        <span>Posta Kodu</span>
        <input type="tel" name="zip" required="" pattern="[0-9]{5}(-[0-9]{4})?">
        </label>
        <label>
          <span>Şehir</span>
          <input type="text" name="city" required="">
          </label>
          <label>
            <span>Doküman</span>
            <input type="file" name="document" no-verify="">
            </label>
            <div class="spinner"></div>
            <input type="submit" value="Gönder">
            </fieldset>
            <div submit-success="">
              <template type="amp-mustache">
                <p>Tebrikler! {{email}} e-posta adresi ile kaydoldunuz</p>
              </template>
            </div>
            <div submit-error="">
              <template type="amp-mustache">
                {{#verifyErrors}}
              <p>{{message}}</p>
              {{/verifyErrors}}
            {{^verifyErrors}}
          <p>Bir hata oluştu. Daha sonra tekrar denemek ister misiniz?</p>
          {{/verifyErrors}}
      </template>
    </div>
  </form>

Form, isteğin bir doğrulama isteği olduğuna ve resmi bir gönderim olmadığına dair sunucuya ipucu vermek için form verilerinin bir parçası olarak bir __amp_form_verify alanı gönderir. Doğrulama ve gönderim için aynı uç nokta kullanılırsa sunucunun doğrulama isteğini kaydetmeyeceğini bilmesi açısından bu faydalı olur.

Bir hata yanıtının doğrulama için nasıl görüneceği burada gösterilmektedir:

  {
    "verifyErrors": [
      {"name": "email", "message": "That email is already taken."},
      {"name": "zip", "message": "The city and zip do not match."}
  ]
}

verify-xhr isteğinden bir alanı kaldırmak için giriş öğesine no-verify özelliğini ekleyin.

Daha fazla örnek için examples/forms.amp.html sayfasına bakın.

Değişken değişiklikleri

amp-form uzantısı, gizli olan ve data-amp-replace özelliğine sahip girişler için platform değişken değişikliklerine olanak tanır. Her form gönderiminde amp-form, formun içindeki tüm input[type=hidden][data-amp-replace] öğelerini bulur ve değişken değişikliklerini value özelliğine uygulayıp bunu, değişikliğin sonucuyla değiştirir.

Her bir girişte, data-amp-replace öğesinde kullanılan boşlukla ayrılmış değişken dizesini belirterek her değişiklik için kullandığınız değişkenleri sağlamanız gerekir (aşağıdaki örneğe bakın). AMP, açıkça belirtilmeyen değişkenleri değiştirmez.

Girişlerin, değişikliklerden önce ve sonra nasıl olduğuyla ilgili bir örneği burada bulabilirsiniz (değişken değişikliklerinin platform söz dizimini kullanmanız gerektiğini, analiz olanları kullanmayacağınızı unutmayın):

<!-- Initial Load -->
<form ...>
  <input name="canonicalUrl" type="hidden"
        value="The canonical URL is: CANONICAL_URL - RANDOM - CANONICAL_HOSTNAME"
        data-amp-replace="CANONICAL_URL RANDOM">
  <input name="clientId" type="hidden"
        value="CLIENT_ID(myid)"
        data-amp-replace="CLIENT_ID">
  ...
</form>

Kullanıcı formu göndermeyi denedikten sonra, AMP değişkenleri çözmeye ve tüm alanların alan value özelliğini uygun değişikliklerle güncellemeye çalışır. XHR gönderimlerinde, büyük olasılıkla tüm değişkenler değiştirilir ve çözümlenir. Ancak, XHR olmayan GET gönderimlerinde, eşzamansız çözümleme gerektiren değerler, önceden çözümlenmedikleri için kullanılamayabilir. Örneğin, CLIENT_ID daha önce çözümlenmemişse ve önbelleğe alınmışsa çözümlenmez.

    <!-- User submits the form, variables values are resolved into fields' value -->
    <form ...>
      <input name="canonicalUrl" type="hidden"
            value="The canonical URL is: https://example.com/hello - 0.242513759125 - CANONICAL_HOSTNAME"
            data-amp-replace="CANONICAL_URL RANDOM">
      <input name="clientId" type="hidden"
            value="amp:asqar893yfaiufhbas9g879ab9cha0cja0sga87scgas9ocnas0ch"
            data-amp-replace="CLIENT_ID">
        ...
    </form>

Yukarıdaki CANONICAL_HOSTNAME öğesinin, ilk alandaki data-amp-replace özelliği aracılığıyla beyaz listeye alınmadığı için değiştirilmemiş olmasına dikkat edin.

Değişiklikler, bir sonraki gönderimde gerçekleşir. AMP'deki değişken değişiklikleri hakkında daha fazla bilgi edinin.

Çoklu dolgular

amp-form uzantısı, bazı tarayıcılarda eksik olan veya CSS'nin sonraki sürümünde uygulanan davranışlar ve işlevler için çoklu dolgular sağlar.

Geçersiz gönderim engelleme ve doğrulama mesajı balonu

Şu anda (Ağustos 2016 itibarıyla) webkit tabanlı motorlar kullanan tarayıcılar geçersiz form gönderimlerini desteklememektedir. Bu tarayıcılar arasında tüm platformlarda Safari ve tüm iOS tarayıcıları bulunur. amp-form uzantısı, geçersiz gönderimleri engellemek ve geçersiz girişlerdeki doğrulama mesajı balonlarını göstermek için bu davranışı gerçekleştirir.

Kullanıcı etkileşimi sözde sınıfları

:user-invalid ve :user-valid sözde sınıfları, gelecekteki CSS Seçicileri 4 spesifikasyonunun parçasıdır ve geçersiz/geçerli alanların birkaç ölçüt temelinde şekillendirilmesine yönelik daha iyi kancalar sağlamak için kullanıma sunulmuştur.

:invalid ve :user-invalid arasındaki temel farklardan biri, öğeye uygulanma zamanıdır. :user-invalid sınıfı, kullanıcının alanla kayda değer bir etkileşiminden sonra uygulanır (ör. kullanıcı bir alana yazı yazar veya alandan uzaklaşır).

amp-form uzantısı, bu sözde sınıfları çoklu dolduracak sınıflar sağlar. amp-form uzantısı, bunları üst fieldset öğelerine ve form öğesine de yayar.

<textarea> doğrulaması

Normal ifade eşleştirme, <textarea> haricindeki çoğu giriş öğesinde yerel olarak desteklenen yaygın bir doğrulama özelliğidir. Bu işlevselliğe çoklu dolgu yapar ve <textarea> öğelerinde pattern özelliğini destekleriz.

AMP Formu, <textarea> öğelerine bir autoexpand özelliği sağlar. Bu, kullanıcının giriş satırlarına göre metin alanının maksimum boyutuna genişlemesine ve daralmasına olanak tanır. Kullanıcı, alanı manuel olarak yeniden boyutlandırırsa otomatik genişleme davranışı kaldırılır.

<textarea autoexpand></textarea>

Stil

Sınıflar ve CSS kancaları

amp-form uzantısı, yayıncıların formlarını ve girişlerini şekillendirmeleri için sınıflar ve CSS kancaları sağlar.

Aşağıdaki sınıflar form gönderiminin durumunu belirtmek için kullanılabilir:

• .amp-form-initial
• .amp-form-verify
• .amp-form-verify-error
• .amp-form-submitting
• .amp-form-submit-success
• .amp-form-submit-error

Aşağıdaki sınıflar, kullanıcı etkileşimi sözde sınıfları için bir çoklu dolgudur:

• .user-valid
• .user-invalid

Yayıncılar, girişlerini ve alan ayarlarını kullanıcı işlemlerine duyarlı olacak (ör. kullanıcı ayrıldıktan sonra sonra geçersiz bir girişi kırmızı bir kenarlık ile vurgulama) biçimde şekillendirmek için bu sınıfları kullanabilir.

Bunların kullanımıyla ilgili tam örneği burada bulabilirsiniz.

Güvenlikle ilgili olarak göz önünde bulundurulması gerekenler

XSRF'ye karşı koruma

Bir saldırganın, kullanıcının bilgisi olmadan geçerli kullanıcı oturumunu kullanarak yetkisiz komutlar yürütebildiği XSRF saldırılarına karşı koruma sağlamak için AMP CORS spesifikasyonundaki ayrıntıları uygulamaya ek olarak, lütfen "Durum değiştirme isteklerini işleme"#processing-state-changing-requests) konulu bölüme de dikkat edin.

Genel olarak, kullanıcıdan gelen girişleri kabul ederken aşağıdaki noktaları göz önünde bulundurun:

• POST isteklerini yalnızca durum değiştirme istekleri için kullanın.
• XHR olmayan GET isteklerini yalnızca gezinme amacıyla kullanın (ör. Arama).
  • XHR olmayan GET istekleri doğru kaynak/üstbilgiler almaz ve arka uçlar, yukarıdaki mekanizma ile XSRF'ye karşı koruma sağlayamaz.
  • Genel olarak, XHR/XHR olmayan GET isteklerini yalnızca gezinme veya bilgi almak için kullanın.
• AMP dokümanlarında XHR olmayan POST isteklerine izin verilmez. Bunun nedeni, farklı tarayıcılarda bu isteklerdeki Origin üstbilgisinin ayarlanmasında tutarsızlıkların olmasıdır. Ayrıca, bunun desteklenmesi, XSRF'ye karşı korumada zorluklara yol açacaktır. Bu durum yeniden değerlendirilebilir ve ileride kullanıma sunulabilir. Bunun gerekli olduğunu düşünüyorsanız lütfen bir sorun bildiriminde bulunun.