Lessons menu
CSS - intermediate - Lesson nr. 12
HTML forms
What this lesson is about?
In this lesson we will create HTML forms and learn about some form elements. The list of the form elements below will be not complete, but it will help you to understand how it works and learn more individually. Without coding, the forms are not really working and we only create a surface for now, we will add some JavaScript and the attributes needed when using scripts later.

New HTML tags:
<form> </form> - this tag is used to wrap together the elements belonging to one HTML form. The data collected in one form can be sent to evaluation at once.
<input> - this tag is used for more form elements:
  • type="text" – result is a textbox, is used to get a shorter text.
  • type="password" – result is a textbox, which does not show the text typed in it, perfect for passwords.
  • type="radio" – result is a radio button, used in group is perfect to select one of more options. 
  • type="checkbox" – result is a checkbox, used in a group can help to select more than one option.
  • type="number" – this element encloses his value, in an interval.
  • type="submit" – result is a button, this is used to send the content of the form.
  • type="reset" – result is a button, this is used to reset the initial state of the form.

There are separate input types for emails, choosing date and color etc.
<label></label> - this tag defines a label for an <input> element. For example, if we use it at radio/checkboxes, when we want to check an option, we don’t need to click on the radio/checkbox itself, we can click on its label and it will be checked.
<fieldset> </fieldset> - this tag is used to visibly group form elements together (with a box).
<legend> </legend> - this tag is used to add a text, label to the group created for the <fieldset>

<select> </select> - this tag is used to wrap together the options from a dropdown list.
<option> </option> - this tag marks an option to add to a dropdown list.

New attributes:

placeholder – this attribute is used to add a short text description to a textbox. This text disappears, when we start typing in the textbox.
value – this attribute is used to add a value from code to an element. For example, the value of a textbox is the text written in it, but we can add one value as default with the value property. So if we send the content of the form there is a value sent even if we hit the submit button.
required – this attribute can be used to force the user to fill out a form element.
pattern – we can define with this property the desired form of the data required to the form element.

Ex. [a-z]{1,10} means a maximum 10 letter word using small caps letters.

title – with this property we can add a comment to the form element. We can use this property to explain the pattern the data should have.
maxlength – we can add an upper limit to the character number to be typed in a textbox.
name – every form element can have a name, these are mostly important to be referred from the back-end code (server side). Except the case of the radio button, where from the same named buttons, only one can be selected.
checked -  this property is used to mark the radio button or checkbox, which should be checked at the start.


Guidance for label:

The label refers to the input by id.
<input id="check1" type="checkbox"><label for="check1">Click here</label>

If you try to code, you will observe that you can check the checkbox by clicking on the Click here text, not necessarily only by clicking on the checkbox itself.


Guidance – data validation:

Forms are used to collect data from the user: when completed, a form’s content should be sent to the webserver, which host our website. There all the responses can be stored together in a database. We can react to the data introduced in the form locally in the browser, mainly doing data validation. It is important to send correct data to the server.

Example for validation:

  • we can look if the email contains @ and . characters.
  • when changing passwords, the user should introduce the password twice and we can compare them locally, there is no need to send to the server to then report an error.


Layers of validation:
  • For ensuring the correctness of the data, we have to choose the best input element for the data – leaving no room for errors. Ex. There is input element for dates, which ensures that the form of the date is correct – we do not need to check later.
  • The next level is looking for errors using JavaScript. With JavaScript, we can handle errors in the browser and send error messages to the user before sending the data to the server. We save time and resources this way.
  • The last level is on the server, before saving data definitively. If we find error there, we need to send back an error message from the server. This course does not cover this level.

    Example using form elements

On the form above you can observe the use of a few form elements.
The gray border is automatically added to the <fieldset>.
CSS referencing of form elements can differ a little, we can use classes, but there is an example on formatting without a class.
The first group of settings marked with the * symbol is applied to every element, if there is no other setting applied later.
The value from the submit button appears on it as caption.

Example first layer of validation - properties:

While constructing a form in HTML, we can take steps to ensure that our data is correct:

  • Required is added to the first textbox, so if we do not fill it before sending the data, the text Please fill out this field. will appear and the data will not be sent.
  • The second textbox has a maximum length defined. We cannot write more than 15 characters in it, there will be no error message.
  • The pattern property defines a form of 1 to 15 digits. With the title attribute we can define the text that should appear to help out the user.
  • If we add the same name to more radio buttons, only one of them can be selected.

    Example first layer of validation – selecting the suitable element:

To compel the right data we can use the right form element:

  • If we want an item count squeezed in an interval, we can use <input type="number"> - see the example.
  • If we need a text data, but we have the possible values, we can give a list to the user – avoiding eventual typing errors.
  •  If we want a date we can use <input type="date">, to ensure the date will have the proper form.
1. Add a new HTML document to the folder with the name forms.html and a new style3.css. Copy the essential part to the HTML file (<html>, <head> and <body>) to keep the basic website’s structure, but without content. The styling should be made from the style3.css, which needs to be referred to, in the head section of the html.
Add this file too in the menu section, in all the html files.
Add a form to the file with the following content:
The form should have a border (<fieldset>) and a caption (<legend>).
Add a textbox with the content Name, the content should disappear as the user starts to write in the box. The textbox should be filled every time.
In another <fieldset>, with the caption User status, add two radio buttons with the texts Course participant and Only visiting. The first one should be checked by default.
Add a number type input with a value in the interval from 1 to 5, to ask for a grade for the webpage. The default value should be 5.
Add a dropdown list with the values: Designer, Content Manager, Front End Developer and Data Architect.
Add a submit button with the caption Send.
Format the form, align to the center, add a width. Set colors, borders and paddings.
View the result
2. Add another form below the other.
The elements should be:
Add a fieldset and a caption (Courses).
Add a textbox with the caption Your Code. The user should write his/her code consisting from three digits and five letters, the placeholder should be Code, the text appearing to explain what to do should be Write your code.
In another <fieldset> with the caption Lessons add three checkboxes with the texts HTML, CSS and JavaScript.
Add a Submit button, with the text Send.
The format will be as previously set.
View the result
1. Using the following input element, how will the text Name appear?
<input type="text" title="Name">
2. Which data corresponds the following pattern: [a-zA-Z ]{5}[0-9]{3}?
3. How many radio buttons can we select from the ones listed above?
<input type="radio" name="u1"> Option1<br>
<input type="radio" name="u2"> Option2<br>
<input type="radio" name="u1"> Option3<br>
<input type="radio" name="u2"> Option1<br>
4. If we want to ensure that a textbox will be completed before sending the forms data which property we need?
Supplementary information
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept