How to set up smartphones and PCs. Informational portal
  • home
  • Errors
  • Form description. Creating and working with forms in html

Form description. Creating and working with forms in html

05.11.2019 Errors

HTML tags that define HTML forms on the site

We create sites and individual pages on the Internet to communicate with visitors.

HTML forms are used to register visitors on the site, for interactive polls and polls, allow you to send messages, make purchases, and so on. Html The form is created with one purpose: collection and subsequent transfer of information for processing to a program script or by e-mail.

Sample HTML Form | Sign in

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, since it allows transferring large amounts of data.
  • action = "" - defines the url at which the data is sent for processing. In our case, enter_data.php ..
  • - define such form elements as buttons, radio buttons, text fields for data entry.
  • type = "text" - defines a text field for data entry.
  • type = "password" - defines a field for entering a password, while the text is displayed as asterisks or circles.
  • type = "checkbox" - defines a checkbox.
  • type = "hidden" - defines a hidden form element - used to send additional information to the server.
  • size = "25" - the length of the text field in characters.
  • maxlength = "30" - the maximum number of characters to be entered.
  • value = "" - defines the value that will be sent for processing if it refers to radiobutons 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.

Sample HTML Form | Comments on the site

Sample HTML form




Name



Mail

Tags, attributes and values

  • action = "http: //site/comments.php" - defines the url to which the data from the form will be sent.
  • id = "" - defines the name, identifier of the form element.
  • name = "" - defines the name of the form element.
  • - define a text field as part of a form.
  • cols = "" - defines the number of columns in the text field of the form.
  • rows = "" - defines the number of rows in the text field of the form.

If between put text, it will be shown inside the box as an example that is easy to remove.

Sample HTML Form | Drop-down list

HTML forms

Tags, attributes and values

  • - define a list with positions for selection.
  • size = "" - defines the number of visible list positions. If the value is 1, we are dealing with a dropdown list.
  • - define the positions (items) of the list.
  • value = "" - contains the value that will be sent by the form at the specified url for processing.
  • selected = "selected" - Selects the position of the list as an example.

Sample HTML Form | Scrolling list

By increasing the value of the size = "" attribute, we get a list with a scrollbar:

First position Second position Third position Fourth position

HTML forms

For this option, we use the multiple = "multiple" flag, which makes it possible to select several positions. His absence allows only one item to be selected.

  • type = "submit" - defines the button.
  • type = "reset" - defines the reset button.
  • value = "" - defines the label on the button.

    • See additionally:

    Description

    Tag

    sets up a form on a web page. The form is intended for the exchange of data between the user and the server. The scope of application of forms is not limited to sending data to the server; using client scripts, you can access any element of the form, modify it and apply it at your discretion.

    A document can contain any number of forms, but only one form can be sent to the server at a time. For this reason, form data must be independent of each other.

    To send the form to the server, use the Submit button, the same can be achieved by pressing the Enter key within the form. If the Submit button is not present on the form, the Enter key simulates its use.

    When the form is submitted to the server, control of the data is transferred to the program specified by the action attribute of the tag. ... The browser prepares the information in the form of a pair "name = value", where the name is determined by the name attribute of the tag and the value is entered by the user or set in the default form field. If the GET method is used to send data, then the address bar can take the following form.

    http: //www..cgi? nick =% C2% E0% ED% FF +% D8% E0% EF% EE% F7% EA% E8% ED & page = 5

    The parameters are listed after the question mark after the address of the CGI program and are separated by an ampersand (&) character. Non-Latin characters are converted to hexadecimal (in the form% HH, where HH is the hexadecimal code for the ASCII character value), space is replaced with a plus (+).

    Allowed inside the container place other tags, while the form itself is not displayed in any way on the web page, only its elements and the results of nested tags are visible.

    Syntax

    ...

    Attributes

    Sets the encoding in which the server can receive and process data. The address of the program or document that processes the form data. Enables autocompletion of form fields. A way to encode form data. HTTP protocol method. Form name. Cancels the built-in validation of the form data for correct input. The name of the window or frame where the handler will load the returned result.

    End tag

    Required.

    HTML5 IE Cr Op Sa Fx

    FORM tag

    How do you think the abbreviation "OS" stands for?

    Officers
    Operating system
    Big striped flies

    The result of this example is shown in Fig. one.

    Rice. 1. View of form elements in the browser window

    ... form content ...

  • It is just inside the form element that there should be controls, of which there can be as many as you like.

    • Form attributes:

    • The action attribute specifies the server file with the script responsible for the main processing of the data sent from the form. Usually the code of this file is written in a server-side programming language, for example, in the language 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 you should specify multipart / form-data.
    • The method attribute specifies and defines the form of data transmission. We will not dwell on this in detail, but it should be said that for a more reliable transfer, the post method should be specified.

    Html form elements

      <input type = "text" name = "login" size = "20" value = "(! LANG: Login" maxlength = "25" > !}

      Result:

      • The value of the type attribute - text - indicates that this is a text field
      • size - the size of the text field in characters
      • maxlength - the maximum number of characters that fit in the field
      • value - the original text in the text box
      • name - the name of the element, needed to process data in the handler file

      Result:


      Instead of text, a mask is displayed in the field - asterisks or circles

      <input type = "submit" value = "Send data">

      Result:

      The submit button collects all user input from the form and submits it to the address specified in the form's action attribute.

      <input type = "reset" value = "(! LANG: Clear form" > !}

      Result:

      The button returns the state of all controls to their original state (clears the form)

      <input type = "checkbox" name = "asp" value = "(! LANG: yes" > !} ASP<br> <input type = "checkbox" name = "js" value = "(! LANG: yes" checked = "checked" > !} javascript<br> <input type = "checkbox" name = "php" value = "(! LANG: yes" > !} PHP<br> <input type = "checkbox" name = "html" value = "(! LANG: yes" checked = "checked" > !} Html<br>

      ASP
      javascript
      PHP
      Html


      Result:

      ASP
      javascript
      PHP
      Html

      In html, the checkbox is used to organize multiple selection, i.e. when it is necessary and possible to choose several answer options

      <input type = "radio" name = "book" value = "(! LANG: asp" > !} ASP<br> <input type = "radio" name = "book" value = "(! LANG: js" > !} Javascript<br> <input type = "radio" name = "book" value = "(! LANG: php" > !} PHP<br> <input type = "radio" name = "book" value = "(! LANG: html" checked = "checked" > !} Html<br>

      ASP
      Javascript
      PHP
      Html

      Result:

      ASP
      Javascript
      PHP
      Html

      radio button html serves for a single selection from several options

      The checked attribute sets the element immediately checked

    Important: For items radio it is necessary that the value of the attribute name all elements in the group had the same: in this case, the elements will work interconnected, when one element is turned on, the others will be turned off

    Dropdown HTML

    Let's look at an example of adding a dropdown list:

    1 2 3 4 5 6 <select name = "book" size = "1"> <option value = "(! LANG: asp" > !} ASP</ option> <option value = "(! LANG: js" > !} JavaScript</ option> <option value = "(! LANG: php" > !} PHP</ option> <option value = "(! LANG: 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 "one" indicates that the collapsed list displays one item, the rest are opened by clicking on the menu arrow
    • The selected attribute of the (option) item indicates that this particular item will be initially visible, and the rest of the items are "collapsed"

    For large and complex lists, there is an option add subheadings- the optgroup tag with the label attribute (label):

    1 2 3 4 5 6 7 8 9 10 11 12 <select name = "book" size = "1"> <optgroup label = "English"> <option value = "(! LANG: asp" > !} ASP</ option> <option value = "(! LANG: js" > !} JavaScript</ option> <option value = "(! LANG: php" > !} PHP</ option> <option value = "(! LANG: html" selected = "selected" > !} Html</ option> </ optgroup> <optgroup label = "Russians"> <option value = "(! LANG: asp_rus" > !} ASP in Russian</ option> <option value = "(! LANG: js_rus" > !} JavaScript in Russian</ option> </ optgroup> </ select>


    To provide an opportunity select multiple items at the same time the multiple attribute must be added. But in this case, the size attribute should be set to a value greater than 1:

    Result:

    • The width of the element depends on the cols attribute, which specifies how many characters fit horizontally
    • The rows attribute determines the number of rows in an element

    Other elements

    Additional elements and attributes

    • For controls radio and checkbox it is convenient to use additional elements, which, firstly, make the text anchor to the radio or checkbox element itself, and secondly, add a stroke on click:
      • <input type = "checkbox" id = "book1"> <label for = "book1"> ASP</ label>

      In the example, a caption (label tag) has been created for the checkbox element. 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 block an element, making it unavailable for user modification:
      • <input type = "text" name = "login" size = "20" value = "(! LANG: Login" maxlength = "25" disabled = "disabled" >!}
      <input type = "checkbox" name = "asp" value = "(! LANG: yes" > !} ASP<br> <input type = "checkbox" name = "js" value = "(! LANG: yes" checked = "checked" disabled = "disabled" > !} javascript<br>


      ASP
      javascript

    HTML Forms are controls that are used to collect information from website visitors.

    Web forms are made up of a collection of text boxes, buttons, lists, and other controls that are clickable. Technically, forms transfer data from a user to a remote server.

    To receive and process form data, web programming languages ​​are used, such as PHP, Perl.

    Before HTML5, web forms were a collection of multiple elements. , ending with a button ... It took a lot of effort to style the forms in different browsers. In addition, forms required JavaScript to validate input, and were stripped of specific input field types for specifying day-to-day information such as dates, email addresses, and URLs.

    HTML5 forms solved most of these common problems by introducing new attributes, providing the ability to change the appearance of form elements by CSS3.

    Rice. 1. Improved web forms with HTML5

    HTML5 Form Creation

    1. Element

    Any form is based on an element ...... It does not provide for data entry, as it is a container, holding together all the form controls - fields... The attributes of this element contain information that is common to all form fields, so you need to include logically combined fields in one form.

    Table 1. Tag Attributes
    Attribute Meaning / Description
    accept-charset The attribute value is a space delimited character encoding list to be used to submit the form, for example .
    action Required Attribute which specifies the url of the form handler on the server to which the data is passed. It is a file (for example, action.php) that describes what to do with the form data. If the attribute value is not specified, then after page reload the form elements will take their default values.
    If all the work will be performed on the client side by JavaScript scripts, then the value # can be specified for the action attribute.
    You can also make sure that the form filled out by the visitor arrives in your mail. To do this, you need to make the following entry:
    autocomplete

    enctype Used to indicate MIME-type of data sent with the form, for example, enctype = "multipart / form-data". Specified only if method = "post".
    application / x-www-form-urlencoded is the default content type, indicating that the submitted data is a list of URL-encoded form variables. Space characters (ASCII 32) will be encoded as +, and special characters such as! will be encoded in hex as% 21.
    multipart / form-data - used to submit forms containing files, non-ASCII data and binary data, consists of several parts, each of which represents the content of an individual form element.
    text / plain - indicates that plain (not html) text is transmitted.
    method Specifies how form data is passed.
    The get method passes data to the server through the browser address bar. When generating a request to the server, all variables and their values ​​form a sequence like www.anysite.ru/form.php?var1=1&var2=2. Variable names and values ​​are appended to the server address after the? and are separated by the & sign. All special characters and letters other than Latin are encoded in the% nn format, the space is replaced by +. This method should be used if you are not transferring large amounts of information. If you intend to send a file along with the form, this method will not work.
    The post method is used to send large amounts of data, as well as confidential information and passwords. The data sent using this method is not visible in the URL header because it is contained in the body of the message.
    name Sets form name to be used to access form elements through scripts, for example name = "opros".
    novalidate Disables validation on the button for submitting the form. The attribute is used without specifying a value
    target Specifies the window to which information will be directed:
    _blank - new window
    _self - the same frame
    _parent - the parent frame (if it exists, if not, then to the current one)
    _top is the top-level window in relation to this frame. If the call is not from a child frame, then to the same frame.

    2. Grouping form elements

    Element

    ...
    is intended for grouping elements related to each other, thus dividing the form into logical fragments.

    Each group of elements can be named using the element that follows the tag

    ... The group name appears on the left in the upper border
    ... For example, if the element
    contact information is stored:

    Contact Information


    Rice. 2. Grouping form elements using

    Table 2. Attributes of the tag
    Attribute Meaning / Description
    disabled If the attribute is present, then a group of related form elements that are inside the container
    disabled for filling and editing. Used to restrict access to some form fields containing previously entered data. The attribute is used without specifying a value -
    .
    form
    in the same document. Indicates one or more shapes to which this group of elements belongs. The attribute is currently not supported by any browser.
    name Defines name to be used to reference elements in JavaScript, or to reference form data after the form has been filled out and submitted. Analogous to the id attribute.

    3. Create form fields

    Element creates most of the form fields. Element attributes differ depending on the type of field that the element is used to create.

    Using css styles, you can change the font size, font type, color and other properties of the text, as well as add borders, background color and background image. The width of the field is set by the width property.

    Table 3. Tag Attributes
    Attribute Meaning / Description
    accept Specifies the type of file allowed to be sent to the server. Indicated only for ... Possible values:
    file_extension - allows uploading files with the specified extension, for example, accept = ". gif", accept = ". pdf", accept = ". doc"
    audio / * - allows downloading audio files
    video / * - allows uploading video files
    image / * - allows uploading images
    media_type - indicates the media type of the uploaded files.
    alt Defines alternative text for images, indicated only for .
    autocomplete Responsible for memorizing the values ​​entered into the text field and auto-substituting them on subsequent input:
    on - means that the field is not protected, and its value can be stored and retrieved,
    off - disables autocomplete for form fields.
    autofocus Allows you to make sure that in the loaded form this or that input field already has focus (has been selected), being ready to enter a value.
    checked The attribute checks if the checkbox is checked by default on page load for fields of type type = "checkbox" and type = "radio".
    disabled
    form The attribute value must be equal to the id attribute of the element in the same document. Specifies one or more forms to which this form field belongs.
    formaction Sets the url of the file that will process the data entered into the fields when the form is submitted. It is set only for fields of type type = "submit" and type = "image". This attribute overrides the value of the action attribute of the form itself.
    formenctype Determines how the form field data will be encoded when it is sent to the server. Overrides the value of the enctype attribute of the form. It is set only for fields of type type = "submit" and type = "image". The options are:
    application / -x-www-form-urlencoded is the default. All characters are encoded before sending (spaces are replaced with +, special characters are converted to ASCII HEX values)
    multipart / form-data - characters are not encoded
    text / plain - spaces are replaced with the + character, and special characters are not encoded.
    formmethod The attribute specifies the method that the browser will use to submit form data to the server. It is set only for fields of type type = "submit" and type = "image". Overrides the value of the method attribute of the form. The options are:
    get is the default. The data from the form (name / value pair) is appended to the url and sent to the server: url? Name = value & name = value
    post - Form data is sent as an http request.
    formnovalidate Specifies that the form field data should not be validated when the form is submitted. Overrides the value of the novalidate attribute of the form. Can be used without specifying an attribute value.
    formtarget Determines where to display the response received after the form has been submitted. It is set only for fields of type type = "submit" and type = "image". Overrides the value of the target attribute of the form.


    _parent - Loads the response to the parent frame
    _top - loads the response in full screen
    framename - Loads the response into a frame with the specified name.
    height The attribute value contains the number of pixels without specifying a unit. Sets the height of a form field of type type = "image", for example ... It is recommended to set both the height and the width of the field at the same time.
    list Is a reference to an item , contains its id. Allows you to provide the user with several options to choose from when he begins to enter a value in the corresponding field.
    max Allows you to limit the allowed numeric data input to the maximum value; the attribute value can contain an integer or fractional number. It is recommended to use this attribute in conjunction with the min attribute. Works with the following field types: number, range, date, datetime, datetime-local, month, time, and week.
    maxlength The attribute specifies the maximum number of characters that can be entered in the field. The default is 524288 characters.
    min Allows you to restrict valid numeric input to the minimum value.
    multiple Allows the user to enter multiple attribute values, separated by a comma. Applies to files and email addresses. Specified without an attribute value.
    name Specifies the name that will be used to access the element for example in css stylesheets. Analogous to the id attribute.
    pattern Allows you to define using regular expression the syntax of the data that must be allowed in a specific field. For example, pattern = "(3) - (3)" - square brackets set the range of valid characters, in this case - any lowercase letters, the number in curly braces indicates that three lowercase letters are needed, followed by a dash, then three digits in the range from 0 to 9.
    placeholder Contains the text that is displayed in the input field before filling (most often it is a hint).
    readonly It does not allow the user to change the values ​​of form elements, while selection and copying of text is available. Specified without an attribute value.
    required Displays a message stating that this field is required. If the user attempts to submit the form without entering the required value in this field, a warning message will be displayed on the screen. Specified without an attribute value.
    size Specifies the apparent width of the margin, in characters. The default is 20. Works with the following field types: text, search, tel, url, email, and password.
    src Specifies the url of an image to use as a button for submitting form data. Specified only for the field .
    step Used for items that require numeric input, indicates the amount of increase or decrease in values ​​during range adjustment (step).
    type button - creates a button.
    checkbox - turns the input field into a checkbox that can be checked or cleared, for example
    I have a car
    color - Generates color pickers in supporting browsers, giving users the ability to select color values ​​in hexadecimal format.
    date - allows you to enter a date in the format dd.mm.yyyy.
    Birthday:
    datetime-local - allows you to enter the date and time, separated by an uppercase English letter T according to the pattern dd.mm.yyyy hh: mm.
    Birthday - day and time:
    email - browsers that support this attribute will expect the user to enter data that matches the syntax of email addresses.
    Email:
    file - allows you to upload files from the user's computer.
    Select a file:
    hidden - Hides a control that is not visible to the browser and prevents the user from changing the default values.
    image - creates a button, allowing you to insert an image instead of the text on the button.
    month - Allows the user to enter the year and month using the pattern yyyy-mm.
    number - intended for entering integer values. Its min, max, and step attributes set the upper, lower, and spacing values, respectively. These attributes are assumed for all items that have numeric values. Their default values ​​depend on the element type.
    Indicate the quantity (from 1 to 5):
    password - creates text fields in the form, while the characters entered by the user are replaced with asterisks, bullets, or other icons set by the browser.
    Enter password:
    radio - creates a radio button - a control in the form of a small circle that can be turned on or off.
    Vegetarian:
    range - will allow you to create an interface element such as a slider, min / max - will allow you to set the selection range
    reset - creates a button that clears the form fields from user-entered data.
    search - denotes a search field, by default the input field is rectangular.
    Search:
    submit - Creates a standard clickable button. The button collects information from the form and submits it for processing.
    text - Creates text boxes on a form, outputting a one-line text box for entering text.
    time - allows you to enter time in 24-hour format using the hh: mm template. In supporting browsers, it appears as a numeric input control with a mouse-clickable value and only accepts time values.
    Specify the time:
    url - the field is intended for specifying URL addresses.
    Main page:
    week - The appropriate pointer tool allows the user to select one week of the year, and then provides data entry in nn-yyyy format. Depending on the year, the number of weeks can be 52 or 53.
    Indicate the week:
    value Specifies the text displayed on a button, in a box, or associated text. Not specified for fields of type file.
    width The attribute value contains the number of pixels. Allows you to set the width of the form fields.

    4. Text input fields

    Element used instead of element when you need to create large text boxes. The text displayed as the original value is placed inside the tag. The dimensions of the field are set using the cols attributes - the horizontal dimensions, rows - the vertical dimensions. The height of the field can be set with the height property. All sizes are calculated based on the size of one monospaced font character.

    Table 4. Tag Attributes

    7. Buttons

    Element creates clickable buttons. Unlike buttons created ( , , , ), inside the element .

    Buttons allow users to submit data to a form, clear the content of a form, or take some other action. You can create borders, change the background, and align the text on the button.

    Table 9. Tag Attributes
    Attribute Meaning / Description
    autofocus Sets focus to a button on page load.
    disabled Disables the button, making it non-clickable.
    form Indicates one or more forms to which this button belongs. The attribute value is the identifier of the corresponding form.
    formaction The attribute value contains the url of the handler for the form data sent when the button is clicked. Only for a button of type type = "submit". Overrides the value of the action attribute specified for the element .
    formenctype Specifies the type of encoding of the form data before it is submitted to the server when buttons of type type = "submit" are clicked. Overrides the value of the enctype attribute specified for the element ... Possible values:
    application / x-www-form-urlencoded is the default. All characters will be encoded before sending.
    multipart / form-data - characters are not encoded. Used when files are uploaded using a form.
    text / plain - characters are not encoded and spaces are replaced with the + character.
    formmethod The attribute defines the method that the browser will use to submit the form. Overrides the value of the method attribute specified on the element ... It is specified only for buttons of type type = "submit". Possible values:
    get - data from the form (name / value pair) is added to the url and sent to the server. This method has restrictions on the size of the sent data and is not suitable for sending passwords and confidential information.
    post - data from the form is added as an http request. The method is more reliable and safer than get and has no size limit.
    formnovalidate The attribute specifies that form data should not be validated upon submission. It is specified only for buttons of type type = "submit".
    formtarget The attribute specifies in which window to display the result after submitting the form. It is specified only for buttons of type type = "submit". Overrides the value of the target attribute specified for the element .
    _blank - loads the response into a new window / tab
    _self - loads the response into the same window (default)
    _parent - Loads the response to the parent frame
    _top - loads the response in full screen
    framename - Loads the response into a frame with the specified name.
    name Specifies the name of the button, the attribute value is text. Used to link to form data after the form has been submitted, or to link to a given button (s) in JavaScript.
    type Defines the type of the button. Possible values:
    button - clickable button
    reset - reset button, returns the original value
    submit - a button for submitting form data.
    value Sets the default value sent when the button is clicked.

    8. Checkboxes and radio buttons in forms

    Checkboxes in forms are set using the construction and the switch with .

    In contrast to radio buttons, several checkboxes can be set in one form. If the checked attribute is specified for the checkboxes, then when the page is loaded, the checkboxes will already be checked on the corresponding form fields.

    Element

    In the process of navigating through the sites, the user basically only clicks on links to navigate web pages.

    But it is clear that the user sometimes needs to provide their own input fields... These types of interactions include:

    • registration and login on sites;
    • entering personal information (name, address, credit card details, etc.);
    • content filtering (using drop-down lists, checkboxes, etc.);
    • performing a search;
    • uploading files.

    To accommodate these needs, HTML offers interactive controls forms:

    • text fields (for one or more lines);
    • switches;
    • checkboxes;
    • drop-down lists;
    • download widgets;
    • submit buttons.

    These controls involve different tags HTML, but most of them use the tag ... Since it is a self-closing element, the type of the field is determined by its type attribute:

    Element

    is a block element that defines interactive part of a web page. As a result, all controls (such as ,