Gampamg caranya menambahkan amp-form di AMP Html

amp-form shannenpio

Ekstensi amp-form memungkinkan penggunaan formulir dan bidang entri dalam dokumen AMP. & amp; formulir memungkinkan pengiriman formulir HTTP dan XHR (XMLHttpRequest). Pengiriman formulir HTTP memuat halaman baru, sedangkan presentasi formulir XHR tidak memerlukan memuat ulang halaman.

Cara Penambahannya

Masukan script tepat setelah pembukaan <head>


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

Sesuaikan pesan menggunakan kelas amp-form-submit-success dan amp-form-submit-error .


<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: green;
}
form.amp-form-submit-error [submit-error] {
  color: red;
}
form.amp-form-submit-success.hide-inputs > input {
  display: none;
}
</style>

Pengiriman formulir dengan memuat ulang halaman

Gunakan atribut amp-form-submit-success untuk menentukan titik akhir server yang harus menangani entri formulir. Ini hanya berfungsi untuk GET. URL harus HTTPS. Contoh berikut menggunakan type = "search" untuk meniru pencarian. Tombol pencarian akan mengaktifkan ulang halaman..

Cari consideraciones de seguridad untuk memeriksa praktik terbaik saat memilih metode GET atau POST.

Anda dapat menemukan kode titik akhir dari server yang digunakan dalam demo ini di /backend/amp-form.go.


Contohnya



  
    
  
  


<form method="GET"
  class="p2"
  action="/components/amp-form/submit-form"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input type="search"
      placeholder="Search..."
      name="googlesearch">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
</form>

Presentasi formulir dengan pembaruan halaman

Gunakan action-xhr untuk mengirim formulir melalui XMLHttpRequest (XHR). Anda bisa menggunakan templat amp-mustache untuk menampilkan pesan kesalahan atau keberhasilan yang disesuaikan, menggunakan data yang dikirim oleh server sebagai JSON. Dengan Contohnya, jika server mengirim {"foo": "bar"} , bisa digunakan {{foo}} di templat untuk mewakili bilah.

Komponen amp-form menampilkan elemen kirim-sukses atau kirim-kesalahan berdasarkan respons dan proses data templat dalam dua elemen ini. Kirim-sukses dan kirim-kesalahan harus merupakan anak langsung dari formulir.


Contohnya



  
    
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-input-text-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text"
      class="block border-none p0 m0"
      name="name"
      placeholder="Name..."
      required>
    <input type="email"
      class="block border-none p0 m0"
      name="email"
      placeholder="Email..."
      required>
  </div>
  <input type="submit"
    value="Subscribe"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks {{name}} for trying the
      <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how
      <code>amp-form</code> handles errors.
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! Thanks {{name}} for trying the
      <code>amp-form</code> demo with an error response.
    </template>
  </div>
</form>

Menyembunyikan kolom input setelah sukses

Gunakan clas amp-form-submit-success untuk menyembunyikan bidang input setelah presentasi berhasil. Aturan CSS berikut menyembunyikan semua bidang input formulir setelah presentasi formulir dengan benar:


form.amp-form-submit-success > input {
  display: none
}


Contohnya



  
    
  
  
  
    
  
  
    
  


<form class="p3 hide-inputs"
  method="post"
  action-xhr="/components/amp-form/submit-form-input-text-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input type="text"
      name="name"
      placeholder="Name..."
      required>
  </div>
  <input type="submit"
    value="Subscribe"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks {{name}} for trying the
      <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how
      <code>amp-form</code> handles errors.
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! Thanks {{name}} for trying the
      <code>amp-form</code> demo with an error response.
    </template>
  </div>
</form>

Contohnya penggunaan lainnya form

amp-form mendukung semua jenis formulir HTML5 dengan pengecualian file, kata sandi, dan gambar. Gunakan type = "date" untuk kolom input yang harus mengandung tanggal.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input name="select-date"
      type="date"
      value="2020-12-30">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="month" untuk kolom input yang harus mengandung satu bulan.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input name="select-month"
      type="month"
      value="2020-12">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>

Gunakan type="week" untuk bidang input yang harus mengandung seminggu.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3"&gt
    <input type="week"
      name="week_year">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="datetime-local" untuk bidang entri yang harus mengandung tanggal dan waktu.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input name="select-datetime"
      type="datetime-local"
      value="2020-12-30T12:34:56">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="time" untuk bidang input yang harus mengandung waktu.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input type="time"
      name="time_now">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache"><
      Error!<
    </template>
  </div>
</form>

Gunakan type="checkbox" untuk memungkinkan pengguna memilih opsi NOL atau LEBIH dari sejumlah opsi terbatas.


Contohnya



  
    
    I like cats
  
  
    
     I like dogs 
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input ampstart-input-chk inline-block relative mb3 mr1">
    <input type="checkbox"
      id="animal1"
      name="animal1"
      class="relative"
      value="Cats">
    <label for="animal1">I like cats</label>
  </div>
  <div class="ampstart-input ampstart-input-chk inline-block relative mb3 mr1">
    <input type="checkbox"
      id="animal2"
      name="animal2"
      class="relative"
      value="Dogs">
    <label for="animal2"> I like dogs </label>
  </div>
  <button type="submit"
    value="OK
    class="ampstart-btn caps">OK</button>
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="email" untuk bidang entri yang harus berisi alamat email.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input type="email"
      name="email"
      placeholder="Email...">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="hidden" untuk menentukan bidang yang tidak terlihat oleh pengguna.


Contohnya



  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <input type="hidden"
    name="city"
    value="London">
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="number" untuk bidang input yang harus berisi nilai numerik.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input type="number"
      name="quantity"
      min="1"
      max="5">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="radio" untuk memungkinkan pengguna memilih HANYA sejumlah opsi terbatas.


Contohnya



  
    
    Cat
  
  
    
    Dog
  
  
    
    Other
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input ampstart-input-radio inline-block relative mb3">
    <input type="radio"
      id="cat"
      class="relative"
      name="favourite animal"
      value="cat"
      checked>
    <label for="cat">Cat</label>
  </div>
  <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb3 ">
    <input type="radio"
      id="dog"
      class="relative"
      name="favourite animal"
      value="dog">
    <label for="dog">Dog</label>
  </div>
  <div class="ampstart-input ampstart-input-radio inline-block relative m0 p0 mb3 ">
    <input type="radio"
      id="other"
      class="relative"
      name="favourite animal"
      value="other">
    <label for="other">Other</label>
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="range" untuk bidang input yang harus mengandung nilai dalam rentang.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class=" ampstart-input inline-block relative mb3">
    <input type="range"
      name="points"
      min="0"
      max="10">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="tel" untuk bidang entri yang harus berisi nomor telepon.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input type="tel"
      name="my_tel"
      placeholder="Telephone...">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="url" untuk bidang input yang harus mengandung URL.


Contohnya



  
    
  
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input type="url"
      placeholder="URL..."
      name="website">
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan type="reset" untuk menghapus kolom entri.


Contohnya



  
    
  
  
    
    
  
  
    
  
  
    
  


<form method="post"
  class="p2"
  action-xhr="/components/amp-form/submit-form-xhr"
  target="_top">
  <div class="ampstart-input inline-block relative mb3">
    <input type="text"
      placeholder="Some text...">
  </div>
  <div>
    <input type="submit"
      value="OK"
      class="ampstart-btn caps">
    <input type="reset"
      value="Reset"
      class="ampstart-btn caps">
  </div>
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Gunakan elemen pilih untuk daftar drop-down.


Contohnya



  
    
    Select a car
  
  
  
    
  
  
    
  


<form method="post"
  action-xhr="https://ampbyexample.com/components/amp-form/submit-form-xhr"
  target="_top"
  class="p2">
  <div class="ampstart-input inline-block relative mb3">
    <select name="cars"
      id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <label for="cars"
      class="absolute top-0 right-0 bottom-0 left-0">Select a car</label>
  </div>
  <input type="submit"
    value="OK"
    class="ampstart-btn caps">
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks for trying the
      <code>amp-form</code> demo!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error!
    </template>
  </div>
</form>

Source : https://amp.dev/id/documentation/components/amp-form

Tags: Amp Html Tutorial Blog

4/30/2017

Gampamg caranya menambahkan amp-form di AMP Html

amp-form shannenpio

Related post

Disqus comments:

Facebook comments:

Drafting

Youtube

Cookies