Ready javascript for filling out the form. Forms. Plugin for creating online forms “jFormer”

This tutorial describes how to create JavaScript form, which checks that the visitor has filled in the fields correctly before sending the data to the server. We'll first explain why form validation is a useful technique, and then we'll build a simple example explaining how it works.

Form validation is a process in which form data is verified before processing. For example, if your form has a field in which the user must enter email address, you may want to check that the field is complete before processing the form further.

There are two main methods for checking the completion of a form: on the server side (using CGI scripts, ASP, etc.) and on the client side (usually using JavaScript). Server-side validation is more secure, but in most cases requires more complex code, while client-side validation is simpler and faster (the browser does not need to connect to the server to validate the form, so the user receives an immediate response if missing fields that need to be filled in).

Client-side form validation. Typically performed using an embedded JavaScript script.

Server-side form validation. Typically done using a CGI or ASP script.

IN this lesson we will build a simple form with client side validation with using JavaScript. You can then adapt it to suit your needs.

Let's build a simple form with fill checking using a script. This form has one text field "Your name" and a button for sending data. Our script checks that the user has entered their name before sending the data to the server.

Open the form and see it in action. Try clicking the "Submit Data" button without entering anything in the "Your name" field.

The page contains a JavaScript function called validate_form(). It checks that the form is complete. let's look at the shape first.

The first part of the form is the form tag

The form is named contact_form. With its help, we will access the form from the JavaScript validation function.

The form uses a postmethod to send data to a stub htm file, which simply displays a message. In fact, you can send data to your CGI script, ASP page, etc. (for example to send mail).

The form tag also contains an onsubmit attribute for JavaScript call validation functions validate_form() when the Submit Data button is clicked. The function returns a Boolean value, for which true means "the check was successful" and false means "data is on hold." This way we can prevent the form data from being submitted if the user has not filled it out correctly.

The rest of the form code adds the contact_name input field and the "Submit data" button:

Please enter your name.

Your name:

The form validation function validate_form() is built into the head section at the beginning of the page:

The first line () tells the browser what comes next JavaScript code, and the HTML comment ( Enter your name:

Enter your email address:

Let's first look at the HTML code in the body section. Here we are creating only two text input elements and two buttons. The buttons call the test1(...) or test2(...) functions, depending on which one was pressed. As an argument to these functions we pass the combination this.form
, which will later allow us to address in the function itself exactly those elements that we need. The test1(form) function checks whether given line empty. This is done through if (form.text1.value == "")... . Here "form" is a variable where the value received when calling the function from "this.form" is stored. We can retrieve the string entered into the element in question if
form.text1
let's assign "value". To make sure the string is not empty, we compare it with "". If it turns out that the entered string matches "", then this means that in fact nothing was entered. And our user will receive an error message. If something was entered correctly, the user will receive confirmation - ok. The next problem is that the user can enter only spaces in the form field. And this will be accepted as correctly entered information! If you wish, you can of course add a check for this possibility and exclude it. I believe this will be easy to do based only on the information presented here.. Here again the entered string is compared to the empty string - "" (to make sure that something was actually entered by the reader). However, we have added something else to the if command. Character combination || called the OR operator. You have already become acquainted with him in the sixth part of the Introduction.
The if statement checks whether the first or second comparison ends. If at least one of them is executed, then the if command as a whole results in true, and therefore will be executed next command script. In short, you will receive an error message if either the string you provided is empty or the @ symbol is missing. (The second statement in the if command ensures that the entered string contains @.)

Checking for the presence of certain characters

In some cases, you will need to limit the information entered into a form to only a certain set of characters or numbers. It is enough to remember about telephone numbers - the information presented should contain only numbers (it is assumed that the telephone number, as such, does not contain any characters). We need to check if the entered data is a number. The complexity of the situation is that most people also insert different symbols into the phone number - for example: 01234-56789, 01234/56789 or 01234 56789 (with a space character inside). The user should not be forced to abandon such characters in phone number. Therefore, we must supplement our script with a procedure for checking numbers and some symbols. The solution to the problem is demonstrated in the following example:

Source this script:

Telephone: The test() function determines which of the entered characters are considered valid.

Providing information entered into a form

What options are there for communicating the information entered on the form? The easiest way is to send form data via email (we'll look at this method in more detail).
If you want the data entered into the form to be monitored by the server, then you must use the CGI (Common Gateway Interface) interface.
The latter allows you to automatically process the data.
For example, the server could create a database of information that is accessible to some of the clients. Another example is search pages such as Yahoo. They usually provide a form that allows you to create a query to search your own database. As a result, the user receives a response shortly after clicking on the corresponding button. He does not have to wait until the people responsible for maintaining this server read the data he specified and find the required information. All this is done automatically by the server itself. JavaScript doesn't allow you to do such things. You won't be able to create a book of reader reviews using JavaScript, since JavaScript is unable to write data to any file on the server. You can only do this through the CGI interface. Of course, you can create a review book for which users send information by email. However, in this case you must enter reviews manually. This can be done if you do not expect to receive 1000 reviews every day. The corresponding script will be

in plain text
HTML. And no JavaScript programming is needed here at all! Of course, except for the case if you need to check the data entered in the form before sending it - and here you really need JavaScript.
I should just add that the mailto command does not work everywhere - for example there is no support for it in
Microsoft Internet Explorer 3.0. Do you like this page?

Not at all.

A waste of time.

The worst site on the web. Parameter enctype="text/plain"

Using the focus() method you can make your form more user-friendly. So, you can choose which element will be highlighted first. Or you can tell the browser to highlight the form where incorrect data was entered. That is, the browser itself will place the cursor on the form element you specify, so that the user does not have to click on the form before entering anything there. You can do this using the following script fragment:

Function setfocus() ( document.first.text1.focus(); )

HTML forms are complex interface elements. They include various functional elements: input fields and lists, tooltips, etc. All form code is contained within the .

Most web form information is conveyed using the . To enter one line of text, the element is used; for multiple lines, the element is used. The element creates a dropdown list.

The element creates labels for form fields. There are two ways to group labels and fields. If the field is inside an element, then the for attribute does not need to be specified.

Last Name Last Name Last Name

Form fields can be divided into logical blocks using the element. Each section can be given a name using the element.

Contact Information Name Email
Rice. 1. Grouping form fields

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.

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.

To change the appearance text field When receiving focus, the focus pseudo-class is used. For example, you can make the background of the current field darker or add colored frame to make it stand out from the rest:

Input:focus ( background: #eaeaea; )

Another useful HTML5 attribute is the autofocus attribute. It allows you to automatically set focus to the desired initial field for elements and (only one element of each form).

HTML markup

Registration Name Gender male female E-mail Country Select country of residence Russia Ukraine Belarus Send

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

As you can see from the figure, each form element has default browser styles. Let's clear the styles and style the form elements.

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 ;

Form.php file

Note
In the $subject variable, specify the text that will be displayed as the title of the letter;
Your_name - here you can specify the name that will be displayed in the “from whom the letter is from” field;
replace your_site_url with the address of the site with the registration form;
replace your_email with your address Email;
$headers .= "Bcc: your_email". "\r\n"; sends bcc to your email address.