HTML From Beginner to Advanced, Part 3: Forms
Let’s learn everything about forms
Introduction
Forms are the first real way for you to finally interact with your users. you can ask them to provide informations. Informations are the key for any website, indeed if you want your user to create an account, login, add elements in the page, provide feedback, email your support team forms are everything!
However, we come to the limits of the HTML language because we must then be able to analyze the information that the user has entered … and this can not be done in HTML. As we will see, the results must be processed in another language, for example PHP. Soon I will be adding the PHP course too.
Creation
You must first write a <form> </ form> tag that is a flag that will say my form will start here and all the informations provided by the user in this form needs to be processed.
Despite the form tag which is a block tag all the rest of the tags that we will discover are inline tags. It means that we have to structure a lot the html inside a form.
The form tag is really important because it will transport 2 important things. How do we want to send the information of our user to the server but also what is the action that we want to trigger when the user presses the submit button.
You must add two attributes to the <form> tag:
- method: This attribute indicates how the data will be sent. There are two ways to send data to the server:
- method = “get”: this is generally a less used method because it is limited to 255 characters. The peculiarity comes from the fact that the information will be sent in the url of the page (http: // …), which is a huge problem in terms of security. But this detail does not really interest us for the moment but soon it will.
- method: “post” (recommended) this is the most used method for forms because it allows to send a lot of information. The data entered in the form is not transferred through the url which is better for us in terms of security.
- action: it’s the address of the page or the program that will process the information.
This process of the information such as storing it or displaying it cannot be done in HTML or CSS. For that we need a backend. When I say a backend it means that you might need a database to store the information but also a backend programming language to process it.
For now let’s focus on the HTML part and see how we can complete the <form> tag with the two attributes we have just seen.
- For method, we’ll write the value post.
- For action, we will use a fictional page in PHP (treatment.php). This page will be called when the visitor clicks on the form’s submit button.
For treatment.php we need to learn PHP together to get around of what is happening when we process the information. Let’s just consider it works.
Our priority, for the moment, is to discover in HTML / CSS how to insert inputs, textareas, buttons and check boxes of different kind in your web page.
Input
You should know that there are two different types of inputs.
Single-line, basically an input, you see them in website when you have to enter your login for example.
Multiline, that one is used to enter larger text, an example that you might see are the object part of a contact us page when you want to write a message. the big white box when you can jump to the line mostly.
Single-line input
We use the tag <input/>. Good thing for us this tag is used for most of the inputs that exists in Web development. This tag in an inline tag is where the structure of the form become important.
Mostly when doing an input the game is to remember all the different values of the attribute type.
To create an input:
An input alone is complicated for your users in terms of use: they don’t know what they should write in it. For that we can use a new tag named <label>.
But this is not enough. You have to link the label to the textbox. Maybe some of you knows that when you click on an input automatically it gives the focus to the input. It’s a nice feature that simplifies the life of users.
First you need to add a new attribute to your input ( and you know that one already): id
The id attribute is only here to do that focus feature with the input, nothing else.
To recap. Attribute name will be for our backend as a marker, attribute id is here to link the label you created to his specific attribute.
- size : enlarge the field
- maxlength : limit the number of characters that can be typed by the user.
- value : pre-populate the field with a default value.
- placeholder : We can give an indication on the contents of the field. This indication will disappear as soon as the visitor clicks inside the field.
In the following example, the text box contains an indication to understand what to enter; the field is 30 characters long but you can only write 10 characters maximum inside.
Nowadays we use a lot the placeholder instead of the label. Mostly because of mobile views, we have less space on phones so we try to give informations directly inside the input.
You can also change the type of the input if you want the behavior of a password, you know… The black dots that hide the password from malicious eyes.
Multi-line input
To create a multiline input we will have to change the tag that we are using.
As with any other element of the form, you must give it a name with attribute name and use an attribute label which explains what it is.
There are two options to change the size of <textarea>.
- In CSS: properties width and height to <textarea>.
- With attributes: add the attributes rows and cols to the <textarea> tag.
- rows : indicates the number of lines of text that can be displayed simultaneously,
- cols : indicates the number of columns.
Why do we open the <textarea> tag to close it just after? first textarea is a pair tag compared to input that is an orphan tag but also textarea has some specificities:
- You can pre-fill the <textarea> with a default value. not really a placeholder really the value that could be sent if the user doesn’t provide any information. But instead of using the value attribute that we could use for the input we will write everything within the tags.
Options elements
HTML offers you a wealth of options items to use in your form. These are elements that ask the visitor to choose from a list of possibilities. We will review:
- the checkboxes;
- radio buttons;
- drop-down lists we call then also select list because of their tag name.
Checkboxes : We will reuse the <input /> tag, this time specifying the type checkbox:
Don’t forget to give a different name to each checkbox, this will allow you to identify later which ones have been checked by the visitor.
Finally, be aware that you can make sure that a checkbox is checked by default with the attribute checked:
Radio Buttons : allows you to make a choice (and only one) from a list of possibilities. They kinda look like checkboxes but there is a little extra difficulty: they must be organized into groups. Options in the same group have the same name, but each option must have a different value.
The tag to use is always an <input />, this time with the radio value for the attribute.
Why the same name for each option? With that the browser knows which “group” the button is part of.
Try to remove the attributes name, you will see that it becomes possible to select all the options items. But that’s not what we want, that’s why we “bind” them together by giving them an identical name.
If you have two different radio button zones, you must give each group a unique name to make sure they are separated.
The checked attribute is, again, available to select a default value.
Drop-down lists are another way to choose from several possibilities. The operation is a little different. We will use the <select> </ select> tag which indicates the beginning and the end of the drop-down list. The name attribute is added to the tag to give the list a name.
Inside the <select> </ select>, we will place several <option> </ option> tags (one by choice). We add to each of them an attribute value to be able to identify what the visitor has chosen.
If you want an option to be selected by default, this time use the attribute selected.
You can also group your options with the <optgroup> </ optgroup> tag. In our example, why not to separate countries according to their continent?
Groups can not be selected. So, here, we can’t choose “Europe”, only country names are available for selection.
Finalize and send
Group fields : If your form is large and has many fields, it can be useful to group them within several <fieldset> tags. Each <fieldset> can contain a legend with the <legend> tag.
Automatically select a field: You can automatically place the cursor in one of the fields of your form with the autofocus attribute. As soon as the visitor loads the page, the cursor will be placed in this field.
Make a field mandatory: You can make a field mandatory by giving it the attribute required.The browser will then indicate to the visitor, if the field is empty at the time of sending it, it must imperatively be filled.
Note : Older browsers, which do not recognize this attribute, will send the form content without verification. For these browsers, it will be necessary to complete the tests with, for example, JavaScript scripts.
Note : We have pseudo-classes in CSS to change the style of the required elements (: required) and invalid (: invalid). Remember also that you have the pseudo format :focus to change the appearance of a field when the cursor is inside.
The send button: Again, the <input /> tag exists in four versions:
- type = “submit”: the main form submit button. This is the one you will use most often. The visitor will be taken to the page indicated in the action attribute of the form.
- type = “reset”: resets the form.
- type = “image”: equivalent of the button submit, presented this time as an image. Add the src attribute to indicate the URL of the image.
- type = “button”: generic button, which will have (by default) no effect. In general, this button is managed in JavaScript to perform actions on the page.
You can change the text displayed inside the buttons with the attribute value.
When you click on the “Send” button, the form will take you to the page indicated in the action attribute.
If you find my content helpful please consider making a donation at:
https://ko-fi.com/devondeveloper
This content it’s free but believe me, if you take a coding bootcamp or web development course there is no real difference with the information you just read. By making a donation You are helping to keep creating Great Quality content for You, so you can become the Best web developer you can be.
