IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Conceptes previs

És interessant conèixer el protocol HTTP per tal de conèixer com es processen els formularis HTML i especialment conèixer el detall de com funciona el mètode HTTP POST.

HTML Forms

El formularis HTML (HTML Forms) es poden processar enviant una petició HTTP de tipus GET o POST. Vegeu POST vs GET èr veure les diferències però la conclusió és que sovint s'utilitza POST

Al enviar un formulari el mime-type sol ser (ja sigui enviat per POST o GET):

application/x-www-form-urlencoded

Però es poden utilitzar els següents enctype:

Resources:


Form validation

Vegeu Form validation

Form objects

Vegeu l'article Form objects

Form patterns

Form patterns

Interessant article:

https://webflow.com/blog/4-inspirational-form-design-patterns

Float Label Pattern

Float Label Pattern: http://bradfrost.com/blog/post/float-label-pattern/

Resources:

Natural Language Forms

Natural Language Forms Exemples:

https://tympanus.net/Tutorials/NaturalLanguageForm/

Step-by-Step or multiStep Forms

Wizard

Vegeu també Wizard:


Minimal Fullscreen

Step by step i FullScreen

Eines per facilitar la creació de formularis

Acacha-forms

Vegeu: https://github.com/acacha/forms

Vue formly

M'agrada la idea, inspirat en Angular Formly:

https://github.com/formly-js/vue-formly
<div id="app">
   <form @submit="handleSubmission">
      <formly-form :form="form" :model="model" :fields="fields"></formly-form>
      <button>Submit</button>
   </form>
</div>
new Vue({
   el: '#app',
   data: {
      model: {
         name: '',
         email: '',
         password: ''
      },
      form: [
         {
            key: 'name',
            type: 'input',
            required: true
         },
         {
            key: 'email',
            type: 'input',
            templateOptions: {
               type: 'email'
            },
            required: true,
            validators: {
               validEmail: checkEmailFunction
            }
         },
         {
            key: 'password',
            type: 'input',
            templateOptions: {
               type: 'password'
            },
            required: true,
            validators: {
               validPassword: checkPasswordFunction
            }
         }
      ]
   }
});

Vegeu també

Enllaços externs