The HTML form is used to receive different types of user inputs. When the user submits the form, transmits data to the server to realize the interaction between the user and the web server.
2. The working mechanism of the form 3. Form definition (<FORM> </Form> tags)The HTML form is a area containing the unit unit element. The form is created using the <FORM> tag. Forms can include INPUT elements, such as text fields, check boxes, single -selection boxes, submission buttons, and so on. The forms can also contain Menus, Textarea, FieldSet, Legend and Label elements. Note that the <FORM> element is a block -level element, which will produce a discount before and after.
<FORM ACTION = LOGIN.DO METHOD = Post> <!-Form elements here-> </form>4. Form attribute
ACTION: See where the form data is sent when the form is submitted. Action is: First, a URL (absolute URL/relative url), generally points to a program at the server, the program receives the data (ie, the element value of the table unit) submitted by the form for corresponding processing. For example, <FORM ACTION = http://www.xxx.com/login.do>, when the user submits this form, the server will execute the general website http://www.xxx.com/ general Process program. Second, use the URL address of the Mailto protocol, so as to send the form content in the form of email. This situation is rare, because it requires the visitor to install and correctly set the mail sending program on the computer's computer. Third, empty value, if ACTION is empty or not written, it means submitted to the current page.
Method: This attribute defines the way the browser submits the data in the form to the server processing program. Regarding the value of Method, the most commonly used is get and post. First, submit the form data with GET mode. The web browser will attach the format elements and data of each form and its data in accordance with the URL address specified by the ACTION attribute of the <Form> label in the URL parameter format; Limit, the amount of data transmitted by get is generally limited below 1kb. Second, using the POST method, the browser will send the form data as part of the HTTP request body to the server. Generally speaking, the data transmitted by the POST method is greater than the amount of data transmitted by the GET method; according to the HTML standard, if the server program of the format of the form does not change the data stored on the server, the GET method (such as query) should be used. If the results of the form processing will cause changes in the data stored on the server, the post method (such as adding, deletion and modification operation) should be adopted. Third, other methods (Head, Put, Delete, Trace or Options, etc.). In fact, the initial HTTP standard specified the corresponding Method for various operations, but many of them were not observed later. In most cases, it was only OK to use GET or Post.
Target: Where does this attribute specify the result of the URL returned by the URL specified in the action attribute. Values are _blank (open in the new window), _ Sel (open in the same framework, default value), _Parent (open in the parent frame), _ top (open in the entire window) and framename (in the specified framework frame Open in China).
Title: Set the text displayed by a small buoy when the mouse of the website visitors is placed on any position on the form.
Enctype: It specifies how to encode the form data before sending to the server. Value: The default value is the Application/X-WWW-Form-Urlencoded. Before sending to the server, all characters are encoded (the space is converted to+ increase number, the special symbol is converted to ASCII hex value); Multippart/Form-Data: No character code. When using a form containing a file upload control, this value must be used.
name: The name of the form. Note that the difference between the ID attribute: name attribute is the name used during communication with the server; and the ID attribute is the name used by the browser side. This attribute is mainly used for facilitation of client programming and used in CSS and JavaScript.
2. Table unit element 1. Single text box <input type = text/> (the default value of the type property of input is Text)<input type = text name = name/>
The following is the main attribute of the single -line text box:
<input type = password name = name/>3. Single button <input type = radio/>
How to use: Use a single -selection button with the same name of name. Different RADIO sets different value values, so that you can know who has been selected by taking the value of specified name without a separate judgment. The elemental value of the radio button is explicitly set by the value attribute. When the form is submitted, the value and name of the selected item are packed and sent, and the value is not displayed.
<input type = radio name = gender value = male/> <input type = radio name = gender value = female/>4. Checking box <input Type = Checkbox/>
Use the check button group, that is, the same set of check buttons with the same name, the element value of the element of the check button table unit is explicitly set by the value attribute. When the expression is submitted, all the selected value and name are packaged and sent to the Value. Essence复选框的checked属性表示是否被选中，<input type=checkbox checked />或者<input type=checkbox checked=checked />(推荐)checked、readonly等这种一个可选值的属性都可以省略属性值Essence
<input type = checkbox name = language value = java/> <input type = checkbox name = laanguage value = c/> <input type = checkbox name = laanguage va lue = c#/>5. Hidden domain <input type = hidden/>
The hidden domain is usually used to submit information to the server that does not need to be displayed to the user.
<input type = hidden name = hidden domain/>6. File Upload <input Type = File/>
With File, Form's Enctype must be set to Multipart/Form-Data, and the Method attribute is POST.
<input name = Uploadedfile ID = UPLOADEDFILE TYPE = FILE SIZE = 60 Accept = Text/*/>7. Pulling box <select> tag
<select> Label Create a list box, <option> label to create a list item, <select> uses nested <Option> to jointly provide a set of options in a set of options.
Set an option to select: <Option Selected> Beijing </option> or <option select = selectd> Beijing </option> (recommendation method) can be set as a selection item. How to achieve no choice, add a <option value = -1>-not selected-<option>, and then programming the selected value selected by the Select If-1 is considered to be not selected.
The Select group option can use Optgroup to group the data. The group itself will not be selected. It is applicable to the drop -down list or list box.
<select> Mark and Multiple attributes can be allowed to choose from (press the Ctrl key)
<select name = Country Size = 10> <Optgroup Label = Africa> <option value = GAM> Gambia </option> <option value = Madagascar </option> <option> e = nam> namibia </option> </ Optgroup> <optgroup label = Europe> <option value = FRA> FRANCE </option> <option value = RUSSIA </option> <option value = uk> uk> uk </option> TGROUP> <Optgroup Label = North America> <option value = can> canada </option> <option value = mex> Mexico </option> <option value = usa> usa </option> </oplct>8. Multi -line text <textarea> </textarea>
Multi -line text <textarea> Create a text box that can input multi -line text, <textarea> No value attributes, <textarea> text </textarea>, COLS = 50, ROWS = 15 attributes indicate the number of rows and columns, not specified The browser takes the default display.
<textarea name = textareacontent rows = 20 color = 50> The initial display content of the multi -line text box </textarea>9. <Label> </label> label
You can write ordinary texts to modify before <input type = text>, but when you click the modifier text, the Input will not get the focus, but you can use Label. txt1> Content </label> ;, then press Alt+U (understand). Accesskey = U, another attribute of label. Note: To set a unique ID for the modified control. I think the two labels of <Label> </label> are very useful for <input Type = Radio/> and <input Type = Checkbox/>.
<input type = radio name = sex id = male value = 0 checked = checked /> <label for = male> Male < /law> <input type = radio name = fMale Value = 1 /> <Label for = FMALE> Female </Label> <input Type = Radio name = Sex ID = Secret Value = 2/> <Label for = Secret> Confidential </label>10. <fieldSet> </fieldSet> label
The FieldSet tag divides the control in a area and looks more regular.
<fieldSet> <legend> Hobbies </legend> <input type = Checkbox value = basketball/> <input type = checkbox value = mountain climbing/<input type = checkbox value = reading/> </f ILDSET>11. Submit button <input type = submit/>
When a user clicks the server processing program specified by the <inputt type = submit/>, the form data will be submitted to the server processing program specified by the ACTION attribute of the <form> label. The default button text under the Chinese IE is a display text of the Value Properties Modification button.
<input type = submit value = submit/>12. Reset button <input type = reset/>
When the user clicks the <input type = reset/> button, the value in the form is reset to the initial value. When the user submits the form, the Name and Value of the reset button will not be submitted to the server.
<input type = reset value = reset button/>13. Ordinary button <input type = Button/>
Ordinary buttons are usually used to click to execute a script code.
<input type = Button value = ordinary button/>14. Image button <input Type = Image/>
The src attribute of the image button specifies the image source file, which does not have a value attribute. The image button can replace the <input type = submit/>, and now it can also directly set the appearance of the <input type = submit/> button to a picture.
<input type = Image src = bg.jpg />Third, form examples
This example is a simple registration page implemented using the form to use the form layout.
<! Doctype HTML PUBLIC- // W3C // DTD HTML 01 Transitional // EN HTTP: // WwwwWorg/TR/HTML4/LOOSEDTD> <HTML> <Title> Registration page </Title> <Style Type = Te XT /css> table {width: 450px; border: 1px solid red; background-color: #ffcb29; border-color: color:} td {width: 200; height: border : 1px solid black;} span {background- color: red;} </style> </head> <body style = background-color: block; background-images: url (/image/bearjpg); background-repeat: repeat; <FOR m name = registerform id = form1 Action = Method = Post> <Table Align = Center Cellspacing = 0 Cellpadding = 0> <TD> Username: </td> <input type = Text/</Tr> </Tr> < TR> <TD> Password: </td> <td> <input type = password/> </td> </tr> <tr> /</td> </tr> <l> <td> Please select the market: </td> <d> <select> <optgroup label = China> <option> Gansu Province </option> <option> Henan Province Henan Province </option> <option> Shanghai </option> </optgroup> <optgroup label = American> <option> California </option> <option> Chicago </option> <Option> News On> </ Optgroup> </Select> </TD> </TR> <TD> Please select Gender: </td> <td> <input type = radio name = sex id = male value = 0 checked = checked/>> <Label for = Male> Male </lable> <input type = radio name = sex id = 1/> <Label for = FMALE> Female </Label> <input Type = Radio Name = SEX ID = SECRET VA lue = 2/> <Label for = secret> confidentiality </label> </td> </tr> <TD> Please select Occupation: </td> <input type = Radio ID = Student name = Profession /> <Label for = Student> Student < /Label> <input Type = Radio ID = Teacher Name = Profession /> <Label for = Teacher> Teacher> <input Type = Radio ID = Others name = Profession / > <Label for = Others> Others </Label> </TD> </TR> <TD> Please select Hobbies: </td> <fieldSet> <LEGEND> Your Hobbies </Legend> <input type = Checkbox name = hobby ID = Basketboll Checkd = Checked /> <Label for = Basketboll> Playing basketball < /label> <input type = Checkbox name = Hobb y ID = Run /> <Label for = Run> Run < / Label> <input type = Checkbox name = Hobby ID = Read /> <Label for = Read> Read < /label> <input type = Checkbox name = Hobby ID = Surfing /> <label for = Sur fing> Internet access </label> </fieldSet> </td> </tr> <l> <TD> Remarks: </td> <textarea color = 30> This is the remarks content </textarea> </td> </tr> TR> <TD> & nbsp; </td> <td> <input type = submit value = Submit/<input type = reset value = reset/</td> </trble> </form> > </body> </html>