From the course: Building Great Forms with HTML and CSS

How HTML forms work

From the course: Building Great Forms with HTML and CSS

Start my 1-month free trial

How HTML forms work

“

- [Instructor] While other elements of HTML gives style and meaning to your website, an HTML form adds interactivity. It allows you to communicate with your end users and provides a method to make the web dynamic. HTML forms handle important functions like taking orders, surveys, user registration and more. You will hardly find a single website without some sort of form of it. HTML forms are one of the main points of interaction between a user and a website or application. They allow us to connect with our users. An HTML form is made up of one or more widgets. Those widgets can be single or multi-line text fields, select boxes, checkboxes, radio buttons, or buttons. The single line text field widget can even require data entered to be of a specific format or value. Form widgets should be paired with a properly implemented label that describes their purpose. Labels help instruct both sighted and blind users on what to enter into a form input. The main difference between an HTML form and a regular HTML document is that most of the time, the data collected by the form is sent to a web server. In that case, you need to setup a web server to receive and process the data. In this course, we will be focusing on the front end build out of web forms, but I think it is important to outline the steps of how a form functions with the backend. Let's take a look. A web form has two parts, the HTML front end, which is the client-side HTML, and a backend form processor, which is the server-side script. The HTML front end part handles the presentation, that's what you see in your browser, while the backend handles the form submission, like saving the form submission or sending emails. A visitor visits a webpage that contains a form. The web browser displays the HTML form. The visitor fills in the form and submits. The browser sends the submitted data to the web server. A form processor script running on the web server processes that form data. The processing steps can include sending the form submission by email or saving the submission to a database table or a file. Then a response page is sent back to the browser. Client-side code cannot do processing like sending email or saving to a database, so in order for a form to work, both of these parts need to be present in order for it to function properly. Again, in this course, we will focus on the front end scripting, HTML, CSS, and some JavaScript. I will show you how to layout and design usable and great looking forms.

Contents