When submitting a form, the default type is used. Forms in HTML. Form element group title

Often on Web sites you can find pages with HTML forms placed on them. Web Forms – convenient way obtaining information from visitors to your site. An example of this is -, - which provides feedback to site visitors and developers. Forms are also convenient for site developers when developing a CMS, which allows them to maintain the main property of the site - relevance. This article covers the basics of creating HTML forms, processing them, and ways to transfer data from screen forms to PHP scripts.

1) Create a simple form

Tags

And
define the beginning and end of the form. Starting form tag
contains two attributes: action And method. The action attribute contains the script URL that must be called to process the script. Attribute method tells the browser what type of HTTP request to use to submit the form; possible values POST And GET.

Comment

The main difference between the POST and GET methods is the way information is transferred. In the GET method, parameters are passed through address bar, i.e. essentially in the HTTP request header, while in the POST method the parameters are transmitted through the body of the HTTP request and are not reflected in any way in the address bar.

$text = nl2br($_POST["mytext"]);
?>

Task: Suppose you need to create a drop-down list with years from 2000 to 2050.
Solution: Need to create HTML form with the SELECT element and PHP – script for processing the form.

Discussion:

First, let's create two files: form.html And action.php. In file form.html will contain an html form with a drop-down list. Moreover, the values ​​in the list can be specified in two ways:

I. Manual data entry:

II. Entering data through a loop:

As you can see, the second example with a loop is more compact. I think there is no need to provide the handler script for this form, because it is processed exactly the same as a text field, i.e. list values ​​can be retrieved from a superglobal array $_POST.

Description:

Let's create an HTML form to send a file to the server.




This html form contains an element browse, which opens a dialog box for selecting a file to upload to the server. When you press the button "Transfer file", the file is passed to the handler script.

Then you need to write a handler script action.php. Before writing the handler, we need to decide in which directory we will copy the file:

if(isset($_FILES [ "myfile" ])) // If the file exists
{
$catalog = "../image/" ; // Our catalog
if (is_dir($catalog)) // If such a directory exists
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Temporary file
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // File name
if(! copy ($myfile, $catalog)) echo "Error copying file". $myfile_name // If the file copy failed
}
else mkdir ("../image/" ); // If there is no such directory, we will create it
}
?>

Comment

If you trust users to upload any files to your server, you need to be extremely careful. Attackers can embed “bad” code into a picture or file and send it to the server. In such cases, you need to strictly control the downloading of files.

This example demonstrates creating a directory and copying a file into that directory onto the server.

I would also like to demonstrate an example with the element checkbox. This element is slightly different from other elements in that if not one of the elements checkbox’a is not selected, then the superglobal variable $_POST will return empty value:


Blue
Black
White

if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // If at least 1 element is selected
else echo "Select value";
?>

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:

</span> Example of using a tag <label><span>
>

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 specified 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:

Example of using the placeholder attribute <span>
Login: type = "text" name = "login" placeholder = "Enter your login">

Password: type = "password" name = "password" placeholder = "Enter your password">

IN 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.

Using HTML tools, you can create forms for visitors to enter information on a Web page.

Tag

The form description is placed between paired tags ... . Several forms can be located on a page at the same time, but they cannot be nested one inside another.

Tag attributes
accept-charset A list of encodings for input data accepted by the server processing this form. Helps in situations where website pages are in one encoding, but the data needs to be sent in another. Or when the browser auto-detected the encoding incorrectly. For example: accept-charset="cp1251" or accept-charset="utf8". action The name of the program that will process the form. enctype Content type (encoding method). For example, if the form contains files, then enctype="multipart/form-data".
(Default enctype="application/x-www-form-urlencoded"). method Method of transferring data from the form to the processing program. Can take the following values: get or post. When using get the browser encodes the data received from the user and adds it to the attribute value action pairs name=value. Data is separated from the attribute value action question mark (?). When using post data is transmitted separately. name The name of the form. Set for JavaScript to be able to access the form by name rather than by number. novalidate The presence of this attribute means that the form data should not be validated. onsubmit JavaScript handler for checking whether the form is filled out correctly. Since the JavaScript handler is executed locally, the process happens quite quickly. This is much better than repeatedly sending data across the network because a bungling user once again filled out some field incorrectly. target Frame where to send the received information (set in frame-containing documents).
Example
...Form elements...

Container

…
does not exist on its own. The sent data is contained in special form elements - controls. It is with them that the user interacts by entering data.

Form elements

Button

Tag