Forms can be found on almost every website on the Internet. For example, when you enter your login and password on a website, the data is filled out through forms and sent to the server. Also an example of a form are various surveys.
Tag syntax
Tag
Just inside the form element there should be controls, of which there can be as many as desired.
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
<input type = "text" name = "login" size = "20" value = "Login"
maxlength
=
"25"
>
!}
Result:
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
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:
<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:
The disabled attribute allows you to lock an element, making it unchangeable by the user:
<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
HTML forms are controls that are used to collect information from website visitors.
Web forms consist of a collection of text fields, buttons, lists, and other controls that are activated by a mouse click. Technically, forms pass data from the user to a remote server.
To receive and process form data, web programming languages such as PHP, Perl.
Before the advent of HTML5, web forms were a collection of several elements , ending with a button . It took a lot of effort to style forms across different browsers. Additionally, the forms required JavaScript to validate input and lacked specific input field types for specifying everyday information such as dates, email addresses, and URLs.
HTML5 forms solved most of these common problems with the presence of new attributes, providing the ability to change the appearance of form elements by CSS3.
Rice. 1. Improved Web Forms with HTML5
Creating an HTML5 Form
1. Element
. It does not require any input as it is a container, holding all the form controls together - fields. The attributes of this element contain information that is common to all form fields, so fields that are logically combined must be included in one form.
Table 1. Tag attributes
2. Grouping form elements
Element
designed to group elements related to each other, thus dividing the form into logical fragments.
Each group of elements can be named using the element
Rice. 1. Improved Web Forms with HTML5