表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素
1. 构成:
- form标签包裹一个或若干个表单元素构成
-
action="http://www.baidu.com"
表单提交的后台地址 -
method="get"
值:get/post 提交数据的方式 -
name="user"
后台拿取数据需要通过name属性 -
checked
默认选中 -
disabled
禁用表单元素
2. 属性:
-
action="http://www.baidu.com"
表单提交的后台地址 -
method="get"
值:get/post 提交数据的方式 -
name="user"
后台拿取数据需要通过name属性 -
value="我是谁?我在哪?我要做什么?"
在按钮中,value是按钮显示的值 在输入框里面也有value标签属性,值是用户输入的内容 -
placeholder="请输入用户名"
输入框提示信息
3. 标签:
label标签:和表单进行关联
<label for="userid">账户名:</label><input type="text" name="user" id="userid">
label里面的for要和input里面的id进行关联
input标签:输入
<input type="reset" value="重置">
type="text"
普通文本输入框
type="password"
密码文本输入框
type="radio"
单选框, 注意:name要一样
type="checkbox"
复选框, 注意:name要不一样
type="reset"
重置按钮, value是按钮显示的值
type="file"
文件域, 选择文件
type="button"
普通按钮和button(css3里面的标签)功能一样
type="submit"
提交按钮
textarea标签:文本域
<textarea name="" id="" cols="30" rows="10"></textarea>
文本域,通常用css设置宽高
禁止拖动:resize: none;
select标签:下拉列表
<select name="" id="" multiple>
<option value="">西瓜</option>
<option value="">菠萝</option>
<option value="">茄子</option>
<option value="">白萝卜</option>
<option value="">西红柿</option>
<option value="">人</option>
</select>
属性:
multiple
显示多个项目 按住Ctrl可以多选
size="2"
控制显示的数目
selected
默认选中
disabled
禁用表单元素