WiFi
Linux
Windows
Miscellaneous
Networks
Smart TV
Solutions

Set of form html. HTML forms. Multiline text field - tag

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 (

) and closing (
) 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

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 between 0 and 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

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.

Description

HTML tag

creates an HTML form that is used to send user input to the server.

Since the form itself does not provide any means for user input, inside the element contain other elements whose purpose is to provide the user with different ways to enter data:

In addition to these elements, you can use any other HTML elements inside the form.

By default, the form is not displayed in any way on the web page, only the elements located inside it are visible, but using CSS you can give the form any appearance.

Attributes

accept-charset: Specifies a character encoding, or a space-separated list of character sets, for form input submitted to the server for processing. If the data includes characters that are not supported by the specified encoding, the browser tries to determine the appropriate encoding for them. If an appropriate encoding cannot be determined, then the characters are encoded into numeric codes.

The default value is the reserved string "UNKNOWN" (browsers interpret this value as a character encoding identical to that of the document containing the element ). action: Indicates the address for sending data from the completed form, where this information will be processed. autocomplete: Determines whether to enable or disable form autocomplete. When autofill is enabled, the browser automatically fills in the values ​​the user entered the previous time they used the form. Possible attribute values:

  • on: the browser automatically displays the values ​​previously entered by the user (default value).
  • off: The user must enter the values ​​for each field each time the form is used. Previously entered values ​​will not be shown.

Note: The autocomplete attribute is not supported by the Opera browser.

Enctype: Specifies how the form data is encoded when submitted to the server. Can only be used in conjunction with the method="post" attribute. Possible values:

  • application/x-www-form-urlencoded: default: all characters are encoded before sending (spaces are converted to "+" characters and special characters are converted to ASCII HEX values).
  • multipart/form-data: characters are not encoded. Used for elements , whose type attribute is set to "file".
  • text/plain: spaces are converted to the "+" character, but does not encode special characters such as apostrophes into hexadecimal values.
method: Specifies the HTTP data transfer method that will be used when submitting form data. Possible values:
  • get: The data is passed to the browser's address bar as name=value pairs by appending them to the end of the URL. A question mark (?) is used as a separator between the main URL and the transmitted data, and an ampersand character (&) is used to separate the transmitted data from each other. This method is used when sending small data.
  • post: the data is not sent as part of the URL, but as the content of the browser request. This method is used to send large amounts of data.
If the method attribute is not specified, the GET method will be used by default. name: Specifies the name of the form. The name can be used in JavaScript to refer to an element by name or to refer to form data after it has been submitted. If several forms are used in one document, then their names should not be repeated, and an empty string should not be left as the attribute value. novalidate: Indicates that the data entered into the form will not be validated before submission. Possible values ​​for the novalidate boolean attribute:

Note: The novalidate attribute is not supported in IE9 and earlier, and Safari.

Target: Defines a frame name or keyword that specifies where to display the response received after the form is submitted.

  • _blank: opens the document in a new window or tab.
  • _self: opens a document in the same directory where the link is located (default).
  • _parent: opens the document in the parent frame.
  • _top: opens the document in the full width of the window.
  • frame_name: opens a document in an iframe whose name was specified as a value.

Tag also supports Global Attributes and Events

Default style

form ( display: block; margin-top: 0em; )

Example

Name:
Surname:

While navigating through websites, the user mostly just clicks on links to navigate web pages.

But it is clear that the user sometimes needs to provide his own input fields. These types of interactions include:

  • registration and login on websites;
  • entering personal information (name, address, credit card information, etc.);
  • content filtering (using drop-down lists, checkboxes, etc.);
  • performing a search;
  • downloading files.

To accommodate these needs, HTML offers interactive controls forms:

  • text fields (for one or more lines);
  • switches;
  • checkboxes;
  • drop-down lists;
  • widgets for downloading;
  • submit buttons.

These controls involve different tags HTML, but most of them use the tag . Because it is a self-closing element, the type of the field is determined by its type attribute:

Element

is a block element that defines interactive part of a web page. As a result, all controls (such as ,






Tags, attributes and values

  • action="http://site/comments.php" - defines the url to which data from the form will be sent.
  • id="" - defines the name and identifier of the form element.
  • name="" - defines the name of the form element.
  • - define a text field as part of the form.
  • cols="" - determines the number of columns of the form text field.
  • rows="" - defines the number of rows of the form text field.

If between place text, it will be shown inside the field as an example that can be easily removed.

Example HTML form | Drop-down list

HTML forms

Tags, attributes and values

  • - define a list with positions to select.
  • size="" - determines the number of visible list positions. If the value is 1 , we are dealing with a dropdown list.
  • - determine the positions (items) of the list.
  • value="" - contains the value that will be sent by the form to the specified url for processing.
  • selected="selected" - highlights a list item as an example.

Example HTML form | List with scroll bar

By increasing the value of the size="" attribute, we get a list with a scroll bar:

First position Second position Third position Fourth position

HTML forms

For this option, use the multiple="multiple" flag, which makes it possible to select multiple positions. Its absence allows you to select only one item.

  • type="submit" - defines a button.
  • type="reset" - defines a reset button.
  • value="" - defines the label on the button.

    • See additionally:

    HTML form is a tool with which an HTML document can send some information to some predetermined point in the outside world, where the information will be processed in some way.

    It is quite difficult to talk about forms in a tutorial dedicated to HTML. The reason is very simple: creating an HTML form is much easier than creating the "point in the outside world" to which the HTML form will send information. In most cases, such a “point” is a program written in Perl or C.

    Programs that process data submitted by forms are often called CGI scripts. The acronym CGI stands for Common Gateways Interface. Writing CGI scripts in most cases requires a good knowledge of the appropriate programming language and the capabilities of the Unix operating system.

    Currently, the PHP/FI language has become somewhat widespread, the instructions of which can be embedded directly into HTML documents (the documents are saved as files with the extension *.pht or *.php).

    HTML forms pass information to handler programs in the form of [variable name]=[variable value] pairs. Variable names should be specified in Latin letters. Variable values ​​are treated as strings by handlers, even if they contain only numbers.

    How the HTML form works

    The form is opened with the tag

    and ends with the tag
    . An HTML document can contain several forms, but the forms should not be located one inside the other. HTML text, including tags, can be placed inside forms without restrictions.

    Tag

    may contain three attributes, one of which is required. These are the attributes:

    Required attribute. Determines where the form handler is located.

    Determines how (in other words, using which hypertext transfer protocol method) data from the form will be transferred to the handler. Valid values ​​are METHOD=POST and METHOD=GET . If the attribute value is not set, METHOD=GET is assumed by default.

    Determines how data from the HTML form will be encoded for transmission to the handler. If the attribute value is not set, the default is ENCTYPE=application/x-www-form-urlencoded .

    The simplest HTML form

    In order to start the process of transferring data from the form to the handler, some kind of control is needed. Creating such a control body is very simple:

    Having encountered such a line inside the form, the browser will draw a button on the screen with the inscription Submit (read “submit” with an emphasis on the second syllable, from the English “submit”), when clicked, all data available in the form will be transferred to the handler defined in the tag .

    The label on the button can be set to whatever you like by entering the attribute VALUE="[Label]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}

    Now we know enough to write a simple HTML form (example 11). It will not collect any data, but will simply return us to the text of this chapter.

    Example 11

    Simplest form

    The inscription placed on the button can, if necessary, be passed to the handler by introducing the NAME=[name] attribute into the button definition (read “name”, from English “name”), for example:

    When you click on such a button, the handler, along with all other data, will receive a button variable with the value Let's go! .

    A form can have multiple submit buttons with different names and/or values. The handler can thus act differently depending on which submit button the user clicked.

    How an HTML form collects data

    There are other types of elements . Each element must include the NAME=[name] attribute, which specifies the name of the element (and, accordingly, the name of the variable that will be passed to the handler). The name must be specified only in Latin letters. Most items must include the attribute VALUE="[value]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} And , however, this attribute is optional because the value of the corresponding variable can be entered by the user using the keyboard.

    Basic element types :

    TYPE=text

    Defines a window for entering a line of text. May contain additional attributes SIZE=[number] (width of the input window in characters) and MAXLENGTH=[number] (maximum allowed length of the input string in characters).

    Example:

    Defines a 20-character wide window for text entry. By default, the window contains the text Ivan, which the user can edit. The edited (or unedited) text is passed to the handler in the user variable.

    TYPE=password

    Defines a window for entering a password. Absolutely similar to the text type, only instead of symbols of the entered text it shows asterisks (*) on the screen. Example:

    Defines a 20-character wide window for entering a password. The maximum allowed password length is 10 characters. The entered password is passed to the handler in the pw variable.

    TYPE=radio

    Defines a radio button. May contain an additional checked attribute (indicates that the button is checked). In a group of radio buttons with the same names, there can be only one labeled radio button.

    Example:

    9600 bps
    14400 bps
    28800 bps

    Defines a group of three radio buttons labeled 9600 bps, 14400 bps, and 28800 bps. The first of the buttons is initially labeled. If the user does not check another button, the modem variable with the value 9600 will be passed to the handler. If the user checks another button, a modem variable with a value of 14400 or 28800 will be passed to the handler.

    TYPE=checkbox

    Defines a square in which a mark can be made. May contain an additional checked attribute (indicates that the square is checked). Unlike radio buttons, a group of squares with the same name can have multiple labeled squares.

    Example:

    Personal computers
    Workstations
    Local network servers
    Internet Servers

    Defines a group of four squares. The second and fourth squares are initially marked. If the user makes no changes, two variables will be passed to the handler: comp=WS and comp=IS .

    TYPE=hidden

    Defines a hidden data element that is not visible to the user when filling out the form and is passed to the handler unchanged. It is sometimes useful to have such an element on a form that is redesigned from time to time so that the handler knows which version of the form it is dealing with. You can easily come up with other possible uses yourself.

    Example:

    Defines a hidden version variable that is passed to the handler with the value 1.1.

    TYPE=reset

    Defines a button that, when clicked, returns the HTML form to its original state. Since no data is passed to the handler when using this button, a reset button may not have a name attribute.

    Example:

    Defines a Clear Form Fields button that, when clicked, returns the HTML form to its original state.

    Besides the elements , HTML forms can contain menus

    All attributes are required. The NAME attribute defines the name under which the contents of the window will be transferred to the handler (in the example - address). The ROWS attribute sets the height of the window in rows (5 in the example). The COLS attribute sets the width of the window in characters (50 in the example).

    Text placed between tags , represents the default contents of the window. The user can edit it or simply erase it.

    It is important to know that Russian letters are in the window