form表单

表单

适用场景：

​ 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">