Front-end development HTML5-- form tag

Form Introduction

  Form form is mainly used for the user to interact with the Web application data, which allows users to send data to web applications, web pages can intercept transmitted data for their own use. to form a plurality of generally by the form elements, which form elements are single-line / multiple-line text boxes, drop-down menus, buttons, check boxes, radio buttons, generally with the time when the tag label form element, is used to describe an object . Properties which can be used as follows. 

     action for the address of the application processing the form information.

     method that the browser uses HTTP form submission method.

      Http get corresponding to the GET method protocol, the form data is added to the URI, using the "?" Separated 

      Http POST method corresponding to the post protocol, form data contained in the body portion of the HTTP protocol request packets.

    Name name set form

    target represents a browser receives a response to the display where the information submitted by the form.

       _self, _blank, _parent, _top these same values ​​and hyperlinks

Form data content type

  Form data is set by the content type attribute enctype

    1. application/x-www-form-urlencoded

      To use all the characters (default) before sending coding method:

      1) the names and values ​​of the controls are escaped whitespace characters using [+] replaced reserved characters are generally used for a specific purpose, such as (:? /; @ = & Etc.). Non-numeric and alphabetic characters using the% HH (where HH represents two hexadecimal digits, representing the ASCII code of the character) conversion,

      2) control the "Name / Value" pair listed in the order they appear in the data stream to the document. Use & spaced between the "Name", "value" using "=" split, two "name / value."

    2. multipart/form-data

      Not the character encoding. When using file upload control that contains the form [], you must use this value. Data is divided into a plurality of portions, each representative of a structure well control, as part of the document data stream, each section are sequentially sent to the server in the order they appear in the document data stream, and each of the boundary portions is not It will appear in the data. Each section has a title of the first content-desposition, its value format is: Content-Disposition: form-data; name = "myControl"

    3. text/plain

      Spaces converted to "+" plus, but not a special character encoding.

Form component input

  input component for receiving data from the user, which can be used following properties

    1, type setting module for Type

        text-line text box

        password Password box, enter the content will be blocked.

        checkbox box, must be used to describe the property value of the component values ​​submitted using the checked property selected by default.

        radio radio button must be used to describe the property value of the component values ​​submitted using the checked property selected by default. A radio button group all components should have the same name value, so that each time only one component selected in button group

        submit submit button

        reset reset button

        file File button, select the component for a file in the file system

        hidden hidden field, the component does not appear on the page, but its value will be submitted.

        image image button src must be used to load images, use the alt statement to replace the text.

        button push button

    2, name component type for setting

    3, value for setting initialization optional.     

    4, checked radio buttons, check boxes selected by default properties

    5, disabled disable components, disabling component values ​​can not be submitted

    6, size the initial width of the control current, the width in pixels. Unless the control type is text, password, time width is an integer value representing the number of characters, the default is 20

    7, maxlength specifies the maximum value that can be entered characters. Suitable for the control of type text, password.

  fieldset component for grouping a plurality of tags and controls a web form

    Child element 1, disabled disabled filedset element, the property will be affected by the fieldset

    2, the name of the name fieldset element

    fieldset title by label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>Title</legend>
            <input type="radio" id="radio">
            <label for="radio">click me</label>
        </fieldset>
    </form>
</body>
</html>

  input / button button assembly for receiving data from the user, which can be used following properties

    Button control

    1, input the type specified control type

      button,submit,reset

    2, input the name button names.

    3, the value of the associated input value button will be submitted along with the value of name

  label assembly for indicating the title of a form assembly which can be used following properties

    1 is consistent, for a form for assembly with the header setting value ID, code examples above are

  select components for indicating the drop-down list or lists, which can be used following properties

    . 1, multiple specified control type Boolean value indicating whether multiple selection is allowed, if the select element does not contain the property size and properties of multiple, form type is displayed as a menu (combo box), any If the attribute size and attribute multiple of one form type is displayed as a list box.

    2, the number of lines to be represented when the size of the display can scroll through a list of when, size indicates the number of rows displayed simultaneously. The default value is 0. It represents a non-list display

    3, disabled disable components, disabling component values ​​can not be submitted

    4, name specifies the name of the assembly, value and its value option key sub-element composition to form data together with the others is submitted

  option assembly for indicating options, often include <select>, <optgroup>, which is available in the following properties

    1, disabled disable components, disabling component values ​​can not be submitted

    2, define the initial value of the control value. When the form is submitted, the initial value will be submitted to the server.

    3, selected indicates that the option is selected by default

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="address" id="">
            <option value="北京" disabled><>the Option</Beijing
            option value="上海" selected>上海</option>
            <option value="广州">广州</option>
        </select>
    </form>
</body>
</html>

 

Guess you like

Origin www.cnblogs.com/aitiknowledge/p/11498410.html