All Around HTML Forms: A Learning Journey to Web Development
Hello everyone! Welcome back to the journey again! We’ve learned about HTML Tables and HTML List in last two posts. Looks like we are moving pretty fast! Today we are going to learn about another extremely important aspect of HTML. And that is Building HTML Forms. Let’s begin!
N.B: This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join us there.
Building HTML Forms
A web page is usually a one-way communication system. Most often, people would use a web page to simply navigate to another web page. But sometimes, we also need users feedback or information to provide services. Specially when the Internet has reached a point where we get most of our real world task done on the web, providing feedback and information is a must. And form is the way we input our information on the web page.
The form Element
HTML form is created using the <form> element. The <form> element indicates an interactive part of the web page. So, everything else regarding taking input from users will generally go inside the <form> element.
The form element only provides semantic meaning for the page. It doesn’t provide any way for the user to input data. The <input> element of HTML is what we use to accomplish this task.
<input> is a self-closing element whose behavior depends on its attribute: type. Beside type, it has two other important attribute: name and value. Let’s discuss them briefly before we proceed.
The way we ask information from the user can be of different type. It can be a text input, or a number input, or e-mail, or password etc. We specify our preferred method via the type attribute. So, the type attribute offers quite a few values to choose from. We’ll explore them shortly!
Name and Value
The name attribute is used to give a unique identifier to every input elements on the page which are later used to send information to the server. I mean, on the server side, we’ll identify data by using the value that we set on the name attribute. It’s like giving every input element a name so that we can later find them out by their name.
Just like name, the value attribute is used to set a value that goes to the server under the name of that input element. This example will clear out your confusion:
<input type="text" name="FirstName" value="Kitty">When sent to the server, this input element will only pass the information “FirstName=Kitty”. In a textbox, the value is what user types in the box. But in the case of other input types, we have to set it manually.
Different Types of Input
Text Input
The most common way we collect information from user is text. We see text input everywhere on the web. From login form, to sign up form, to search boxes, We use text input a lot! So, obviously, the most used type of input is the ‘text’ input. Hence, The first value of the type attribute we’re going check out, is ‘text’.
Let’s write some code!
<form><p>Your Name: </p><input type="text"><p>Your Cat's Name: </p><input type="text"><p>Your cat's BFF's Name: </p><input type="text"></form>
This would create a very simple form like this:
User can input text in those fields about what they are asked for. But let’s say, We are asking something that can only have one answer out of a selected few. Like, the gender of their cat’s BFF. It’s either Male or Female. Now, It’ll be a terrible idea if you asked the user to write down the genders name. I mean, you never had to do it on the web, right? If you did, you visited a terrible website! In this type of scenarios, It’s far more convenient to give users options to pick from. And we do that via radio button.
Radio Buttons
To produce radio buttons, we use the value ‘radio’ to the type attribute. Adding two simple radio button with our previous code would give us this output:
The Code:
<p>Gender of your Cat's BFF: </p>
<input type="radio" name="bffGender" value="male"> Male
<input type="radio" name="bffGender" value="female">Female
<input type="radio" name="bffGender" value="other">Prefer not to SayThe Output:
You may have noticed that I’ve used the name attribute along with those input elements. We want the user to be able to choose only one option. And to do that, we must create some kind connection between the available options in order to make the browser understands that they are part of one single questions. That is why we give the same value of name attribute on all the related radio button inputs.
Check boxes
In situations when we want the user to be able to pick multiple answers to a single question, we use the checkbox type of input. Let’s say we want to know what our user’s cats favorite food and we want them to pick from option we provide. Now, cats can like multiple foods, right? They are crazy about food! So, let’s give our user a couple of options!
Check out the code below:
<p>What's your cat's favorite food?</p>
<input type="checkbox" name="favoriteFood" value="milk">Milk
<input type="checkbox" name="favoriteFood" value="milk">Biscuits
<input type="checkbox" name="favoriteFood" value="milk">Banana
<input type="checkbox" name="favoriteFood" value="milk">CucumberAdding this to our previous code produce output like this:
Submit Button
Our form looks pretty much complete. I mean, we’ve collected a handful of data. But how would we get that data if the user can’t submit it to us? We can create a simple submit button using the value submit with the type attribute. See the code below:
<form><p>Your Name: </p><input type="text"><p>Your Cat's Name: </p><input type="text"><p>What's your cat's favorite food?</p><input type="checkbox" name="favoriteFood" value="milk">Milk<input type="checkbox" name="favoriteFood" value="milk">Biscuits<input type="checkbox" name="favoriteFood" value="milk">Banana<input type="checkbox" name="favoriteFood" value="milk">Cucumber<p>Your cat's BFF's Name: </p><input type="text"><p>Gender of your Cat's BFF: </p><input type="radio" name="bffGender" value="male"> Male<input type="radio" name="bffGender" value="female">Female<input type="radio" name="bffGender" value="other">Prefer not to Say<input type="submit"></form>
And the output is:
Now we have a tiny little submit button that our user can use to submit the data to our site.
Drop-down Lists
Another common method to input information on the web is drop-down boxes. It provides you a list of options from which you can choose one. It’s a lot like having a lot of radio button jammed inside a text input. The advantage is, it takes a lot less spaces that those radio buttons would take. So, let’s see how to create them.
The <select> element is used to build a drop-down list. You have to nest all the option you want to give your user wrapping around <option> tag inside the <select> element. It’d look like this:
<p>How often do your cat shares his/her selfie on Facebook?</p><select name="selfie"><option value="hourly">Every Hour</option><option value="daily">Every Day</option><option value="weekly">Every Week</option><option value="monthly">Every Month</option></select>
We’ve added a drop-down list at the end of our previous form, and the output is like this:
Now, You could also give your user the ability to choose multiple options. In that case, just add the attribute multiple on the <option> element. Users will be able to choose more than one option by pressing down the ctrl (or command on Mac) button and clicking on option at the same time. The code looks like this:
<select name="selfie" multiple><option value="hourly">Every Hour</option><option value="daily">Every Day</option><option value="weekly">Every Week</option><option value="monthly">Every Month</option></select>
The multiple takes integer value. So, you don’t have to assign anything to it. The output looks a little different, but I’ll save that for you to try out yourself.
Buttons
Buttons are not just submit button, right? There is a lot of buttons we use everyday. Sign-up button, Login Button, Open Button, Close Button, Like Button, Delete Button…the list goes on and on. HTML have a dedicated <button> element for creating buttons. You may create buttons for any purpose using the anchor tag or the <input> element, but that’s semantically wrong. The submit button is meant to be used only within forms. But even in forms, we can create submit button using the <button> element.
Let’s replace our old submit button with the <button> element!
The code goes like this:
<button type="submit">Submit</button>It produces a submit button that looks almost exactly the same.
The Label
The way we are describing our input elements for our user with <p> element is wrong. Though it looks okay on the eye, But actually there’s no correlation between the description and the input box, which it should have. The label is a nifty HTML element that provides a way to bind description with their corresponding input box. It also gives additional functionality like easy focusing on the input box, which lets you focus on an input box by simply clicking on its description. It comes in real handy in cases of radio buttons and check-boxes, as those are usually tiny and can be hard to click on.
So, lets rewrite all our code replacing the <p> element with <label>! But wait, if we simply replace the <p> with <label>, it still wouldn’t create any relationship with its corresponding input boxes, right? That’s where the exclusive attribute ‘for’ of label comes into play.
The rule to bind an input box with its description is that the value of the for attribute on <label> element has to match the value of id attribute on <input> element. Let’s do it now!
<form><label for="name">Your Name: </label><input type="text" id="name" name="name"><br><label for="catsName">Your Cat's Name: </label><input type="text" id="catsName" name="catsName"><br><p>What's your cat's favorite food?</p><label><input type="checkbox" name="favoriteFood" value="milk">Milk</label><label><input type="checkbox" name="favoriteFood" value="milk">Biscuits</label><label><input type="checkbox" name="favoriteFood" value="milk">Banana</label><label><input type="checkbox" name="favoriteFood" value="milk">Cucumber</label><br><label for="catsBffName">Your cat's BFF's Name: </label><input type="text" id="catsBffName" name="catsBffName"><p>Gender of your Cat's BFF: </p><label><input type="radio" name="bffGender" value="male"> Male</label><label><input type="radio" name="bffGender" value="female">Female</label><label><input type="radio" name="bffGender" value="other">Prefer not to Say</label><p>How often do your cat shares his/her selfie on Facebook?</p><select name="selfie"><option value="hourly">Every Hour</option><option value="daily">Every Day</option><option value="weekly">Every Week</option><option value="monthly">Every Month</option></select><br><button type="submit">Submit</button></form>
And this is how our form looks like now:
The label doesn’t have any visual effect on form. But now we can focus on input boxes by clicking on it’s name. And even Though I have added some line breaks to make it look a little nicer, but it’s still not pretty. We will worry about that later.
Placeholder
Yeah, we’re still not done yet. I’m actually starting to feel like I should’ve split this post into two. But anyway, Placeholder is text that sits inside input box and gives users hints or example on information a user should enter. It disappears as soon as the user clicks on the input box. You’ve seen this before, right?
To produce this, you simply need to add the ‘placeholder’ attribute on the <input> element and pass your preferred text as a value. The code looks like this:
<input type="text" id="catsName" name="catsName" placeholder="Ex: Puuchee">The above input box will have “Ex: Puuchee” as the placeholder text inside the text box.
Fieldset and Legend
This two element comes in handy to organize long forms. The <fieldset> element is used to group together related input elements in a form and the <legend> elements give that group a caption. If we want to apply this two elements in our form, we could divide it up into three section. One for ‘Your info’, another for ‘Your cat’s info’ and another for ‘Your cats BFF’s info’. So, after putting all the input fields in its correct group, we have to nest them under fieldset and give them caption with legend, it would look like this:
Check the code in the below code pen.
Other stuff that I haven’t covered
Form is a broad topic to cover in a single post. I’ve tried to cover all the things that you’ll usually need to build a complete form. But there’s more. Though you might not need them very often, it’s still worth it to know that they are there.
Various input types
The input types we’ve discussed is not all type there is. With HTML5, a handful of new type was introduced. Here’s is the list:
- password
- search
- url
- date
- month
- week
- time
- tel
- number
- range
- color
I typed them exactly as you’d have to pass them as the value of the type attribute on <input> element. So, try them yourself. Most of them are self-explanatory. If you have problem understanding any of these, feel free to ask me here, or a simple web search will provide you thousand of explanations. Bare in mind that they are relatively new, and not all browser supports all of these types.
Action & Method
There is two attribute which must be used on <form> element to send the data to the server. If they are absent, the data will not be submitted or, will stay on the same page. They are action and method.
The action attribute determines what happens when you click the submit button. Usually, it contains an address of a page on the server that processes the data.
The method attribute determines how the data will be sent over to the server. There is two available method. They are GET & POST. If you use the get method, the data will be sent to the server through the url. Which means that the information user enters on your page, will be visible in the url. That is why if your form contains any sensitive data (like password), you mustn’t use GET. POST is a more secure method that works in a different way. The data send through POST method is encrypted, so it’s not visible anywhere.
These are more back-endy stuff, so we’re not getting into details. Just remember that GET is for normal data, and POST is for secure data. Or, simply always use POST. We’ll learn more about this in future post.
Textarea Input
The <textarea> element is there when you want big an long input like a paragraph or essay from your user. A text input normally lets a user enter only 30 character by default. Sometime you may need bigger input than that. Using the <textarea> field, user can submit much much bigger input. The text field can also be resized by dragging with mouse on the edge. See the last pen for code demonstration.
Required Attribute
In a form, some input is more important than other. Sometimes, some input can be mandatory to process the user’s request. In that case, we call tell the browser and the user which input field are mandatory by using the required attribute. If the user tries to submit the form without filling in a mandatory field, browser will throw them an error. You can simply add the word required at the end of any input element to accomplish this. Check the codepen for demo.
Putting them all together
Whoa, that’s a lot of things, right? Let’s take all of them and create one single form that have application of all of these elements and attributes! And here we go!
Check the pen carefully and try to figure out whats going on in the code. Be sure to check out the comments too!
Conclusion
I am not sure If I have laid out the content in this post in the best way it could be. But I’m definitely not satisfied. I am a bit confused too! Please let me know how can I improve this series. What can I do to make it easier for you to understand? Please guys, I am looking for suggestions.
Anyway, that was it for today. Be sure to leave your response and share this on your social networks. Tinker with the code and keep mistaking until I see you again.
