What this lesson is about?
In this lesson we turn back to the HTML forms. We look at some possibilities to complement the already implemented validations. We learn about a new form element, the range type number input and some new events that can be used with forms.

New form element in this lesson:
<input type="range" /> - this HTML tag is used to add an input element to your page, when the number’s value does not really count, we need the scale.

New JavaScript property in this lesson:
min – property to the range element, marks the lowest value it can reach.
max – property to the range element, marks the highest value it can reach.
step – property to the range element, marks the difference between possible values that can be reached.
value – this property is used in case of multiple form elements, to get/set their content.
checked - this property is used instead of the value property for checkbox elements. The value is logical: true if it is checked and false if it is not.

New events in this lesson:
onfocus – this event occurs when we click or change with tab to a form element, an element can have focus automatically (autofocus property).
onfocusout – this event occurs when we leave a form element, that had the focus previously. For example a text box after completion.
onchange – this event is triggered, if the element is changed. This is different from the focusout, because changes may happen more than once between a focus and a focusout event.
onsubmit – this event is triggered, if we click on the submit button in a form. The event relates to a form.

New method in this lesson:
isNaN(data to be checked) –  this function decides if the value given is a number, or can be converted to number. Returns true for non-numeric, and false for numeric data.

Using forms with JavaScript:
We need to add names or/and ids to the form elements to change them from the program code. There can be from elements without form tags. They can be used with JavaScript, but we need a <form> tag if we want to send the result ultimately back to the webserver.

Example on form element without an actual form:

This example increases the size of the image with the value provided through the textbox.

In this example the textbox has an id. Using this id and the value property we get the number written in the textbox. We use the Number function again to convert the value from text to number. Remember if we use + operation on text we do not get the expected result.

If we enter letters or leave the box empty there will be no increase made.

Form data validation with JavaScript:
Previously we used form validation HTML code: the required keyword, pattern and carefully chosen form elements.

Adding JavaScript code to validate data can mean personalized error message and additional possibilities: you can compare the values of different elements, you can test the type of the value introduced.

To diminish the possibility of errors, you can hide and show new elements depending on the state of other elements.

Example on validation on actual form:

 In the example above we check if the text boxes are filled and the texts are the same.

We reference one textbox by id and one by name. The second reference needs the name of the form too.

We tied the validation function to the onsubmit event of the form. The only problem is, that the texts previously introduced disappear and we need to complete all again, if an error appears.

As an update to the previous example, this code does not result in resetting the form element if an error pops up.

The function is completed with return statements to return true if everything is alright and false if we found an error. The logical value resulted must be returned again in the form tag row.

There is no need to use the else statement in this function, because with the return statement the function is finished, the other if-s are not visited.

Example on using range type input element:

In this example we use for the first time a range type input element.

The width of the image should be changed along with the changing of the element’s value.

The reading of the value should be made every time it is changed. The onchange event did not work from the tag, so we used the addEvenListener method to get it running.

When the range element is changed the value is added to the width property of the image by the change function.

Example on radio button:

In the example above the form has two radio buttons with the same name, using this name we can reference the radio buttons as one. To decide which one is selected we use their value: red or blue in this example. Choosing the color and submitting the data we change the background color.

Using the return value false, we avoid that the page reloads returning to the white background.