[Front-end study notes day12] 2.8. Html form

2.8. Html form

html form

Form is used to collect different types of user input, a form composed of different types of labels, tags and associated attributes are used as follows:

1, the entire form area defined label

• action attribute defines the form data submitted address
• Way method attribute defines the form submission, generally "get" way and "post" mode

2, label form elements defined text annotation

3, the label form elements define a common

• type properties
  • type = "text" is defined single-line text input box
  • type = "password" to define a password input box
  • type = "radio" is defined radio button
  • type = "checkbox" check box is defined
  • type = "file" is defined to upload files
  • type = "submit" button to submit definitions
  • type = "reset" button to reset the definition
  • type = "button" to define a common button
  • type = "image" is defined as a picture submit button, with the src attribute definition picture address
  • type = "hidden" defines a hidden form fields, used to store the value of
• The value attribute defined in the form element
• The name attribute defines the name of the form element, this name is the key name when submitting data

4, label definition multi-line text entry box

5, the tag elements defined drop down menu

6, tag and label fit, form elements defined in the drop-down option

Registration form instance:

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮  
     还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>