Introduction to Forms

Forms are one of the core parts of HTML functionality. They let users submit key information and are used in every industry and on most websites. They’re a big topic, so in this module we’ll go into a lot of detail. You’ll learn about forms in general, text and push buttons and multi-line inputs. Then we’ll move onto checkbox and radio buttons, as well as list boxes and drop down lists. One of the more detailed lessons in this module comes up next, with a deep dive into some of the input types you can use in your forms. Finally, we’ll end the module off with form validation and a little bit about form validation, server scripting and a few security issues you need to be aware of.


One of the most powerful parts about HTML is the ability to create forms. We use forms for all sorts of things like sign up pages, login pages, surveys, online shopping and so much more because they are so powerful and aren't just about presenting information but actually capturing it too. Forms are a little more complicated than some other elements in HTML. Not complicated as in difficult to understand, but there are quite a few elements and actions you'll need to learn about.

So in this video we'll focus on just the form tag and it's attributes. A form is opened and closed with the form tag. The form tag has two major attributes, action and method. The action attribute tells the browser what to do with the information once a user submits it. The method attribute tells the browser how to do this. The GET method tells the browser to add the form information to the end of the action URL in the name value pairs separated by an ampersand after a question mark.

GET is great for simple forms where security really isn't an issue as the form details are actually displayed in the URL. Post on the other hand sends information in the form to a web server to be processed as part of the request body and you use it if security is a concern with things like passwords for instance. It is important to understand though that neither the GET nor the post method are actually secure. The only way to securely send data is to ensure that the website uses HTTPS.

Okay, so let's take a quick look at what this looks like in practice. First, I'll open up my form with the form tag. I need to follow this with the method, so I need to think about the kind of form I'm creating. The method will then either equal GET or post. This really depends on what method, the URL receiving the data is programmed to accept. Next I need to add an action. Tell the browser where to send the information. When the user submits it, I'll type action equals forward slash and then add in the URL, which could be relative or absolute. For now, let's say it's relative.

I'll make the action equal to this is where the data is sent to dot HTML. Now I can close the opening tag. After this, I normally add in all the other elements that would make up the form, but we'll get to those in other videos. So for now, I'll close the form like this and in the video. So yes, forms are a key foundation of web design because we use them to capture data that our users submit. In this video, we've just focused on how to create a form using the form tag and on the form tags method and action attributes.



About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics