HTML form Forms

1.id, name relationship

Usually when we write HTML code, the control will be given an id attribute, which is only used by JS and CSS, when the form is submitted, it does not play any role;

In the HTML code we will specify different values for each of the different controls to do the default value, then specifying the corresponding ID property for those controls will be convenient to find them;

The value of the Name property is the key used when communicating with the server;
If you do not need to control the controls with JS and CSS, perhaps they are only used to display some data (read-only), then there is no need to specify the id attribute, the name attribute can not be given (to avoid committing meaningless data).

2.<form> </form> Tags: creating HTML Forms

3.get,post: Form Submission method

Description

form to create an HTML form for user input

A form can contain input elements such as text fields, checkboxes, radio boxes, submit buttons, and so on.

Forms can also contain menus, textarea, fieldset, legend, and label elements.

Forms are used to transfer data to the server.

Property:

Action [URL]: Specifies where to send form data when the form is submitted.

method [Get/post]: Specifies the HTTP method used to send the form-data.

　　The value in the Get:from form, appended to the URL specified by the action, is passed as a URL link.

　　Post:from the values in the form, appended to the HTML headers.

enctype [string]: Specifies how the form data is encoded before it is sent.

Possible values for the Enctype property:

• • Application/x-www-form-urlencoded: Encodes all characters before sending (the default) (the space is converted to the "+" plus sign, and the special symbol is converted to the ASCII HEX value).
  • Multipart/form-data: You must use this value when you do not encode a character and include a form that contains a file upload control
  • Text/plain: The space is converted to the "+" plus sign, but no special characters are encoded.

Title: Sets the text that the browser displays with a small buoy when the site visitor's mouse is positioned anywhere on the form.

Name: The names of the forms. Note the difference from the id attribute: The name attribute is the one used when communicating with the server, and the id attribute is the name used by the browser side, which is primarily intended for client programming and is used in CSS and JavaScript.

Form elements

1. Text box

　　Label
The <label> tag defines the callout (tag) for the INPUT element.
The label element does not present any special effects to the user. However, it improves usability for the user of the mouse. This control is triggered if you tap text inside a LABEL element. That is, when the user selects the label, the browser automatically shifts the focus to the label-related form controls.
The For property of the <label> tag should be the same as the id attribute of the related element.
Text Box Properties:
　　　　Type Property value:
Text--Input field (input type)
Password--is also the text input field, but the input text is displayed with the password symbol ' * ' (input type)
FILE--can enter a path (input type)
CheckBox--check box. You can select 0 or more (select type)
Radio--Radio box. You can select only one and you must select one (select type)
Hidden-Represents a hidden field that can transmit some hidden information to the server
Button--buttons (click Type)
Image-Use the image to display the button, using the SRC attribute to specify the location of the image (just like the src attribute of the IMG tag) (click Type)
Submit-button, the form can be completed to submit, the message to the server. You can use the Value property to display the text on the button (click Type)
Reset-reset button to empty the information in the form (click-to-type)
　　　　name: The key value when submitting a form to the server
　　　Size: Specifies the width of the text box, in number of characters, and in most browsers, the default width of the text box is 20 characters.
　　　　value: Specifies the default value for the text box, which is the first time the browser displays the form or the user clicksThe value that is displayed in the text box after the button.
MaxLength: Specifies the maximum character length entered by the user.
ReadOnly: Read-only property, when the ReadOnly property is set, the text box can get focus, but the user cannot change the value in the text box.
Disabled: Disabled, when the text box is disabled, the focus is not available, and of course, the user cannot change the value of the text box. And when the form is submitted, the browser does not send the value of the text box to the server.
2. Radio button
<form action= "https://www.sougou.com.web/" method= "post" enctype= "Multipart/form-data" ><label for= "male" > Male </label><input type= "Radio" id= "Male" name= "gender"/> <label for= "Felmale" > Women </label> <input type= "Radio" id= "Felmale" name= "gender"/></form>
The Name property of two radio buttons must be the same to be associated
3. check box
<form><label for= "B" > Basketball </label><input type= "checkbox" Name= "Sport" id= "B"/><label for= "f "> Football </label><input type=" checkbox "Name=" Sport "id=" F "/><label for=" C "> Baseball </label>< Input type= "checkbox" Name= "Sport" id= "C"/><label for= "D" > Pingpong </label><input type= "checkbox" Name= " Sport "id=" D "/></form>
　　
4. File Upload
With file, the enctype of the form must be set to the Multipart/form-data,method property as post.
<form action= "127.0.0.1" method= "post" enctype= "Multipart/form-data" ><p> files to be uploaded 1<input type= "file" Name= "file"/></p><p><input type= "Submit" value= "Commit"/></p></form>
5. Drop-down box
　　
HTML form Forms