A, Form Form
Visitors fill out a form to give information in a Web page, so that it can collect client information, the website has interactive features. Generally the form design in a Html document when the user fill out the information to make submission (submit) operation, so the contents of the form will be transferred from the client's browser to the server through such as ASP or PHP on the server handler processes after the required information and then transfer the user back to the client browser, so you have an interactive web page. Here we talk about how to use Html flag design form. All local input from the user have been written using a form, such as login registration, the search box. Form is form and control consisting of a general form that contains the user should fill in the information input box, submit buttons, etc., these input boxes, buttons, called controls, forms like container, it can accommodate a wide variety of controls.
<form action＝"url" method=get|post name="myform" ></form> -name: name when the form is submitted -action: submitted to the address -method: submission, there are get and post are two kinds of default to get
post and get the difference between:
1, data submission, get the data submitted url can see, post can not see
2, get a small amount of data is generally used to submit, post large amounts of data submitted to
A complete form comprises three basic components: the label sheet, form fields, form buttons.
1. The form tag
It refers <form> tag itself, it is a form element comprises a region, using <form> </ form> defined
2. Form Field
Is <form> tag is used to collect user inputs each item, usually defined by the input tag, there are different types of input tag, data corresponding to different users. (Example: text fields, drop-down lists, radio buttons, check boxes, etc.)
3. Form button
Used to submit <form> all the information in a form to a server, and form fields form buttons belong form element
Second, the form element attributes
2.1 Text Box
Text field is set by <input type = "text"> tag, when the user to type letters, numbers, etc. in the form, the text field will be used.
<form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
2.2 Password box
Password field with the tag <input type = "password"> to define:
<form> Password: <input type="password" name="pwd"> </form>
Note: The password field characters are not displayed in clear text, but with asterisks or dots instead.
2.3 radio button
<Input type = "radio"> tag defines a table alone box options
<form> <input type="radio" name="sex" value="male">Male</form>
2.4 check box
<Input type = "checkbox"> defines a checkbox. Require users to select options from one or several given several choices.
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bik</form>
2.5 file
To define file selection field and the "Browse ..." button, for file upload:
Select a file: < the INPUT of the type = "File" name = "img" >
2.6 Hidden Fields
Define a hidden field, hidden field is not visible to the user. Hidden fields often store a default value, or change their values by the JavaScript:
<input type="hidden" name="country" value="Norway">
2.7 submit button
When the user clicks the OK button, the contents of the form will be sent to another file. The form action attribute defines the file name of the destination file. By the action attribute definition file normally be received input data related to a process.
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
2.8 Reset button
Reset button is defined (the default value to reset all form):
<input type="reset">
2.9 Button
Tip: Use caution reset button! For users accidentally click the Reset button is a very annoying thing.
No button functionality
<input type="button" value="点我"/>
2.10 Image Picture button
Defined image as a submit button:
<input type="image" src="img_submit.gif" />
2.11 button
<Button> tag defines a button.
In the inner elements <button>, you can place the content, such as text or images. This is the difference between the elements and use <input> elements created button.
Tip: Always specify the type attribute for the <button> element. Different browsers use different default values for the type attribute <button> element.
2.12 drop-down list
<Select> element is used to create a drop-down list.
<Option> tag defines a drop-down option (one entry) in the list.
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
<Optgroup> tag is often used for the relevant options together.
If you have a lot of combinations of options, you can use <optgroup> tag can very simply be related options together.
<select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
2.13 multiline text box
Text <textarea> tag defines a multi-line input control. Text area can hold an unlimited number of text.
It may be dictated by the size of the textarea cols and rows attributes, but a better way is to use the CSS height and width attributes.
<textarea rows="10" cols="30"> I am a text box. </textarea>
2.14labe
<Label> tag is defined as an input element label (tag).
The label element does not present any special effects to the user. However, it improved the availability for mouse users. If you click on the text within the label element, it will trigger this control. That is, when the user selects the tag, the browser will automatically focus to the label and the associated form controls.
<Label> tag for attribute should be the same as the id attribute related elements.
Tip: "for" property of the label can be bound to another element. Please put the value of the id attribute of the related elements of value "for" property to.
<form action="demo_form.php"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"> <br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"> <br> <input type="submit" value="提交"> </form>
Three, HTML5 new type type
3.1email
Field defines the address for email (when the form is submitted automatically to verify the value of the email field)
E-mail: <input type="email" name="usremail">
3.2url
Defined fields for entering a URL:
E-mail: <input type="email" name="usremail">
3.3search
Custom search fields (such as site search or Google search, etc.):
Search Google: <input type="search" name="googlesearch">
3.4tel
Defined field for entering a phone number:
Phone number: < the INPUT of the type = "tel" name = "usrtel" >
3.5color
Selecting a color from the color picker:
Choose your favorite color: < the INPUT of the type = "Color" name = "favcolor" >
3.6number
Defined field for inputting numbers (you can set the digital acceptable limits):
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
Please use the following attributes to specify restrictions:
max - the maximum allowed by regulations.
min - minimum allowed by regulations.
the STEP - requirements for legal digital gap.
value - defined defaults.
3.7range
Define the exact value of the input digital control unimportant (for example, slider controls). You can also set limits acceptable numbers:
<input type="range" name="points" min="1" max="10">
Please use the following attributes to specify restrictions:
max - the maximum allowed by regulations.
min - minimum allowed by regulations.
the STEP - requirements for legal digital gap.
value - defined defaults.
3.8date
Defined date controls:
生日: <input type="date" name="bday">
3.9month
Defined month and year controls (without time zone):
Date of birth (month and year): < the INPUT of the type = "month The" name = "bdaymonth" >
3.10week
Definition of week and year controls (without time zone):
选择周: <input type="week" name="week_year">
Four, HTML5 new property
4.1autofocus property
The autofocus attribute specified when the page loads, the domain automatically focus.
NOTE: autofocus attribute applies to all types of <input> tag.
User name: <input type="text" name="user_name" autofocus />
4.2multiple property
a plurality of selectable predetermined multiple attribute value input field.
Note: multiple attributes for the following types of <input> tag: email and file.
Email: <input type="email" multiple />
4.3placeholder property
placeholder attribute provides a hint (hint), describe the expected value of the input field.
<input type="search" name="user_search" placeholder="Search W3School" />
required attribute specifies that an input field must be filled (not empty) before submitting.
4.4required property
Name: <input type="text" name="usr_name" required />