Agregar el componente amp-form


amp-form


La extensión amp-form permite el uso de formularios y campos de entrada en un documento AMP.  amp-form permite envíos de formulario HTTP y XHR (XMLHttpRequest). Una presentación de formulario HTTP carga una nueva página, mientras que una presentación de formulario XHR no requiere una recarga de página.

Preparar

Ingrese el siguiente script justo después de la apertura <head>


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


Personaliza los mensajes utilizando las clases amp-form-submit-success y 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>


Presentación de formulario con recarga de página

Utilice el atributo amp-form-submit-success para especificar un server-endpoint que debe manejar la entrada de formulario. Esto sólo funciona para las GET. La URL debe ser HTTPS. El ejemplo siguiente utiliza type="search" para emular una búsqueda. El botón de búsqueda activará una recarga de la página.

Busque consideraciones de seguridad para comprobar las mejores prácticas al elegir métodos GET o POST.

Puede encontrar el código del punto final del servidor utilizado en esta demo en /backend/amp-form.go.


Ejemplo

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

Presentación de formularios con actualización de página

Utilice el action-xhr para enviar el formulario a través de XMLHttpRequest (XHR). Puede utilizar plantillas amp-mustache para mostrar mensajes de éxito o de error personalizados, utilizando datos enviados por el extremo del servidor como JSON. Por ejemplo, si el servidor envía {"foo": "bar"} , puede utilizar {{foo}} en la plantilla para representar la bar .

El componente amp-form muestra elementos submit-success o submit-error basados ​​en la respuesta y procesa los datos de la plantilla dentro de estos dos elementos. Los submit-success y submit-error deben ser hijos directos de la form.


Ejemplo

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

Hiding input fields after success

Utilice la clase amp-form-submit-success para ocultar campos de entrada después de una presentación correcta. La siguiente regla CSS oculta todos los campos de entrada de formulario después de la presentación de formulario correctamente:


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



Ejemplo

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

Otras ejemplos del uso form

amp-form soporta todos los tipos de formulario HTML5 con la excepción de archivo, contraseña e imagen. Utilice type="date" para los campos de entrada que deben contener una fecha.


Ejemplo

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

Utilice type="month" para los campos de entrada que deben contener un mes.


Ejemplo

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

Utilice type="week" para los campos de entrada que deben contener una semana.


Ejemplo

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

Utilice type="datetime-local" para los campos de entrada que deben contener una fecha y hora.


Ejemplo

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

Utilice type="time" para los campos de entrada que deben contener un tiempo.


Ejemplo

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

Utilice type="checkbox" para permitir al usuario seleccionar opciones CERO o MÁS de un número limitado de opciones.


Ejemplo

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

Utilice type="email" para los campos de entrada que deben contener una dirección de correo electrónico.


Ejemplo

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

Use type="hidden" para definir un campo no visible para un usuario.


Ejemplo

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

Utilice type="number" para los campos de entrada que deben contener un valor numérico.


Ejemplo

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

Utilice type="radio" para permitir que un usuario seleccione SÓLO un número limitado de opciones.


Ejemplo

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

Utilice type="range" para campos de entrada que deben contener un valor dentro de un rango.


Ejemplo

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

Utilice type="tel" para los campos de entrada que deben contener un número de teléfono.


Ejemplo

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

Utilice type="url" para los campos de entrada que deben contener una dirección URL.


Ejemplo

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

Utilice type="reset" para borrar los campos de entrada.


Ejemplo

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

Utilice el elemento select para las listas desplegables.


Ejemplo

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




Share:

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments: