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
post Http protocol corresponding to the POST method, the form data contained in the body portion of the HTTP protocol request packets.
name the name of the form set
target represents the information submitted after the browser receives the response form is displayed where.
_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 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, the contents of the input 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 button group
submit submit button
reset button to reset the
file File button, the assembly for the selected file system a file
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
web前端开发学习Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<!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 option sub-element value of its composition with the other key of the form data is submitted together
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>北京</option>
<option value="上海" selected>上海</option>
<option value="广州">广州</option>
</select>
</form>
</body>
</html>optgroup assembly option group option for indicating, often contained in a <select>, which is available in the following properties
1, disabled disable components, disabling component values can not be submitted
2, label indicates the name of the option group
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="">
<optgroup label="广东省">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</optgroup>
<optgroup label="江苏省">
<option value="苏州">苏州</option>
<option value="盐城">盐城</option>
</optgroup>
</select>
</form>
</body>
</html>textarea component used to represent multi-line text boxes, there is no attribute value, which value is included which can be used as attributes in the tag
1, rows defined number of lines of the text box
2, cols number of columns defined in the text box
3, warp indicates whether Wrap
• off not wrap
• hard Automatic hard carriage return, line feed elements together is transferred to the server
• soft automatic soft carriage return, line feed element is not transmitted to the server
4, disabled disable components, disabling component values can not be submitted
5, readonly indicates that the component read-only, its value will still be submitted
6, name is used to specify the name of the component, will be submitted to the background along with its value
New Form component
progress component attribute indicates the completion of a task, which can be used commonly in the progress bar below
1, max paced work elements required tasks, the default value is 1
2, value defined amount of work has been completed, if the max value is 1, this value must be between a decimal between 0 and 1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<progress value="70" max="100"></progress>
</form>
</body>
</html>output component for representing the results generated by user actions which following properties are available
1, name name defined elements
2, for id list of other elements, provided that these elements to compute an input value (or other effects).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50">+
<input type="number" name="a" value="10">=
<output name="result"></output>
</form>
</body>
</html>The meter element represents the number of values within a predetermined range. There is a similar effect presented a progress bar
For example: disk usage, voter turnout a proportion of the total number of candidates to vote, etc.
1, value: element specifically represented in actual value between min and max, if not specified, the default value is 1
2, min: minimum value specifying a predetermined range to allow the use of default is zero
3, max: maximum value of the allowable range is specified using a predetermined default is 1
4, low: the lower limit of the predetermined range must be less than or equal to the high value of the property
5, high: the upper limit of the predetermined range (indicative of a higher risk of the mean)
6, optimum: best value
web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>He got a <meter low="69" high="80" max="100" value="70">B</meter>on this exam</p>
</body>
</html>datalist assembly showing another value of the control available, the value of which is present as a child element by datalist <option>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label for=""> choose a browser from this list:</label>
<input type="text" name="myBrowser" list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
</body>
</html>New Form Properties
type: In the H5, the type of input has been extended, you can have more value
1, date control date (year, month, day, time is not included)
2, datetime-local date time control
3, time time controls
4, month date plug-ins (year, month)
5, week plug-in date (year, week), Note: The above can only be chrome, opera support
6, number of digital control (only numbers)
7, range control range (the value can be adjusted by controlling the strip)
8, search search control,
9, tel phone controls
10, url address control
11, color color controls
12, email email controls