Description
Tag
Attributes
Sets the encoding in which the server can receive and process data. The address of the program or document that processes the form data. Enables auto-filling of form fields. The method for encoding form data. HTTP protocol method. Form name. Overrides the built-in check of form data for correctness of input. The name of the window or frame where the handler will load the returned result.Closing tag
Required.
HTML5 IE Cr Op Sa Fx
The result of this example is shown in Fig. 1.
Rice. 1. View of form elements in a browser window
An HTML form is a part of a document that allows the user to enter information of interest, which can subsequently be accepted and processed on the server side. In other words, forms are used to collect information entered by users.
Syntactically paired tag
Element is main element of the form and defines a custom field for entering information. The input field takes on different appearances depending on the value of the type attribute applied to the element.
Element
And so in order, what we did in this example:
- Posted two single line text fields ( ) for the user to enter their first and last name. Assigned unique names to these fields using the name attribute ( for correct transmission and processing of the form, be sure to indicate for each element this attribute). In addition, the value attribute was set to default values for these fields (when filling out the fields, the value of this attribute will correspond to the user input).
- Posted two radio buttons ( ) to select one of a limited number of options. Please note that for radio buttons the same name must be specified so that you can choose only one option from the ones offered. For first radio buttons we specified the attribute
Hello, dear readers of the blog site. Continuing our study, we move on to consider the form and input tags with their attributes (), with which you can create a wide variety of forms for the site.
Whatever the topic and content of a particular web resource, it will most likely contain forms in one form or another: text fields, drop-down menus, various buttons or switches. By the way, in one of the publications I already talked about elements that help diversify forms.
What is the practical purpose of all the variety of possible forms? First of all, they are needed to send user-entered data to the server for the purpose of further processing using a specially created script (handler).
HTML forms - how they are created using form and input
As I said at the beginning, some kind of web form, or even several at once, must be present on any more or less developed website. To understand how important they are in the light of a web resource’s compliance with modern requirements, it is enough to give you offhand three objects that use forms based on the form and input tags, which, just by their name, leave no doubt about their necessity for a project of one direction or another:
If you follow, for example, a link to an article about creating feedback (allowing all users to send messages to the site administration), then the HTML code with a form that has an opening (
) Part:
This is where form plays a vital role as it initiates the installation of the web form. It does not itself display an area on a web page, but serves as a container containing other tags.
In our case (see screenshot above), these include several input(this HTML tag is single, in other words, does not have a closing component), and also textarea, with different sets of attributes. Each of them defines its own element included in the form.
16. Autofocus(no parameters) is a logical attribute that sets focus to the field immediately when the web page loads, as a result of which you can enter data without clicking on it. Cannot be applied to input type="hidden" only.
17. Disabled(without values) - disables for the user the form element to which it was added. Most often it is used in conjunction with scripts, where conditions are specified under which an inaccessible element will be activated.
18. Form— associates the element with the form when it is located outside the container
. To link, a global id attribute is added to the form tag, and a form attribute is added to the input tag, the values of which are the same (for example, id="data" and form="data").19. Multiple(no parameters) - sets multiple choice option for the user and is only used in conjunction with type="file" and type="email".
If you use the file upload field, you can select several files from your computer at once by using the Ctrl or Shift keys. If a field for entering an email address is displayed (type="email"), then emails should be entered separated by commas.
20. Required(no values) – activates the requirement for the user to enter data. Therefore, the browser blocks the submission of the web form if a required field is left empty and displays a corresponding message about the need to fill it out.
This attribute is not used for graphic and standard buttons (type="button | image"), as well as for hidden input fields (type="hidden").
21. Size— determines the width of the text field in characters (suitable only for type elements with the parameters "email | password | search | tel | text | url"). Default value is 20 characters.
The next four attributes (22-25) for the input tag carry almost the same functionality as for , but for the sake of completeness I will briefly mention them too.
22. Maxlength— imposes a limit on the maximum number of characters that can be entered when filling out a text field. If you attempt to exceed this limit, further input will be blocked. This attribute is only applicable for text elements with type="email | password | search | tel | text | url".
23. Minlength— imposes a limit on the minimum number of characters required to be entered into the text area. If an attempt is made to send data containing fewer characters, a short message will appear indicating the need to supplement the contents of the form and information about the number of characters already entered will be provided. The terms of use are exactly the same as in the case of maxlength.
24. Placeholder— you can place a hint (it will serve as a parameter) directly in the text field, which will disappear the moment the user starts entering characters. Only for fields that are formed using parameters email, password, search, text, tel, url type attribute of the input tag.
25. Readonly(no parameters) - indicates that the text previously entered in the field is available for reading and copying only. It is usually used in conjunction with scripts, where conditions are specified that, when met, can activate this form element.
And finally, a few more attributes that complement the functionality of various form elements:
26. Pattern— as its value, reflects a regular expression on the basis of which the rules for entering information are set. In this case, it is recommended to additionally add a global title attribute, as a parameter of which you can add explanatory text to help users fill out the fields. Pattern is applied only to email, password, search, text, tel, url elements. Let's understand it with an example. Here is the code for a simplified registration form (with ):
|
Login Password |
For the login field (type="text"), a regular expression (5,) is specified as the pattern value, which implies the use of Latin characters, and at least five characters must be entered.
In relation to the text area for the password (type="password"), the value is set to (8,), which specifies the entry of exclusively Latin characters in any case (upper and small letters), as well as numbers, while the total number of all characters should not be less than eight.
If the specified input conditions are violated, the browser will not allow you to send data and will display an appropriate warning:
27. Src— defines the path to the image (URL, which is its value) for displaying the graphic button “image” (see the table of input type parameters above).
28. Step— sets the step for elements that provide a choice of numeric values (input type="date | datetime-local | month | number | range | tel | time | week.").
It can take any integer or fractional number as a parameter. Default step="1". To set the final input range, you can again use the min and max attributes mentioned just above. For clarity, we will include 2 elements type="number" in the test form. For the first, set step="2", and for the second, step="0,1":
|
Enter a value from -10 to 10: Enter a value between 0 and 1: |
29. Value— sets the value of the form element that will be passed to the handler. A name-parameter pair is sent to the server, where the name is determined by the name attribute of the input tag, and the parameter is determined by the value attribute. Moreover, for various form elements value will play different roles:
- for type="button | reset | submit" - sets the text label on the buttons;
- for type="checkbox | radio | image" - identifies each checkbox, switch or graphic button when sending and processing data on the server;
- for type="password | text" - immediately when loading the form, it displays preliminary text in the field, which can be changed or completely deleted by the user;
- for type="file" (file upload) does not apply because it does not affect this element.
Example usage for each of the above options:
|
Select CMS: W.P. Joomla |
Here value attribute value defines the following components of each element: displays a text fragment for the field type="text" ("Your name"), identifies each of the radio buttons ("1" and "2") set using type="radio", and also activates inscription on the button ("Submit").
An example of creating a beautiful HTML form
Next, I will try to present you with a sample web form, the code of which includes not only input type combinations with different values that form standard text fields and buttons, but also, for example, which allow you to initiate focusing on an element not only with a direct mouse click, but also by clicking on text.
Please note that to obtain a unique design, individual form components are placed in, each with sets of:
Back (max-width:350px; margin:50px auto 0; padding:20px; background:#f3ebe1; font-family:"Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1 input (display:block; margin- bottom:10px; width:100%).in (padding-left:40px) .in input (width:100%) ..png) no-repeat;background-position:10px 10px) ..png) no-repeat; background-position:10px 10px) .form-4 input (display:block; height:50px; font-size:24px; width:100%; cursor: pointer)
As a result, such a web form takes on the following outline:
More complete information on creating this specific form can be found at this page(by the way, there you can not only test the functionality of individual text areas by entering data into them, but also experiment with the web form by editing the HTML code and/or CSS properties, completely or partially changing its appearance).
My goal was to introduce you to the algorithm for using different values of the type attribute and the form tag to create various HTML forms on the site. I hope the task is completed. In any case, share your thoughts on this diverse topic in the comments.
Naturally, in subsequent publications I will continue to describe the main tags of hypertext markup, so do not forget to subscribe to blog updates via e-mail. Also, to reinforce this, look at another lesson by Evgeniy Popov on creating a contact form.
Form attributes:
- The action attribute specifies a server file with a script responsible for the main processing of data sent from the form. Typically, the code for this file is written in a server-side programming language, for example, in php or perl.
- The enctype attribute indicates the type of information transmitted to the server, if it is just text data - text/plain, if files are sent with the form, then multipart/form-data should be specified.
- The method attribute specifies and defines the form of data transfer. We will not dwell on this in detail, but it should be said that for more reliable transmission, the post method should be specified.
HTML form elements
- The value of the type attribute - text - indicates that this is a text field
- size — size of the text field in characters
- maxlength — maximum number of characters that can fit in the field
- value - initial text in the text field
- name — element name, necessary for processing data in the handler file
| <input type = "text" name = "login" size = "20" value = "Login" maxlength = "25" > !} |
Result:
Result:
Instead of text, a mask is displayed in the field - stars or circles
| <input type = "submit" value = "Send data"> |
Result:
The submit button collects all form data entered by the user and sends it to the address specified in the action attribute of the form.
| <input type = "reset" value = "Clear form" > !} |
Result: 
The button returns the state of all controls to their original state (clears the form)
| <input type = "checkbox" name = "asp" value = "yes" > !} A.S.P.<br> <input type = "checkbox" name = "js" value = "yes" checked = "checked" > !} javascript<br> <input type = "checkbox" name = "php" value = "yes" > !} PHP<br> <input type = "checkbox" name = "html" value = "yes" checked = "checked" > !} HTML<br> |
A.S.P.
javascript
PHP
HTML
Result:
A.S.P.
javascript
PHP
HTML
In html, a checkbox is used to organize multiple selection, i.e. when it is necessary and possible to select several answer options
| <input type = "radio" name = "book" value = "asp" > !} A.S.P.<br> <input type = "radio" name = "book" value = "js" > !} Javascript<br> <input type = "radio" name = "book" value = "php" > !} PHP<br> <input type = "radio" name = "book" value = "html" checked = "checked" > !} HTML<br> |
A.S.P.
Javascript
PHP
HTML
Result:
A.S.P.
Javascript
PHP
HTML
radio button html serves for a single choice from several options
The checked attribute immediately sets the element as checked
Important: For elements radio it is necessary that the attribute value name all elements in the group were the same: in this case, the elements will work interconnected, when one element is turned on, the others will be turned off
HTML Dropdown List
Let's look at an example of adding a drop-down list:
| 1 2 3 4 5 6 | <select name = "book" size = "1" > <option value = "asp" > !} A.S.P.</option> <option value = "js" > !} JavaScript</option> <option value = "php" > !} PHP</option> <option value = "html" selected = "selected" > !} HTML</option> </select> |
Result:
- The drop-down list consists of a main tag - select - which has a closing pair, and each list item is an option tag, inside which the text of the item is displayed
- size attribute with value "1" indicates that the collapsed list displays one item, the rest are opened by clicking on the menu arrow
- The selected attribute of an item (option) indicates that this particular item will be initially visible, and the remaining items are “collapsed”
For large and complex lists there is an option add subheadings— optgroup tag with label attribute:
| 1 2 3 4 5 6 7 8 9 10 11 12 | <select name = "book" size = "1" > <optgroup label = "English" > <option value = "asp" > !} A.S.P.</option> <option value = "js" > !} JavaScript</option> <option value = "php" > !} PHP</option> <option value = "html" selected = "selected" > !} HTML</option> </optgroup> <optgroup label = "Russians" > <option value = "asp_rus" > !} ASP in Russian</option> <option value = "js_rus" > !} JavaScript in Russian</option> </optgroup> </select> |
To provide the opportunity selecting several items at once you need to add the multiple attribute. But in this case, the size attribute should also be set to a value greater than 1:
Result:
- The width of the element depends on the cols attribute, which specifies how many characters will fit horizontally
- The rows attribute specifies the number of rows in an element
Other elements
Additional elements and attributes
- For controls radio And checkbox It’s convenient to use additional elements that, firstly, bind the text to the radio or checkbox element itself, and secondly, add a stroke when clicked:
- The disabled attribute allows you to lock an element, making it unchangeable by the user:
| <input type = "checkbox" id = "book1" > <label for = "book1" > A.S.P.</label> |
In the example, an inscription (label tag) has been created for the checkbox element. The binding is carried out through the id attribute, the value of which is specified in the for attribute of the label.
Result:
| <input type = "text" name = "login" size = "20" value = "Login"
maxlength
=
"25"
disabled
=
"disabled"
>!} <input type = "checkbox" name = "asp" value = "yes" > !} A.S.P.<br> <input type = "checkbox" name = "js" value = "yes" checked = "checked" disabled = "disabled" > !} javascript<br> |
A.S.P.
javascript
An HTML form is a part of a document that allows the user to enter information of interest, which can subsequently be accepted and processed on the server side. In other words, forms are used to collect information entered by users.
To determine which form element the current label belongs to, you must use the for attribute of the tag
Let's look at an example of use:
Yes
In this example we:
- Inside first forms:
- Posted two radio buttons ( ) to select one of a limited number of options. Note again that for radio buttons within the same form the same name must be specified, we indicated different values. For first checked , which specifies that the element should be preselected when the page loads (in this case, a radio button with the value yes ). In addition, we have specified global attributes for the radio buttons, which define a unique identifier for the element.
- Placed two elements
- Inside second forms:
- Posted two radio buttons ( ) to select one of a limited number of options. For second For radio buttons, we have specified a checked attribute, which indicates that the element should be pre-selected when the page loads (in this case, a radio button with the value no ). In addition, we specified unique values for the radio buttons within the form and the same names.
- Placed two elements
In the browser, both options (methods) for using text labels look identical:
Tooltip for input fields
Let's look at an example of use:
In this example, we specified for the element with type text (a single-line text field) and type password (password field), a text hint for the user (the placeholder attribute) that describes the expected value for the input.
The result of our example:
Questions and tasks on the topic
Before moving on to the next topic, complete the practice assignment:
- Using the knowledge you have gained, create the following order form:
A caveat: in fields where selection is expected, it should be possible to select by clicking on the text, and not just on the element itself.
After you complete the exercise, inspect the page code by opening the example in a separate window to make sure you did everything correctly.
