Authoritative login form html. Creating a Form in HTML

Useful tips

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 applies 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

Example HTML form

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:

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 forms are complex interface elements. They include different functional elements: input fields And , lists <select>, tips, etc. All form code is contained in the element <form> .</p> <p>Most web form information is conveyed using the element <input>. To enter one line of text, use the element <input type="text">, for multiple lines - element <textarea>. Element <select>creates a dropdown list.</p> <p>Element <label>creates labels for form fields. There are two ways to group labels and fields. If the field is inside an element <label>, then the for attribute does not need to be specified.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name <input type="text" name="lastname"></label> </p><p>Form fields can be divided into logical blocks using the element <fieldset>. Each section can be named using the element <legend> .</p><p> <fieldset> <legend>Contact Information</legend> <label>Name <input type="text" required></label> <label>Email <input type="email" required></label> </fieldset> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Rice. 1. Grouping form fields</p><p>To make the form more understandable to users, text is added to the form fields to provide an example of the input data. This type of text is called wildcard text and is created using the placeholder attribute.</p> <p>Required fields must also be highlighted. Before HTML5, the asterisk * symbol was used next to the field name. The new specification introduces a special required attribute, which allows you to mark a required field at the markup level. This attribute instructs the browser (assuming it supports HTML5) not to send data after the user clicks submit until the specified fields are completed.</p><p> <input type="text" required placeholder="your name"> </p><p>To change the appearance of a text field when receiving focus, use the focus pseudo-class. For example, you can make the background of the current field darker or add a colored border to make it stand out from the rest:</p><p>Input:focus ( background: #eaeaea; )</p><p>Another useful HTML5 attribute is the autofocus attribute. It allows you to automatically set focus to the desired initial field for elements <input>And <textarea>(only one element of each form).</p> <h2>Example of creating a registration form</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Registration</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Name</label> <input type="text" name="name" required> </div> <div class="radio">Floor <label> <input type="radio" name="sex" value="male">male <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="female">female <div class="radio-control female"></div> </label> </div> <div> <label for="email">Email</label> <input type="email" name="email" required> </div> <div> <label for="country">A country</label> <select name="country"> <option>Select your country of residence</option> <option value="Russia">Russia</option> <option value="Ukraine">Ukraine</option> <option value="Belarus">Belarus</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Send</button> </form> </div> <p><b>Note</b><br>action="form.php" - link to the form handler file. Create a file in UTF-8 encoding, upload it to the server and replace action="form.php" with the path to the file on your server.</p> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Rice. 2. Default form appearance <p>As you can see from the figure, each form element has default browser styles. Let's clear the styles and style the form elements.</p><p> Form-wrap ( width: 550px; background: #ffd500; border-radius: 20px; ) .form-wrap *(transition: .1s linear) .profile ( width: 240px; float: left; text-align: center; padding : 30px; ) form ( background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; ) .form-wrap:after, form div:after ( content: ""; display: table; clear: both; ) form div ( margin-bottom: 15px; position: relative; ) h1 ( font-size: 24px; font-weight: 400; position: relative ; margin-top: 50px; ) h1:after ( content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50 %); ) /********************** styling of form elements ******************** **/ label, span ( display: block; font-size: 14px; margin-bottom: 8px; ) input, input ( border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; ) input:focus, input:focus ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio label ( position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; ) .radio input ( position: absolute; opacity: 0; ) .radio -control ( position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; ) .male:before ( content: " \f222"; font-family: FontAwesome; font-weight: bold; ) .female:before ( content: "\f221"; font-family: FontAwesome; font-weight: bold; ) .radio label:hover input ~ . radio-control, .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( color: red; ) select ( width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /* uncheck webkit -browsers*/ -moz-appearance: none; /*uncheck in Mozilla Firefox*/ ) select::-ms-expand ( display: none; /*uncheck in IE*/ ) .select-arrow ( position: absolute ; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*activate the display of the list when you click on the arrow*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; ) button ( padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform : uppercase; ) /********************** add adaptability to the form ******************** **/ @media (max-width: 600px) ( .form-wrap (margin: 20px auto; max-width: 550px; width:100%;) .profile, form (float: none; width: 100%;) h1 (margin-top: auto; padding-bottom: 50px;) form (border-radius: 0 0 20px 20px;) )</p><p><b>Form.php file</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: your_email." "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo "Thank you! You have successfully registered."; ) ?></p><p><b>Note</b><br>In the $subject variable, specify the text that will be displayed as the title of the letter; <br>Your_name - here you can specify the name that will be displayed in the “from whom the letter is from” field; <br>replace your_site_url with the address of the site with the registration form; <br>replace your_email with your email address; <br>$headers .= "Bcc: your_email". "\r\n"; sends BCC to your email address.</p> <p>As you already know, the web client has the ability to transmit various information to the web server using GET and POST requests. <i>HTML forms</i> is the main tool for creating such queries. Essentially, an HTML form is a field or fields for entering information on a web page. A good example of an HTML form is the form for entering a login and password for authorization on the site.</p> <p>An HTML form is described using a paired tag <i>form</i>. This tag has two important attributes: <i>method</i> And <i>action</i>. The method attribute specifies the type of HTTP request (get or post), and the action attribute specifies the requested document, that is, the path to the file whose request will be made. The path can be either absolute (indicating the site domain) or relative. For example:</p> <<span>form method = "get" action = "/login.php" ></span> ... <<span>/form></span> <p>There are several different types of data entry elements that fit inside a form. The element I'd like to start with is called <i>submit</i>:</p> <<span>input type = "submit" value = "Login" / > !}</span> <p>The element is a button, clicking on which results in an HTTP request. Attribute <i>value</i> sets the label on the button. A form can contain multiple submit elements. To determine which button was clicked in the requested document, you need to set the attributes of the submit elements <i>name</i>. For example:</p> <<span>form method = "get" action = "/control.php" ></span> <<span>input type = "submit" name = "submit" value = "Add" / > !}</span> <<span>input type = "submit" name = "submit" value = "Edit" / > !}</span> <<span>/form></span> <p>When forming a request, the web browser will include an HTTP parameter that characterizes the clicked submit element. The value of the name attribute of the pressed button will be taken as the parameter name, and the value of the value attribute as the value. Thus, when you click the Add button, the following request will be generated:</p><p>/control.php?submit=Add</p><p>and when you press the Edit button:</p><p>/control.php?submit=Edit</p><p>The following element is the simplest element for entering single-line text. Its HTML code:</p> <<span>input type = "text" name = "name" / ></span> <p><input type="text"></p> <p>name is a required attribute to participate in an HTTP request. The value of this attribute will be used as the HTTP parameter name. All types of form elements have this attribute.</p> <p>You can also set the value attribute to an element by specifying the text that will be entered in the element by default. For example:</p> <<span>input type = "text" name = "login" value = <span>"Username"</span> / > </span> <p>Element <i>password</i> used to enter passwords. Externally it is the same, but the entered text is displayed as asterisks or dots:</p> <<span>input type = "password" / ></span> <p><input type="password"></p> <p>This, in principle, is enough to create the simplest form of authorization. Let's try to implement it, and then return to consideration of the remaining types of elements.</p> <p>Let's create a file auth.php in the root directory with the following content:</p> <span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </span> <<span>html xmlns= <span>"http://www.w3.org/1999/xhtml"</span>> </span> <<span>head ></span> <<span>title ></span> Authorization<<span>/title></span> <<span>meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / ></span> <<span>/head></span> <<span>body ></span> <<span>form method = "get" action = "/auth.php" ></span> <<span>table ></span> <<span>tr ></span> <<span>td ></span> Username:<<span>/td></span> <<span>td ></span> <<span>input type = "text" name = "login" value = "" / ></span> <<span>/td></span> <<span>/tr></span> <<span>tr ></span> <<span>td ></span> Password:<<span>/td></span> <<span>td ></span> <<span>input type = "password" name = "pass" value = "" / ></span> <<span>/td></span> <<span>/tr></span> <<span>/table></span> <<span>input type = "submit" value = "Login" / > !}</span> <<span>/form></span> <<span>/body></span> <<span>/html></span> <p>As you can see, inside the form tag you can place tags that help you beautifully mark up the form (I placed a table inside). The form contains username and password fields named login and pass, respectively. When you click “Login,” a GET request for the document /auth.php is generated (that is, the page requests itself). In my case, the full page URL looked like <i>http://test-domain3/auth.php</i>.</p> <p>Enter your details and click "Login". The page should reload. The page address should also change. In my case it took the form:</p><p>Http://test-domain3/auth.php?login=Joker-jar&pass=12345</p><p>This means that the auth.php document was requested with GET parameters that were entered using an HTML form. Place a PHP handler at the beginning of the auth.php file that will receive authorization data:</p> <?php <span>//--Check whether the data was transferred</span> if ( isset ($_GET [ "login" ] ) && isset ($_GET [ "pass" ] ) ) ( echo <span>"Your username: "</span>. $_GET ["login" ] . ", your password: " . $_GET["pass"]; exit ; ) ?> <p>If the page was given a login and password, the condition will be triggered and a message will be displayed. Will also be called <i>exit</i>, which will stop further execution of the script, therefore the form will not be displayed.</p> <p>It is not safe to send the password using a GET request because it is visible in the address bar. Let's change the request type to POST. To do this, change the value of the method attribute, and in the PHP handler for accessing the array, change $_GET to $_POST. Check the functionality of the script.</p> <p>Next element - <i>checkbox</i>. It is used when a “yes/no” answer is required from the user:</p> <<span>input type = "checkbox" / ></span> <p>If the checkbox is not checked, nothing is passed in the parameters. Otherwise, the name parameter is passed with the value <i>on</i>. There is one more point. As a rule, there is an explanatory text next to the checkbox. It is good practice for the webmaster to have the checkbox react to clicks on this text. This is done simply. The flag is assigned a specific id, and the inscription itself is decorated with a tag <i>label</i> with attribute <i>for</i>, whose value is equal to the checkbox identifier:</p> <<span>input type = "checkbox" id = "remember" name = "remember" / ></span> <<span>label for = "remember" ></span> Remember me<<span>/label></span> <p><input id="remember" name="remember" type="checkbox"></p> <p>A similar element is used to select an answer from a set of values. Let's say the user needs to choose one of three colors:</p> <<span>input type = "radio" id = "red" name = "color" value = "red" / > !}</span> <<span>label for = "red" ></span> Red<<span>/label></span> <<span>br/></span> <<span>input type = "radio" id = "green" name = "color" value = "green" / > !}</span> <<span>label for = "green" ></span> Green<<span>/label></span> <<span>br/></span> <<span>input type = "radio" id = "blue" name = "color" value = "blue" / > !}</span> <<span>label for = "blue" ></span> Blue<<span>/label></span> <<span>br/></span> <p><input id="red" name="color" type="radio" value="red"><br><input id="green" name="color" type="radio" value="green"><br><input id="blue" name="color" type="radio" value="blue"></p> <p>Note that all elements have the same name value. You can only select one value. The HTTP parameter will contain the value of the selected element, for example <i>color=blue</i>.</p> <p>In order for one of the elements to be initially selected, for example, the first one, it needs to be given an attribute <i>checked</i> with meaning <i>checked</i>(XHTML standard):</p> <<span>input type = "radio" id = "red" name = "color" value = "red" checked = "checked" / > !}</span> <p>There is a special element for entering large multi-line text <i>textarea</i>:</p> <<span>textarea rows = "6" cols = "20" name = "text" ></span> Text inside element<<span>/textarea></span> <p>Text inside element</p> <p>This element, as you can see, is different from the previous ones. It is a paired tag, and the text is placed not in the attribute, but in the body of the tag. The element also has a name attribute. Using attribute <i>rows</i> you can set the number of lines in an element, <i>cols</i>- the number of characters in the line. The textarea element is used, as a rule, in POST forms, because... involves entering long text (for example, a message form on a forum).</p> <p>Drop-down list. You've probably encountered such an element in programs. Allows you to select one value from a set. The element code is also not entirely ordinary. First a container element is created <i>select</i>, it is given the name attribute:</p> <<span>select name = "towns" ></span> <<span>/select></span> <p>List elements are placed inside the container. The list element is a paired tag <i>option</i>, each element is given a value attribute. The element's inscription is written into the body of the element:</p> <<span>select name = "town" ></span> <<span>option value = "msk" > !}</span> Moscow<<span>/option></span> <<span>option value = "vlad" > !}</span> Vladivostok<<span>/option></span> <<span>option value = "nsk" > !}</span> Novosibirsk<<span>/option></span> <<span>/select></span> <p>The HTTP request passes a parameter with the name name and the value of the selected element, for example <i>town=vlad</i>. By default, the first element of the list is selected, if you want another element to be selected, give it an attribute <i>selected</i> with meaning <i>selected</i>:</p> <<span>option value = "vlad" selected = "selected" > !}</span> Vladivostok<<span>/option></span> <p>List of values. If the select element is given the attribute <i>size</i> with a numeric value, the dropdown list will turn into a list of values. In this case, the value of the size attribute will determine the vertical size of the element:</p> <<span>select name = "town" size = "3" ></span> <<span>option value = "msk" > !}</span> Moscow<<span>/option></span> <<span>option value = "vlad" > !}</span> Vladivostok<<span>/option></span> <<span>option value = "nsk" > !}</span> Novosibirsk<<span>/option></span> <<span>/select></span> <p>Moscow Vladivostok Novosibirsk</p> <p>If the select element is given the attribute <i>multiple</i> with meaning <i>multiple</i>(XHTML standard), then it will be possible to select more than one element at the same time (for example, while holding down the Ctrl key). In this case, all selected elements with the same names will be sent in the HTTP request, for example: <i>town=msk&town=vlad&town=nsk</i>.</p> <p>Sometimes it is necessary to pass a parameter in an HTTP request that the user should not edit, and sometimes even see. Let's say you are implementing a news editing form. The HTTP request must contain the identifier of this news. For such cases, there is a hidden HTML form element:</p> <<span>input type = "hidden" name = "param" value = "" / ></span> <p>This element will not be visible on the form, but the HTTP parameter name=value will be passed when the request is made.</p> <p>Sometimes an element that clears the form can be useful. A button that, when clicked, erases all data entered by the user on the form:</p> <<span>input type = "reset" value = "Clear" / > !}</span> <p>The listed elements have two special attributes:</p> <p>readonly="readonly" - prohibits changing information in the element (read-only mode); <br>disabled="disabled" - makes the element inactive.</p> <p>There is also an element for selecting a file that will be uploaded to the web server when the form is submitted, but this will probably be discussed in a separate article.</p> <p>Hi all. So we've learned a few elements to create shapes. It's time to combine our knowledge to solve a bigger problem. Let's create the simplest form for authorization on the site. To do this, we need two fields, we create and attach signatures to them.</p> <p>The first field is for the login, the second is for the password. And with the second one it’s not so simple. Because at the moment it is just a text input field.</p> <p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Login</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Password</label></td> <td><input id="passwordField" type="text" name="password"></td> </tr> </table> </form> </p><p>Result in browser: <br><img src='https://i2.wp.com/webshake.ru/uploads/img/b46c524417a23a2090c6c78df55b64e6a0a7c8fffe166749d61cf537cda3bdcc.png' height="50" width="241" loading=lazy loading=lazy></p> <p>In order for the text entered in it to be replaced with asterisks, as is customary for a field of this type, you need to do one simple action. Namely, to replace the attribute value <b>type</b> on <b>password</b>:</p><p> <input id="passwordField" type="password" name="password"> </p><p>Result: <br><img src='https://i1.wp.com/webshake.ru/uploads/img/fcc1b0948d956a9c687641df8bd80f2c2d6612c088edb674e53bf2b22b502684.png' height="57" width="240" loading=lazy loading=lazy></p> <h2>Form submit button</h2> <p>Here you go. Our form is almost ready. Now, to complete its creation, you need to create a button that will be used to submit the form. The problem is solved using a tag <b><input> </b> with type <b>submit</b>.</p> <p>If the button should have some kind of inscription, then it can be done using the attribute <b>value</b>. Whether or not to name the button is up to you, but if you do, the server will receive that name as well as the value of the button.</p> <p> <input type="submit" value="To come in"> </p><p>As a rule, the name of a form submit button is needed when the form has several buttons, each of which performs a specific action. Thanks to this, the server, receiving the name and value of the button from the browser, understands which button the user clicked and what, accordingly, needs to be done.</p> <p>As a result, the code for our form will be as follows:</p><p> <form method="post" action="/login/"> <table> <tr> <td><label for="loginField">Login</label></td> <td><input id="loginField" type="text" name="login"></td> </tr> <tr> <td><label for="passwordField">Password</label></td> <td><input id="passwordField" type="password" name="password"></td> </tr> <tr> <td colspan="2" style="text-align: center"><input type="submit" value="To come in"></td> </tr> </table> </form> </p><p>Result in browser: <br><img src='https://i1.wp.com/webshake.ru/uploads/img/eb03f584a26e6ec91e1be78ab7c996db8d84a9c6d56e52926ca73271189646dd.png' height="82" width="241" loading=lazy loading=lazy></p> <p>The form itself is usually intended to receive information from the user for further sending it to the server, where the form data is received by the handler program. Such a program can be written in any server-side programming language like PHP, Perl, etc. The program address is indicated in the action attribute of the tag <form>, as shown in example 1.</p><p>Example 1: Submitting form data</p><p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Form data</title> </head> <body> <form action="/example/handler.php"> <p><input name="login"> <input type="password" name="pass"></p> <p><input type="submit"></p> </form> </body> </html> </p><p>In this example, the form data indicated by the name attribute (login and password) will be passed to the file at /example/handler.php. If the action attribute is not specified, then the transfer occurs to the address of the current page.</p><p>Transfer to the server occurs in two different methods: GET and POST, to set the method in the tag <form>The method attribute is used, and its values are the get and post keywords. If the method attribute is not specified, then by default the data is sent to the server using the GET method. In table Figure 1 shows the differences between these methods.</p><p>Which method is used can be easily determined by the address bar of the browser. If a question mark appears in it and the address looks like this, then this is definitely a GET.</p><p>http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8</p><p>A unique combination of parameters in the address bar uniquely identifies a page, so pages with addresses ?q=node/add and ?q=node are considered different. This feature is used by content management systems (CMS, Content management system) to create many website pages. In reality, a single file is used that receives a GET request and, according to it, generates the contents of the document.</p><p>Listed below are typical applications of these methods on sites.</p><h4>GET</h4> <p>Transferring small text data to the server; Site search.</p><p>Search engines and site search forms are always sent using the GET method, this allows you to share search results with friends, send a link by mail or post it on a forum.</p><h4>POST</h4> <p>Transferring files (photos, archives, programs, etc.); sending comments; adding and editing messages on the forum, blog.</p><p>By default, the form is processed in the current browser tab; however, when submitting the form, you can change this parameter and open the form handler in a new tab or frame. This behavior is specified through the “context name”, which is the value of the target attribute of the tag <form>. Popular values are _blank to open the form in a new window or tab, and the name of the frame, which is specified by the name attribute of the tag <iframe>(example 2).</p><p>Example 2: Opening a form in a frame</p><p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using a Frame</title> </head> <body> <p><iframe name="area" width="500" height="200"></iframe></p> <form action="handler.php" target="area"> <p><input placeholder="Enter text" name="text"> <p><input type="submit" value="Send"></p> </form> </body> </html> </p><p>In this example, when you click the Submit button, the form submission result opens in a frame called area .</p><p>Form elements are traditionally placed inside a tag <form>, thereby determining the data that will be transmitted to the server. At the same time, HTML5 has the ability to separate a form from its elements. This is done for convenience and versatility, so a complex layout may contain several forms that should not intersect with each other, or, for example, some elements are displayed using scripts in one place on the page, and the form itself is located in another. The connection between the form and its elements occurs in this case through the form identifier, and the form attribute with a value equal to this identifier should be added to the elements (example 3).</p><p>Example 3: Linking a form to fields</p><p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Form</title> </head> <body> <form id="auth" action="handler.php" method="post"></form> <p><input name="login" form="auth"> <input type="password" name="pass" form="auth"></p> <p><input type="submit" form="auth"></p> </body> </html> </p><p>In this example the tag <form>is uniquely identified through the auth identifier, and form="auth" is added to fields that should be submitted via the form. In this case, the behavior of the elements does not change; when the button is clicked, the login and password are sent to the handler.php handler.</p><p>Although form transfer parameters are traditionally specified in the tag <form>, they can also be transferred to the form submit buttons ( <button>And <input type="submit">). For this, a set of attributes formaction , formmethod , formenctype and formtarget are used, which are analogues of the corresponding attributes without the form prefix. Example 4 shows the use of these attributes.</p><p>Example 4: Submitting a form</p><p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Submitting a form</title> </head> <body> <form> <p><input placeholder="your name" name="user"></p> <p><input type="submit" value="Send" formaction="handler.php" formmethod="post"></p> </form> </body> </html> </p><p>All new form attributes are not supported by some browsers, particularly Internet Explorer and Safari.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div><div class="clear"></div> <script type="text/javascript"> document.getElementById('hc_full_comments').innerHTML = ''; </script><br /><br /><noindex><p align="center"><center> <div id="meta_news_block1111" style="text-align: center;"></div></center> </p> <br /><br /> <p align="center"> </p> </noindex> </div> </div> <div id="sidebar"> <div class="clear"></div><br /> <h2 class="front" style="margin:15px 0 5px 0">Popular articles</h2> <div class="tabcont"> <ol> <li><a href="https://gtavrl.ru/en/ustanovka-proshivki-android-5-0-lollipop-obnovlenie-android-kak-obnovitsya-do/">Installing android 5 firmware</a></li> <li><a href="https://gtavrl.ru/en/formula-svyazi-ciklicheskoi-chastoty-i-perioda-kolebanii-chastota-period/">Frequency, period, cyclic frequency, amplitude, phase of oscillation</a></li> <li><a href="https://gtavrl.ru/en/panamskii-kanal---svyaz-dvuh-okeanov-i-podvig-chelovechestva-kak/">The Panama Canal is a connection between two oceans and a feat of humanity</a></li> <li><a href="https://gtavrl.ru/en/instagram-vydaet-oshibku-seti-neizvestnaya-oshibka-seti-pri-vhode-v/">Unknown network error when logging into Instagram - what to do</a></li> <li><a href="https://gtavrl.ru/en/nazvanie-chisel-nazvaniya-bolshih-chisel-cifry-po-poryadku-ot-1/">Names of large numbers Numbers in order from 1</a></li> </ol> </div> <h2 class="front" style="margin:15px 0 5px 0">Latest articles</h2> <div class="tabcont"> <ol> <li><a href="https://gtavrl.ru/en/protokol-peredachi-dannyh-po-rs-485-fizicheskie-interfeisy-rs485-i-rs422-chto/">Physical interfaces RS485 and RS422</a></li> <li><a href="https://gtavrl.ru/en/kak-vernut-ramku-na-90-gradusov-kak-mozhno-perevernut-ekran/">How can you flip your monitor screen to its original position?</a></li> <li><a href="https://gtavrl.ru/en/reiting-luchshih-kitaiskih-smartfonov-po-sootnosheniyu-cena-kachestvo-reiting/">Rating of the best Chinese smartphones in terms of price-quality ratio The best Chinese phone</a></li> <li><a href="https://gtavrl.ru/en/kak-perevesti-dengi-s-mts-na-mts-s-telefona-na-telefon-bez-komissii-kak/">How to transfer money from a phone to an MTS phone - description, methods Transferring funds between MTS numbers</a></li> <li><a href="https://gtavrl.ru/en/ustanovka-televizionnyh-antenn-kak-podklyuchit-antennyi-kabel-k/">How to connect the antenna cable to the power supply TV cable connection to the connector</a></li> <li><a href="https://gtavrl.ru/en/kak-obnovit-aifon-do-poslednei-versii-ios-ne-skachivayutsya/">Applications cannot be downloaded from Play Market without WI-FI</a></li> <li><a href="https://gtavrl.ru/en/ustanavlivaem-novye-shrifty-v-ms-word-zagruzka-i-ustanovka-polzovatelskih/">Download and install custom fonts for Office How to download beautiful fonts for word</a></li> </ol> </div> <div class="widget" id="ajdg_grpwidgets-3"> <div class="g g-9"> <div class="g-single a-27"> <script> jQuery(function() { window.onscroll = function() { height_scroll = jQuery(document).scrollTop(); height = jQuery(document).height(); height50 = height / 2; if (height_scroll >= height50) { jQuery("#site-code-block-22").fadeIn(1200); document.getElementById('site-code-block-22').style.display = 'block'; jQuery("#site-code-block-23").fadeOut(1200); document.getElementById('site-code-block-23').style.display = 'none'; } else { jQuery("#site-code-block-22").fadeOut(1200); document.getElementById('site-code-block-22').style.display = 'none'; document.getElementById('site-code-block-23').style.display = 'block'; jQuery("#site-code-block-23").fadeIn(1200); } }; }); </script> <div class="site-code-block prma-count" data-rel="cb_23" id="site-code-block-23" style=""> </div> <div class="site-code-block prma-count" data-rel="cb_22" id="site-code-block-22" style=""> </div> </div> </div> </div> <div class="clear"></div> <br /> <center> <div style="color: #333333; font-size: 11px;"> </div> </center> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> </div> <br /><br /> <div id="footeri"> <div id="footer"> <div class="footer-sec"> <h6>Sections</h6> <ul> <li><a href="https://gtavrl.ru/en/category/youtube/">Youtube</a></li> <li><a href="https://gtavrl.ru/en/category/facebook/">Facebook</a></li> <li><a href="https://gtavrl.ru/en/category/twitter/">Twitter</a></li> <li><a href="https://gtavrl.ru/en/category/tips/">Adviсe</a></li> <li><a href="https://gtavrl.ru/en/category/useful-tips/">Useful tips</a></li> <br /> </ul> </div> <div class="footer-sec"> <h6>Pages</h6> <ul> <li><a href="">about the project</a></li> <noindex> <li><a href="" >RSS news</a></li> </noindex> </ul><br /><br /><br /> <h6>Special projects</h6> <ul> <li><a href="https://gtavrl.ru/en/feedback/">Connect with us</a></li> </ul> </div> <div id="footer-top"> <h6>Contacts</h6> <ul> <li><a href="">Advertising on the website</a></li> <li><a href="https://gtavrl.ru/en/feedback/">Contacts</a></li> </div> <div class="clear"></div> </div></div> <div id="bottom"><div class="foot_col1">2024 <a href="https://gtavrl.ru/en/">gtavrl.ru</a>. </div> <script type="text/javascript">var addthis_config = { "data_track_addressbar":true,"pubid": "ra-58b68bb0f1371607"} ;addthis_config.data_track_addressbar = false;addthis_config.data_track_clickback = false;</script> <script type='text/javascript'> var flag_hide = 0; function hide_direct() { flag_hide = 1; jQuery('#rek_mob_fixed').slideToggle( 'slow' ); var date = new Date(); var expires_hour = 21600000; date.setTime(date.getTime()+expires_hour); showSocial(); Cookies.set('advp_show_me', '1', { expires: date, path: '/'} ); } ; jQuery(function(f){ var element = f('#rek_mob_fixed'); element.delay(8000); f(window).scroll(function(){ if (flag_hide == 0){ var offset_element_for_hide = jQuery('#before_footer').val(); if (offset_element_for_hide != null) { offset_element_for_hide = jQuery('#before_footer'); offset_element_for_hide = jQuery(offset_element_for_hide).offset().top - jQuery(window).height(); } else { offset_element_for_hide = jQuery(document).height(); } //Если рекламный блок более 1000px по ширине, устанавливай фикс. ширину 1000px if (jQuery('#rek_mob_fixed_block').actual('width') >1000) { jQuery('#rek_mob_fixed_block').css({ 'max-width':'1000px'} ); } if(f(this).scrollTop() > 500){ element.fadeIn(0); } if(f(this).scrollTop() < 500 || f(this).scrollTop() > offset_element_for_hide ){ element.fadeOut(0) } if(f(this).scrollTop() + f(this).height() >= f(document).height() && flag_hide == 0 && jQuery('#rek_mob_fixed').is(':visible')) { jQuery('#rek_mob_fixed').slideToggle(100); } } } ); } ); function showSocial(){ if(flag_hide == 1 ) jQuery('#footer-share').slideToggle('slow'); } </script><div id="wondergridgallerylightbox_options" data-skinsfoldername="skins/default/" data-jsfolder="/wp-content/plugins/modesco-wonderplugin-gridgallery/engine/" style="display:none;"></div> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-monica/script.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0441\u043a\u0440\u044b\u0442\u044c","width":"100%"} ; /* ]]> */ </script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-table-of-contents-plus/front.js?ver=1404'></script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/page-links-to/js/new-tab.min.js?ver=2.9.8'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "ads-sidebar", "margin_top" : 10, "margin_bottom" : 50, "stop_id" : "before_footer", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['ajdg_grpwidgets-3'] } ; </script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/youtube-embed-plus/scripts/fitvids.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type="text/javascript"> var _hcwp = _hcwp || []; var _hcobj = { widget_id : 29264, widget : "Bloggerstream",selector: '.hc_counter_comments',platform:"wordpress", } ; _hcwp.push(_hcobj); (function() { if("HC_LOAD_INIT" in window)return; HC_LOAD_INIT = true; var lang = "ru"; var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true; hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/29264/"+lang+"/widget.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hcc, s.nextSibling); } )(); </script> </body> </div> </body> </html>