feat(docs): QForm docs page (quasarframework#3680)

* initial json api for QSelect

* Revert "initial json api for QSelect"

This reverts commit 687013f.

* feat(docs): QChip

* feat(docs): QImg

* fix(docs): Fixing markdown tables to fit content

Default width of 100% makes tables with 2 columns look horrible. A better compomise if to use "width: fit-content" so the table is only as wide as the data. "max-width: 100%" is used to keep current width should data make the rows greater than 100%. This is especially needed for the "Upgrade guide".

* feat(docs): Fixing hydration issues

* feat(docs): QForm docs page

Author: hawkeye64

docs/src/assets/menu.js

@@ -654,6 +654,10 @@ const components = [
         name: 'Select',
         path: 'select'
       },
+      {
+        name: 'Form',
+        path: 'form'
+      },
       {
         name: 'Radio',
         path: 'radio'

docs/src/examples/QForm/Basic.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="q-pa-md">
+
+    <q-form
+      @submit="onSubmit"
+      @reset="onReset"
+      class="q-gutter-md"
+      >
+      <q-input
+        filled
+        v-model="name"
+        label="Your name *"
+        hint="Name and surname"
+        lazy-rules
+        :rules="[ val => val && val.length > 0 || 'Please type something']"
+      />
+
+      <q-input
+        filled
+        type="number"
+        v-model="age"
+        label="Your age *"
+        lazy-rules
+        :rules="[
+          val => val !== null && val !== '' || 'Please type your age',
+          val => val > 0 && val < 100 || 'Please type a real age'
+        ]"
+      />
+
+      <q-toggle v-model="accept" label="I accept the license and terms" />
+
+      <div>
+        <q-btn label="Submit" type="submit" color="primary"/>
+        <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+      </div>
+
+    </q-form>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      name: null,
+      age: null,
+
+      accept: false
+    }
+  },
+
+  methods: {
+    onSubmit () {
+      if (this.accept !== true) {
+        this.$q.notify({
+          color: 'red-5',
+          textColor: 'white',
+          icon: 'fas fa-exclamation-triangle',
+          message: 'You need to accept the license and terms first'
+        })
+      }
+      else {
+        this.$q.notify({
+          color: 'green-4',
+          textColor: 'white',
+          icon: 'fas fa-check-circle',
+          message: 'Submitted'
+        })
+      }
+    },
+
+    onReset () {
+      this.name = null
+      this.age = null
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/form.md

@@ -0,0 +1,39 @@
+---
+title: Form
+related:
+  - /vue-components/input
+  - /vue-components/select
+---
+
+The QForm component allows you to easily validate child form components that have rules associated with them. To have this done automatically, create a button with type **submit**. Do the same if you wish to tie into **reset**.
+
+```html
+  <div>
+    <q-btn label="Submit" type="submit" color="primary"/>
+    <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+  </div>
+```
+
+Alternatvely, you can give the QForm a ref name and call the `validate` and `resetValidation` functions directly.
+
+```
+    <q-form ref="myForm" class="q-gutter-md">
+
+    // and then in code:
+
+    if (this.$refs.myForm.validate()) {
+      // do something
+    }
+```
+
+## Installation
+<doc-installation components="QForm" />
+
+## Usage
+
+<doc-example title="Basic" file="QForm/Basic" />
+
+## QForm API
+<doc-api file="QForm" />
+
+