Forms form html. HTML forms
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 webform. 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.
Forms are designed to send data from the user to the web server. Forms in HTML can consist of text fields and text areas, checkboxes and radio buttons, and drop-down lists. All these are elements of form. Each element serves to convey some meaning to the site.
At its core, an HTML form is a web page on which you see areas for entering your information. After you fill out the form and click submit, the information from the form is packaged and sent to the web server for processing by a server-side script (handler file). After processing, another web page is returned to you as a response. The following figure clearly demonstrates how the form works:
There's nothing difficult about creating HTML forms. The easiest way to get an idea of forms is to parse a little HTML code and then see how it works. The following example shows the syntax for creating a simple HTML form:
Example: Simple HTML Form
- Try it yourself "
My first form:
Name:
Surname:
Element
Forms are inserted into web pages using the element . It provides a container for all form content, including elements such as text fields and buttons, as well as any other HTML tags. However, it cannot contain another element
.
To send the form to the server, use the “Submit” button, the same result will be obtained if you press the “Enter” key within the form. If the "Submit" button is not present on the form, the "Enter" key can be used to submit.
Most element attributes affect the processing of the form, not its design. The most common of which are action And method. Attribute action contains the URL to which the information in the form will be sent for processing by the server. Attribute method is the HTTP method that browsers must use to submit form data.
Element
Almost all form fields are created using the element (from the English input - input). Element appearance change depending on the value of its attribute type:
Here are some attribute values type:
Entering text and password
One of the simplest types of form elements is a text field, designed for entering text on a single line. This text input type is set by default, and therefore it is the one-line field that will be displayed if you forget to specify the attribute type. To add a one-line text input field to a form, you should inside the element register the attribute type with text value:
The password input field is a type of regular text field. It supports the same attributes as a single-line text field. Attribute name sets the name of the password entry field that will be sent to the server along with the password entered by the user. To create a password field, you need to set the password attribute to type(password (English) - password):
An example of creating a form with a password field:
Example: Password field
- Try it yourself "
Your login:
Password:
You can use the attribute in conjunction with this attribute maxlenght, the value of which determines the maximum number of characters that can be entered in a given string. You can also set the length of the input field using the attribute size. By default, most browsers limit the width of a text field to 20 characters. To control the width of new form elements, instead of an attribute size, we recommend using Cascading Style Sheets (CSS).
Attribute value specifies the value that is displayed by default in the text field when the form is loaded. By entering a default value in the field, you can explain to the user exactly what data and in what format you want the user to enter here. This is like a sample, because it is much more convenient for the user to fill out the form, seeing an example in front of him.
Switches (radio)
Element type radio creates switches that use the logic "OR" principle, allowing you to select only one of several values: if you select one position, then all others become inactive. The basic syntax of a toggle element is:
Attribute name for switches is required and plays an important role in combining several switch elements into a group. To combine radio buttons into a group, you must set the same attribute value name and different attribute value value. Attribute value sets the value of the selected radio button to be sent to the server. The value of each radio button element must be unique within the group so that the server knows which response option the user chose.
Attribute presence checked(from English - installed) at the switch element indicates which of the proposed options should be selected by default when loading the page, if necessary. This attribute can be set only for one radio button element from the group:
- Try it yourself "
How old are you?
- under 18
- from 18 to 24
- from 25 to 35
- more than 35
The action attribute.
Main for element is an attribute action, which specifies the data handler for the form. A data handler is a file that describes what to do with form data. The result of this processing is a new HTML page that is returned to the browser. In other words, in the attribute action specifies the URL path to a handler file on the server (sometimes called a script page) for processing the form. The syntax is as follows:
The processing file is located on the server mytestserver.com in folder namefolder and the name of the server script that will process the data - obrabotchik.php. All the data you entered into the form on the web page will be transferred to him. The .php extension indicates that the specified form is processed by a script written in PHP. The handler itself can be written in another language, for example it could be the scripting language Python, Ruby, etc.
It is advisable to always set the attribute value action. If the form should pass values to the same page where it is located, provide an empty string as the value of the action attribute: action="".
method attribute
Attribute method specifies how information should be transferred to the server. The form submission method you choose depends on the data you want to submit with the form. The volume of this data plays a major role here. The most popular are two methods of transferring your form's source data from the browser to the server: GET And POST. The method can be set to any one you choose, and if you do not specify it, the default will be used GET. Let's consider the use of each of them.
POST method
Method POST packages form data and sends it to the server without the user noticing, since the data is contained in the body of the message. Web browser, when using the method POST sends a request to the server consisting of special headers followed by form data. Since the contents of this request are only available to the server, the method POST used to transmit confidential data such as passwords, bank card details and other personal information of users. Method POST also suitable for sending large volumes of information, since unlike the method GET, it has no restrictions on the number of transmitted characters.
GET method
As you already know, the main job of a browser is to receive web pages from the server. So when you use the method GET, your browser simply retrieves the web page as it always does. Method GET also wraps form data, but appends it to the end of the URL before sending the request to the server. To understand how the method works GET, let's see it in action. Open the first example from this lesson (Example: Simple HTML Form) in Notepad (for example Notepad++) and make a small change to the HTML code:
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
HTML tags that define HTML forms on the site
We create websites and individual pages on the Internet to communicate with visitors.
HTML forms are used to register visitors on the site, for interactive surveys and voting, allow you to send messages, make purchases, and so on. HTML The form is created for one purpose: collecting and subsequently transmitting information for processing by a software script or via email.
Example HTML form | Enter the site
Tags, attributes and values
- - determine the shape.
- name="" - defines the name of the form.
- method="" - defines the method of sending data from the form. Values: "get" (default) and "post" . The "post" method is often used, as it allows large amounts of data to be transferred.
- action="" - defines the url at which the data is sent for processing. In our case - enter_data.php ..
- - define such form elements as buttons, switches, text fields for data entry.
- type="text" - defines a text field for data entry.
- type="password" - defines a field for entering a password, with the text displayed in the form of asterisks or circles.
- type="checkbox" - defines a radio button.
- type="hidden" - defines a hidden form element - used to transfer additional information to the server.
- size="25" - length of the text field in characters.
- maxlength="30" - the maximum allowed number of entered characters.
- value="" - defines the value that will be sent for processing if it relates to radio buttons or switches. The value of this attribute as part of a text field or button will be shown as, for example, Vasya or Login in the example above.
Example HTML form | Comments on the site
|
|