表单
适用场景:
1. 登陆、注册页面
2. 搜索功能
以上情况都需要用户的输入或选择
祖先元素
属性:
action提交地址
method提交方式 取值:get/post
get 提交信息展示到地址栏(默认值)
post 隐藏提交信息
input标签的required属性代表必填项
如果提交时添加required属性的input标签没有填写内容
则浏览器会提示“请填写此字段”
当input标签添加了checked属性
表示选中当前input标签(即默认值)
仅适用单选框和多选框
单行文本输入框
<!-- 单行文本输入框
label与input关联
功能:点击label标签,激活相关联的input标签。
实现:label的for属性值于input的id值相同,则关联成功
-->
姓名:<input type="text" name="username">
密码框
密码:<input type="password" name="pwd">
<!-- 输入的最大长度maxlength
placeholder提示信息
placeholder和value的区别
1.样式不同,placeholder灰色于value黑色
2、value表示当前标签的默认值
3、当激活标签输入内容时
placeholder会消失
value内容依然存在
-->
手机号:<input type="text" maxlength="11" placeholder="请输入11位的手机号">
单选框
<!--单选框
type取值为radio实现单选框的样式
name值相同,才能实现单选框的功能
-->
性别:<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="Female">女
复选框
<!--复选框
type取值为checkbox实现复选框的样式
-->
<input type="checkbox" name="vehicle" value="like">看电影
<input type="checkbox" name="vehicle" value="like">运动
<input type="checkbox" name="vehicle" value="like">旅行
下拉列表
<!-- select 下拉列表
select祖先元素
name属性即键名
option后代元素 可选择项目
option的value值是select的value值
optgroup选项的分组(提升用户体验)
labe属性optgroup在页面的展示内容
注:optgroup是无法选择
设置默认值,在option标签中添加selected
-->
城市:
<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="gd">广东</option>
<option value="cd">成都</option>
<option value="nj">南京</option>
</select>
数字
<!-- 数值类型的输入框
不可输入非数值的内容
右侧会有向上和向下的按钮
向上当前值+1
向下当前值-1
-->
年龄:<input type="number">
按钮
<!-- 提交按钮 -->
<input type="submit" value="确认提交">
<!-- 重置按钮
功能:所有form里的标签回复默认值
-->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<input type="button" value="按钮">
<!-- html5新增 -->
<button>按钮</button>
扩展
颜色:<input type="color">
上传文件:<input type="file">
取值范围:<input type="range">