用来收集信息,比如注册、登录、发送评论反馈、购买商品等
所有HTML表单都以一个<form>元素开始
<form action="" method="post">
</form>
其中,action属性表示表单要提交到的后台程序的网址,method属性表示表单提交的方式(get、post)
基本控件
单行文本框
<input type="text">
拥有value、placeholder、disabled属性
value属性:已经填写好的值
placeholder属性:提示文本,用浅色文本写在文本框中,但并不是文本框中是值
disabled属性:用户不能与元素交互
单选按钮
<input type="radio">
拥有value、checked、name属性
value属性:向服务器提交的就是value值
checked属性:默认被选中
name属性:互斥的单选按钮应该设置它们的name属性为相同的值
性别:
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
label标签
用来将文字和单选按钮绑定,即,用户单击文字的时候也视为点击了单选按钮
性别:
<label >
<input type="radio" name="sex" value="男">男
</label>
<label>
<input type="radio" name="sex" value="女">女
</label>
复选框
<input type="checkbox">
密码框
<input type="password">
下拉菜单
<select>
<option value="JS">JS</option>
<option value="C">C</option>
<option value="PHP">PHT</option>
</select>
<select>:下拉菜单
<option>:内部的选项
多行文本框
<textarea name="" id="" cols="30" rows="10"></textarea>
rows:定义多行文本框的行数
cols:定义列数
三种按钮
<input type="button" value="普通按钮">
<input type="submit" value="提交表单">
<input type="reset" value="重置表单">
HTML5新增的表单控件
input:
type属性值 | 控件 |
color | 颜色选择控件 |
data、time | 日期、时间选择控件 |
电子邮件输入控件 | |
file | 文件选择控件 |
number | 数字输入控件 |
range | 拖拽条 |
search | 搜索框 |
url | 网址输入控件 |
<datalist>控件
为输入框提供一些备选项,当用户输入的内容与备选项文字相同时,将会显示智能感应
省份:
<input type="text" list="province-list">
<datalist id="province-list">
<option value="山西">
<option value="山东">
<option value="广西">
<option value="广东">
<option value="湖南">
<option value="湖北">
<option value="河南">
<option value="河北">
</datalist>