• 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.

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.

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.

Etc.

• 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.