HTML: Working with Forms

Stephanie De Smedt
CodeX
Published in
6 min readMay 9, 2022

--

Photo by Nick Morrison on Unsplash

The majority of websites require some form of user input. Examples we encounter everyday include search bars, login requests and filling in contact details.

All of these forms begin life in HTML, they are then styled with CSS and finally the form data entered is handled with a back-end programming language — for example PHP or Javascript.

In this post we will take a look at how to use HTML to setup a form on your webpage, as well as considering some of the attributes HTML has to help with data validation and processing.

Example Form

Below is an example form that uses all the tips given in this post. It looks basic as there is no CSS or Javascript file to accompany it, however, I felt like it was beneficial to show exactly what is possible using just HTML.

Form Setup

To begin, setup a form element on the page. This is done using the <form> tags within HTML.

This form tag doesn't have any required attributes however there are some that should be used to help access your form…

--

--

Stephanie De Smedt
CodeX

Project Manager learning Web and Mobile Development. A lifelong learner with a travel and coffee problem.