• Creating a form in HTML. CSS forms How to make forms in html

    I am absolutely sure that while running around the Internet, you have come across various forms, for example, a registration form, a login form, a feedback form and many, many others. HTML forms.

    Actually, a form consists of various input elements: text fields, text areas, radio buttons, radio buttons, buttons, and so on.

    And in this article you will learn how to create absolutely any .

    First create a simple one HTML page, to which add a container (tag

    ), aligning its contents to the center. I hope you can cope with this without difficulty.

    Now let's take a look at the form. The form starts with a tag

    , accordingly, ends with the closing tag
    . This tag has several attributes that are highly desirable to fill out. But first, let's create a simple form with tag attributes
    so that you can understand the purpose of each of them more clearly:


    Here we begin a description of the form, which has the following attributes:

    1) Attribute " name". The value of this attribute means the name HTML forms. The question arises, why is this necessary? The answer is very simple: if you use not one form, but several, then in order to distinguish one form from another, you need to set different names. And the names themselves are needed in order to access forms, for example, through JavaScript. I’ll tell you a little secret, which I don’t advise you to use, but for the sake of honesty, I’ll tell you about it. In fact, forms can be easily distinguished without names, so, generally speaking, a form name is not necessary at all. But I STRONGLY I recommend giving the forms names, because it will be easier for you to understand what each form is responsible for.

    2) Attribute " action". The value of this attribute is responsible for the path to the script file that will process the form. That is, it is not enough to enter data into the form, they still need to be processed accordingly, and this is exactly the path to this handler file and is found in the attribute value " action".

    3) Attribute " method". It can have one of two very popular meanings: " post" And " get". This attribute determines the sending method. I will not go into details, I’ll just say that the first method is a hidden sending of data, and the second is an open one. To make it even clearer, let’s look at two transition addresses:

    A) http://mysite.ru/scipt/request.php

    b) http://mysite.ru/script/request.php?a=7&b=Michael

    In the first case, the user does not see what he is sending (method " post"), and in the second he actually sees the names of the variables and their values ​​(method " get"). At the end of the article, you can try to submit the form using two different methods and make sure they are different. But for now I will say that MUCH the method is more often used post", that is, a hidden sending.

    This was a description of the form itself, and now you can start adding elements to the form.

    The first thing we'll add is a text field. Adding a text field using a tag , or rather using the attribute of this tag " type"with meaning" text". Also, before creating a text field, it is recommended to write what kind of field it is, for example, " your name". Inside the tag

    write this line:

    Your name:

    Again, let's break down the attributes:

    1) Attribute " type" is responsible for the type of the input element. In this case, we indicated that this is a regular text field. In the following elements we will change the value of this attribute.

    2) Attribute " name" is responsible for the name of the element. Here we indicated that the name of this field firstname.

    3) Attribute " value" is responsible for the default value of this field.

    As they say, it is better to see once than to hear a hundred times, so you better dial ( Moreover, just type it, and don’t copy it!) this text in the editor, and then look at the result in the browser.

    Now let's create another similar field, but not for entering regular characters, but for entering a password. That is, everything should be the same, but only the text should be hidden behind asterisks. Therefore, moving to the next line (tag
    ), let's write the following code:

    Your password:

    As you can see, now the value of the attribute " type" is " password". The remaining attributes are the same as for a regular text field.

    The next element is a dropdown list. It is created a little more complicated, since here it is necessary not only to declare the creation of a drop-down list, but also to add elements to this list. Let's write, moving to the next line (I won't mention this further) the following HTML code.

    Select an option:

    Tag . Attribute " name" is clear because I have already explained it several times. List items are created using the tag . Attribute value " value" means what value the variable will have choice(for example, in JavaScript), that is, either choice = 1, or choice = 2, or choice = 3. Immediately after the end of the tag description what the user sees in the drop-down list is put. Again, it’s better to look in the browser, and everything will immediately become clear to you.

    Now let's add a text area using the tag

    Here we are creating a text area with a height of 10 strings (attribute value " rows") and a width of 15 characters (attribute value " cols").

    Within this paired tag, the text in the default text area is specified. Actually, there is nothing more to say here. Let's move on.

    The next element is a radio button. A radio button is a set of such " circles", from which you can select only one. Radio buttons are created using HTML tag , or, more precisely, using the value " radio"attribute" type". Let's write something like this HTML code:

    Choose one:
    Option 1
    Option 2
    Option 3

    Here I will focus on the attribute " name", because in addition to setting a name, it has another very important feature. If you NOT If you make the names of these three radio buttons the same, they will become independent, and, therefore, you can select several options at once. To make sure of this, change the names, and then try to select several options at once, and you will immediately be convinced of my words. Therefore, one group of radio buttons must have the same attribute value " name".attribute" value" means the value of the variable " choiceradio" (again, for example, in JavaScript). Immediately after the tag description there is a text that the user will see next to the corresponding radio button.

    Another element of the form are switches ( checkbox). They are created again using the tag . Let's write the following lines:

    You agree to our rules:

    I think everything is transparent here, so I won’t explain. I advise you to just look at what it looks like in a browser. And I will say that if the checkbox is checked, then the value of the variable " terms" will " yes", if it does not stand, then the value of this variable will be "", that is, an empty string.

    Another element is the file selection field. Surely, you have ever uploaded files to a server and you often had to use the file name insertion field to do this. This field is created using the already boring tag . Let's write it like this:

    Select file to download:

    2018-06-28


    Creating HTML Forms

    Hello dear visitor!

    In the previous sections, we created the main elements of the site, and also considered issues related to filling the content. And now we can move on to the next rather important and extensive topic - working with HTML forms.

    HTML forms are the most important interaction elements that define the interactive part of a web page. Without which no full-fledged website can do. After all, it is with their help that the main exchange is carried out between the user and the server side.

    But at the same time, forms are quite complex interface elements, with a wide variety of functional components and text fields. Therefore, in this section we will try to consider its main elements in more detail, paying special attention to their practical application in the website being created.

    Moreover, issues of working with the MySQL database will also be touched upon here. Since the use of forms in our examples will be inextricably linked with their interaction with database tables. In which the data entered by users will be stored, which will be used later by the server when processing requests.

    • About HTML forms in general
    • online order form
    • Authorization form
    • feedback form

    About HTML forms in general

    A form on a web page is set by a block element , which is a container that includes all the elements responsible for processing data input, such as ,

    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

    Nowadays, almost no website can do without interface elements such as text input fields, buttons, switches and checkboxes. They are necessary for user interaction so that he can search the site using keywords, write comments, answer surveys, attach photos and do many other similar things. It is the forms that ensure that data is received from the user and transferred to the server, where it is already analyzed and processed. So if you are planning to do something similar on the site, you will not be able to implement it without forms.

    The form itself is created using the tag , which can contain any necessary tags, and is characterized by the following optional parameters:

    1. the address of the program on the web server that will process the contents of the form data;
    2. form elements, which are standard fields for user input;
    3. button to send data to the server.

    It is allowed to use several forms on a page, but they should not be nested inside one another (example 1).

    Example 1: Erroneous use of forms

    HTML5 IE Cr Op Sa Fx

    Forms

    Before sending data, the browser prepares the information as a name=value pair, where the name is determined by the name attribute of the tag or other valid tag in the form, and the value is entered by the user or set to the default form field. After the user clicks the Submit button, the form handler is called, which receives the information entered in the form, and then does with it what the developer intends. The form handler is usually a program specified by the action attribute of the tag.

    . The program can be written in any server language like PHP, Python, C#, etc.

    It often happens that the current page written, say, in PHP, is itself a form handler; in this case, you can specify an empty value for the action attribute or omit it altogether. In the simplest case, the tag does not contain any attributes and is presented in example 2.

    Example 2: Simple form

    HTML5 IE Cr Op Sa Fx

    Forms

    You can also specify an email address as the action attribute value, starting with the mailto: keyword. When you submit the form, your default email program will be launched. For security reasons, the browser is set to prevent the information entered in the form from being sent by mail discreetly. To correctly interpret the data, use the enctype attribute with the text/plain value in the tag

    (example 3).

    Example 3: Sending a form by mail

    HTML5 IE Cr Op Sa Fx

    Forms

    Browsers have problems working with this code. Firefox will offer a list of suitable applications for sending mail (Fig. 1), Internet Explorer will display a warning (Fig. 2) and try to launch the program associated with mail, Opera, like Firefox, will offer a list of options suitable for sending mail (Fig. 3).

    Rice. 1. Launch the application in Firefox

    Rice. 2. Internet Explorer Warning

    Rice. 3. Selecting a program in Opera

    Read more: