From 791c356e36d0d0e455210e04ae08b9e194d685dc Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Tue, 1 Feb 2022 19:11:03 +0500 Subject: [PATCH 001/337] Building web forms with Next.js and Vercel (#32525) * First commit * Test Commit * First draft * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update intro. * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Improve docs in part 5 * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Fix Form function in JSX * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update guide contents * Add different cloud computing companies * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Add details about JavaScript validation * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Improve code for validation without JS * Improve regex docs * Add regular expression example * Explain regex example * Add regex image * Add demo videos * Improve small fixes * Fix images * Fix images * Improve scripts * Improve scripts * Add links to example repo * Test cloudinary images * Test cloudinary images * Add resized images * Test videos * Remove images folder * test video * Fix link * New video component * Add images in readme * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Add mdx frontmatter details * Remove videos from guide * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Update docs/guides/building-forms.md Co-authored-by: Rich Haines * Fix typo for Name * Fix code changes * Improve docs * Improve conclusion * Improve code syntax * Add lint tests * Fix yarn language test Co-authored-by: Rich Haines --- docs/guides/building-forms.md | 400 ++++++++++++++++++++++++++++++++++ docs/manifest.json | 9 + 2 files changed, 409 insertions(+) create mode 100644 docs/guides/building-forms.md diff --git a/docs/guides/building-forms.md b/docs/guides/building-forms.md new file mode 100644 index 000000000000..59b8d50caf73 --- /dev/null +++ b/docs/guides/building-forms.md @@ -0,0 +1,400 @@ +--- +title: Building Serverless Web Forms with Next.js +description: This guide is tailored at creating serverless web forms with Next.js and Vercel. You'll first learn about the basic form element and then some advanced concepts like how forms are catered in React and finally validation with Next.js serverless functions. +--- + +# Building a Serverless Web Form with Next.js + +A web form has a **client-server** relationship. They are used to send data handled by a web server for processing and storage. The form itself is the client, and the server is any storage mechanism that can be used to store, retrieve and send data when needed. + +This guide will teach you how to create a serverless web form with Next.js (client) and Vercel (server). + +## Part 1: HTML Form + +HTML forms are built using the `
` tag. It takes a set of attributes and fields to structure the form for features like text fields, checkboxes, dropdown menus, buttons, radio buttons, etc. + +Here's the syntax of a HTML form: + +```html + + + + + + + +
+``` + +The front-end looks like this: + +![html forms](https://assets.vercel.com/image/upload/c_scale,w_675/v1643009088/nextjs/guides/building-forms/html-forms.png) + +The HTML `
` tag acts as a container for different `` elements like `text` field and submit `button`. Let's study each of these elements: + +- `action`: An attribute that specifies where the form data is sent when the form is submitted. It's generally a URL (an absolute URL or a relative URL). +- `method`: Specifies the HTTP method, i.e., `GET` or `POST` used to send data while submitting the form. +- `