unit3 form
1. Form syntax
Summary: The form must be used with the form item
<form method="post" action="http://www.baidu.com">
Form item:
</form>
Attribute 1: method Form submission method: get (default) post
The significance of the form in html5 ? Collect user data (login, register,
post ,...s) 1. What is the difference between get submission and post submission?
1) Features of the get submission method: The default submission method of form
a. The submitted data will be displayed in the address bar
. b. The size of the data carried in the address bar cannot exceed about 2k.
c. You cannot upload files with get d. get is
not safe
2) post The characteristics of the submission method:
a. Ensure data security (relative)
b. File transfer must be submitted
by post c. Post submission data theoretically has no size limit
d. The submitted data will not be displayed in the address bar
Attribute 2: The address of the server where the action form is submitted
2. Form (item) elements
1. Text box (display plain text)
<!--1. Text box (displayed in plain text)
name: the name of the form item ==> In order to facilitate the server to distinguish individual information [must]
value: define the default value
size: the length of the
text box maxlength: the text box can be entered Maximum number of characters
-->
User name: <input type="text" name="username" value="张三狗"
size="30" maxlength="3" />
2. Password box (it shows the cipher text)
<!--2. Password box (displayed in cipher text)
type: password [Required]
name: The name of the form item ==> In order to facilitate the server to distinguish individual information [Required]
value: Define the default value
size: text box The length of
maxlength: the maximum number of characters that can be entered in the text box
-->
Password: <input type="password" name="pwd" maxlength="3" placeholder (text prompt)="Please enter the password" />
3. Radio buttons
<!--3. Single selection box (multiple)
type: radio [required]
name: the name of the form item ==> In order to facilitate the server to distinguish single information [required must be consistent]
value: defined default value [required]
checked : Whether checked checked means checked or checked="checked" means checked
-->
Gender: <input type="radio" name="sex" value="Male" checked="checked" />Male
<input type="radio "name="sex" value="Female" checked />Female
4. Checkbox
<!--4. Checkbox
type: checkbox [Required]
name: The name of the form item ==> In order to facilitate the server to distinguish individual information [Required must be consistent]
value: Define the default value [Required]
checked: Whether to check checked means checked or checked="checked" means checked
-->
hobbies: <input type="checkbox" name="hobbies" value="sleep"/>sleep
<input type="checkbox" name="hobbies" value= "Learning" checked />Learning
<input type="checkbox" name="hobbies" value="Bagger"/>Bag
5. List box
<!--5. List box select label
name: the name of the form item ==> In order to facilitate the server to distinguish a single item of information [must be consistent]
value: define the default value [required]
selected: whether to select selected means selected or selected= "selected" means the selected
size: the height of the drop-down list
-->
Education: <select name="xueli" size="3">
<option value="undergraduate">undergraduate</option>
<option value="specialty" selected ="selected">Specialty</option>
<option value="Graduate" selected>Graduate</option>
<option value="Doctoral student">Doctoral student</option>
</select>
6. Button
<!--6. Button
type:
reset (reset button) image (picture button) ==> the function of submitting the form
button (normal button) By default there is no response when clicking
submit (submit button) ==> the function of submitting the form
name : The name of the button [may not write]
value: The text displayed by the button [may not write]
-->
<input type="reset" value="RESET"/>
<input type="image" src="loginIcon. gif" />
<input type="button" value="Give me a beauty"/>
<input type="submit" value="register"/>
- Reset button
- Picture button
- Normal button
- Submit button
7. Multi-line text box (text field)
<!--7. Multi-line text box (text field) textarea table
rows: the number of rows
cols: the number of columns
name: the name of the form item ==> In order to facilitate the server to distinguish individual information [Required]
-->
Remarks··· ··》<textarea name="Appendix" rows="10" cols="10"></textarea>
8. File box
<!--8. File box
type="file"
Note:
Add form: enctype="multipart/form-data" [Must add]
name: The name of the form item ==> In order to facilitate the server to distinguish individual information [Required]
-->
Portrait: <input type="file" name="head_img"/>
9. Email, website
<!--9. Email, URL
type="email"
name: the name of the form item ==> In order to facilitate the server to distinguish a single item of information [Required]
Note: 1. Automatically verify the email format.
1. Automatic URL format.
-->
Email: <input type="email" name="email"/>
URL: <input type="url" name="url"/>
10. Numbers
数字：
<input type="number" name="num" min="0" max="100" step="10"/>
11. Slider
请输入数字:
<input type="range" name="range1" min="0" max="10" step="2"/>
12. Search box
Please enter the search keyword:
<input type="search" name="sousuo"/>
3. Advanced form application
<form method="post" action="http://www.baidu.com">
<!--1.隐藏域-->
<input type="hidden" value="22o2oo1100" name="order_id"/>
<!--2.只读 -->
<input type="text" value="二狗" readonly />
<!--3.禁用-->
<input type="image" disabled value="提交"/>
<!--4. 标注-->
<label for="man">男</label>
<input id="man" type="radio" name="sex" value="男"/>
<label for="woman">女</label>
<input id="woman" type="radio" name="sex" value="女"/>
</form>
1. Hidden domain
- type="hidden"
2. Read only
- readonly
Read-only text box
3. Disable
- disabled
Disable button
4. Label
1. Enhance the usability of the mouse
2. Automatically shift the focus to the form element related to the label
5、placeholder、required、pattern
<!--5. placeholder prompt: text box input content prompt
required cannot be empty: required field
pattern Regular expression: verification rule, regular expression
^13[0-9]{9}$ phone number does not start with 13
^1[358]/d{9} The form can only be submitted with a phone number starting with 13 15 18
-->
Username: <input name="username" required placeholder="Please enter 6 usernames" />
Phone:< input name="mobile" pattern="^13[0-9]{9}$" />