- Davranış
- Özellikler
- target
- action
- action-xhr
- Diğer form özellikleri
- custom-validation-reporting
- Girişler ve alanlar
- İşlemler
- Etkinlikler
- Giriş etkinlikleri
- Analiz tetikleyicileri
- Başarı/hata yanıtı oluşturma
- Yanıtları şablonlarla oluşturmak için:
- Örnek: Başarı, hata ve gönderiliyor medjlarını görüntüleyen form
- Veri bağlama ile bir başarılı yanıtı oluşturmak için
- Gönderimden sonra yönlendirme
- Özel doğrulamalar
- Raporlama stratejileri
- Gönderimde İlkini Göster
- Gönderimde Tümünü Göster
- Devam Ederken
- Etkileşimde Bulun ve Gönder
- Doğrulama
- Değişken değişiklikleri
- Çoklu dolgular
- Geçersiz gönderim engelleme ve doğrulama mesajı balonu
- Kullanıcı etkileşimi sözde sınıfları
- <textarea> doğrulaması
- Stil
- Sınıflar ve CSS kancaları
- Güvenlikle ilgili olarak göz önünde bulundurulması gerekenler
- XSRF'ye karşı koruma
amp-form
Description
Allows you to create forms to submit input fields in an AMP document.
Required Scripts
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
Örnekler
Açıklama | form ve input etiketleri oluşturmanıza olanak tanır. |
Zorunlu Komut Dosyası | <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> |
Desteklenen Düzenler | Yok |
Örnekler | Örneklerle AMP amp-form örneklerine bakın. |
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 veyaaction-xhr
özelliğini kullanın.method=POST
için:action-xhr
özelliğini kullanın.
target
ve action
özellikleri yalnızca xhr dışındaki GET istekleri için kullanılır. AMP çalışma zamanı, istekte bulunmak için action-xhr
özelliğini kullanır ve action
ve target
özelliklerini yoksayar. action-xhr
sağlanmadığında AMP, action
uç noktasına bir GET isteğinde bulunur ve yeni bir pencere açmak için target
özelliğini kullanır (_blank
değerinde). AMP çalışma zamanı, amp-form
uzantısının yüklenemediği durumlarda da action
ve target
özelliklerini kullanmaya geri dönebilir. 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:
İşlem | Açıklama |
---|---|
submit |
Örneğin bir bağlantıya dokunulması veya giriş değiştiğinde bir form gönderilmesi gibi belirli bir işlemde form gönderimini tetiklemenize olanak tanır. |
clear |
Formdaki her bir girişin değerlerini boşaltır. Bu, kullanıcıların formları ikinci kez hızlıca doldurmalarına olanak tanıyabilir. |
Etkinlikler
amp-form
aşağıdaki etkinlikleri sunar:
Etkinlik | Tetiklenme zamanı |
---|---|
submit |
Form gönderildiğinde ve gönderim tamamlanmadan önce. |
submit-success |
Form gönderimi bittiğinde ve yanıt başarılı olduğunda. |
submit-error |
Form gönderimi bittiğinde ve hata yanıtı alındığında. |
verify |
Eşzamansız doğrulama başlatıldığında. |
verify-error |
Eşzamansız doğrulama bittiğinde ve hata yanıtı alındığında. |
valid |
Formun doğrulama durumu "geçerli" olarak değiştiğinde (raporlama stratejisine uygun olarak). |
invalid |
Formun doğrulaması "geçersiz" durumunda olduğunda (raporlama stratejisine uygun olarak). |
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:
Etkinlik | Tetiklenme zamanı |
---|---|
amp-form-submit |
Bir form isteği başlatıldığında. |
amp-form-submit-success |
Başarılı bir yanıt alındığında (ör. yanıt 2XX durumuna sahip olduğunda). |
amp-form-submit-error |
Başarısız bir yanıt alındığında (ör. yanıt 2XX durumuna sahip olmadığında). |
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ıt özelliği | Açıklama |
---|---|
submit-success |
Yanıt başarılı olursa (ör. 2XX durumuna sahipse) bir başarı mesajı görüntülemek için kullanılabilir. |
submit-error |
Yanıt başarısız olursa (ör. 2XX durumuna sahip değilse) bir gönderim hatası görüntülemek için kullanılabilir. |
submitting |
Form gönderilirken bir mesaj görüntülemek için kullanılabilir. Bu özelliğe ait şablonun, görüntüleme amaçlı tüm form giriş alanlarına erişimi vardır. submitting özelliğini nasıl kullanacağınızı öğrenmek için lütfen aşağıdaki tam form örneğine bakın. |
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 datemplate="id_of_other_template"
özelliğiyle bir şablonu referans alarak alt öğede yanıtı oluşturun. submit-success
vesubmit-error
yanıtları için geçerli bir JSON nesnesi sağlayın. Hem başarı hem de hata yanıtlarınınContent-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:
form
öğenizdecustom-validation-reporting
özelliğini, doğrulama raporlama stratejilerinden birine ayarlayın.- Ö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.
custom-validation-reporting
öğesi görmez. Geçerlilik durumları, resmi W3C HTML doğrulama raporlama dokümanlarında bulunabilir. 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.
Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.
Stack Overflow'a git Bir hata veya eksik bir özellik mi buldunuz?AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.
GitHub'a git