Text and Push Buttons, and Multi-Line Text Inputs
Text and Push Buttons, and Multi-Line Text Inputs

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.


Think about the forms you've filled in. Chances are, the most common kinds involved entering some text, maybe a username and password and then submitting it. So, how do you make a form like this yourself? The form element has quite a few different elements, unique to it. We'll go into these in some detail later. But, for this form, we'll need to use one in particular, which is actually one of the most commonly used tags.

The input tag. The input tag has a few attributes and you'll need to use different ones for different inputs, in the form. These include type, size, name, and value attributes. OK, that's enough theory for now. Let's jump straight into an example. First up, I need to open up a form. Next, I want to add in a username field. I'll start with some standard text that I want to display to the user, something like, "Please enter your username". Text like this is usually put into a label tag, with a form attribute that is usually set to the same as name and I'll give my input.

Next, I'll add a line break, because I want the username entry field to display below the text. So, I'll use the line break tag. Now it's time to use the input element I mentioned earlier. So, first I'll open the input tag then add the type. Because this is a username, I want the user to be able to see what they're writing, of course. So, I'll use text type. The last attribute I need here is the name attribute. This one's really important as this is what the data is called when it gets sent to the database.

So, without a name, the request wouldn't know what to call this data and it would be sent as part of a form data instead. I'll set the name as username for now, and then close the input tag. Next, I'll insert a line break and add a similar label tag, but now for a password. Something like, "Enter your password". The input tag for this field will look a lot like the last one, but this time my type attribute will be different. If I had it as text, it would be visible to the user, but for security reasons, best practice is to use the password type, which keeps text the user is entering hidden.

So, let's enter all that information quickly, and close the tag. OK, so, we've got all the fields that we need for a login page now. All we need to do is give the user a submit button, which is a kind of push button in HTML. This is similar to our text entry but with a few differences. First, I'll open the input tag then give it a submit type. This type tells the browser that the information that has been entered by a user needs to be set to a form handler which is just a page within the server that deals with this kind of data.

Anyway, let's keep going and we're almost done anyway. Last up, I need to give this button a value, which is just how I will create the text, in the button, that the user can see, which of course will be submit, for this one. And that's the push button done. So, I can close the tag and with all I've done, I can close my form. OK, so I know this video's already been a long one, but I wanted to quickly tell you about multi-line text inputs. Because, it's kind of similar to the standard text entry fields used for the username and password.

You'll be using multi-line text input fields when you want users to have the freedom to type, whatever they want. This is especially useful for feedback, for instance. The main difference with this, is that it has an opening and closing tag and can have default sizes for rows and columns attributes given as numbers. Most browsers these days will allow users to resize these by clicking and dragging the bottom right-hand corner out.


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