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">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值