<form>元素：
<form action="" method="get|post">
</form>
<input>元素：
<input type="" name="" placeholder="" />
常用属性：
type 文本框类型name 指定了name的字段才会被提交（不能用id代替name属性）placeholder 占位符value 输入框中的文本autofocus 自动聚焦disabled 禁用readonly 只读required 该字段是必填的，会自动检查该字段是否已填写，未填写会提示size 指定输入框的宽度，以字符计。form属性 指定此表单组件属于哪个表单（常用于<form>外的表单元素）formaction指定将此表单组件提交给xx来处理，会覆盖所属<form>的action属性。title 提示信息，鼠标移到输入框上时会显示提示信息pattern 指定正则表达式，浏览器会自动用这个正则表达式来验证内容，不符合会提示
<input>的type属性可能的值：
text 单行文本框password 密码框radio 单选按钮checkbox 复选框file 选择文件image 图片button 普通按钮reset 重置按钮submit 提交按钮image 以图片作为提交按钮，点击会提交表单hidden 隐藏域，不显示在页面上，提交时仍会提交此字段，常用来提交隐秘信息file 选择文件
color 颜色选择器date 日期选择器（年月日）month 日期选择器（年月）datetime-local 时间日期选择器（年月日+时分）email email格式。会自动检查内容是否符合email格式，不符合会提示number 数字格式。会自动检查内容是否符合要求，不符合会提示range 水平滑动条search 搜索框，和普通的文本框差不多，只是框内右侧有一个X，点击可清空框中文本。tel 电话号码time 时间选择器（时分）url 网址，会自动检查内容是否符合url格式，不符合会提示
上面的这些属性值，有的浏览器尚未实现，最好自己写正则表达式验证。
<input />、<img />是少数几个能设置width、height的行内元素。
单行文本框：
<input type="text" name="" />
密码框：
<input type="password" name="" />
单选按钮：
性别：
<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="女" />女
<br />
一组单选按钮的name要相同。
复选框：
爱好：
<br />
<input type="checkbox" name="hobby" value="basketball" />篮球
<br />
<input type="checkbox" name="hobby" value="running" />跑步
<br />
<input type="checkbox" name="hobby" value="swimming" />游泳
<br />
复选框的字段会分别提交，比如?hobby=basketball&hobby=running，并不是放在一个数组中提交，就是说一组复选框的name可以不同。
输入数字：
<input type="number" name="" min="0" max="10">
只能输入[0,10]上的10个整数其中之一。可指定步长：
<input type="number" name="" min="0" max="10" step="2">
只能输入0,2,4,6,8,10这几个数字其中之一。
会自动检查内容是否要求，不符合会提示。
<input>的form属性：
<form id="form1" action="" method="get">
</form>
<input type="" name="" form="form1" />
<input>元素可以通过form属性与一个或多个表单（的id）绑定，绑定后此<input>属于所绑定的表单，提交表单时会提交此<input>。
可与多个表单绑定，通过逗号隔开即可，form="from1,form2"。
<input>的formaction属性：
<form action="1.php" method="">
<input type="" name="" formaction="2.php" />
</form>
提交时会把此<input>提交给2.php处理，不会提交给1.php（覆盖<form>元素的action属性），表单的其他字段提交给1.php处理。
<input>的title属性：
请输入密码：
<input type="password" name="" title="密码只能为字母、数字" />
鼠标移到输入框上时，会弹出title设置的提示信息。
<input>的pattern属性：
<input type="text" name="" pattern="[A-Za-z]{3}" title="Three letter country code">
浏览器会自动使用这个正则表达式来验证内容，不符合要求会提示。
水平滑动条：
<input type="range" name="" min="0" max="100">
可用step属性指定步长，可用value属性指定默认值。
隐藏域：
input type="hidden" name="" value="" />
上传文件：
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="" />
</form>
method必须指定为post，enctype必须指定为multipart/form-data。
默认可以选择所有类型的文件，可以使用accept属性来限定文件类型：
<input type="file" name="" accept="image/jpeg" />
可以使用通配符： accept="image/*"
默认只能选择一个文件，可使用multiple属性指定可选择多个文件：
<input type="file" name="" multiple />
<label>元素：绑定输入框，点击<label>元素，输入框也会聚焦
<label for="user">用户名：
</label>
<input type="text" name="user" id="user">
通过<label>的for属性绑定输入框的id（必须是id，不能用name代替）。
按钮：
<input type="button" value="普通按钮" />
<input type="reset" value="重置" />
<input type="submit" value="提交" />
<input type="image" src="image/1.jpg" width="" height="" />
type="image"是以图片作为提交按钮上的内容，点击会提交表单，可以通过设置<input>的width、heigth来设置图片的宽、高。
<button type="button">普通按钮
</button>
<button type="reset">重置按钮
</button>
<button type="submit">提交
</button>
下拉列表:<select>+<option> 只能从所给项中选择一项
请选择国籍：
<select name="nationality">
<option value="China">中国
</option> <!--默认选择第一项-->
<option value="America">美国
</option>
<option value="other">其他
</option>
</select>
提示文字可以这样写：
<select name="nationality">
<option>请选择国籍
</option>
<option value="China">中国
</option>
<option value="America">美国
</option>
<option value="other">其他
</option>
</select>
此处的<option>是双标签。
文本框，可以从所给项中选择一项，也可以自己输入、编辑内容：<input>+<datalist>
请选择您使用的浏览器：
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
通过<input>的list属性绑定<datalist>的id（只能是id，不能是name）。
此处的<option>是单标签。
文本域：
<textarea name="" rows="10" cols="50">此处可以写默认值
</textarea>
文本域的默认值不是通过value属性指定的。
转载于:https://www.cnblogs.com/chy18883701161/p/11320760.html
