How to make a simple HTML5 form, form tag and new input data types

12.07.18 IT / Html 5187

Forms are widely used on any site. Thanks to this tool, it became possible to send various data from the user to the server, where you can process the received data as you like. Forms are quite simple to create, but usually you need to do validation of input values ​​on the client side and implement some specific functionality. Whereas in the past it was necessary to resort to various tricks, today a highly functional form can be created in HTML5 .

The form tag is used to create forms, it has various attributes. Let's consider the main ones:

• action - the address where the data will be sent
• autocomplete - control the autocomplete of form fields,
• enctype - specifies how to encode form data,
• method is an HTTP protocol method, usually GET or POST. The default is GET, unless you specify another method
• name - sets the name of the form.

The form tag is just a container for form fields. Typically, a form can use a drop-down list - the select tag, test areas - the textarea tag, and input fields - the input tag.

The main interest is the input tag, it is this tag that allows you to create various HTML5 field types . Let's consider what types of fields can be created using it and its type attribute. Variants of the type attribute:

1. button - creates a button,
2. checkbox - creates a checkbox,
3. color - a field for entering a color, generates a palette of colors,
4. date - allows you to enter a date in the format dd.mm.yyyy,
5. datetime-local - allows you to enter date and time,
6. email - field for entering an email address,
7. file - allows you to upload files from the user's computer,
8. hidden - hides the control
9. image - creates a button, you can insert an image on the button,
10. month - allows you to enter the month and year,
11. number - intended for entering integer values. The min, max and step attributes set the upper, lower limits and the step between values,
12. password - field for entering a password
13. radio - creates a radio button that can be turned on or off
14. range - creates a slider, min and max will set the range,
15. reset - button to clear the form,
16. search - denotes a search field,
17. submit - button for submitting form data to the server,
18. tel - field for entering a phone number,
19. text - field for entering text,
20. time - allows you to enter time using the hh: mm pattern,
21. url - the field is intended for specifying URL addresses,
22. week - Allows the user to select one week per year.

The following is an example source code for the form shown in the image above:

Thus, thanks to HTML5 made it possible to create rich, functional forms easily and simply. When developing projects, it is worth using new types of fields from HTML5 , this will greatly facilitate the solution of many tasks and improve the interaction with the site user.