表单
1.用于接收用户数据并且提交给服务器
表单二要素
1.from 表单元素
作用:收集用户信息并发送给服务器
2.表单控件
作用:提供了能够跟用户交互的可视化组件
2.from 元素
1.注意 :from元素是不可见的,见到的都是表单,却不能省略,因为数据提交功能要由from元素完成
2.语法:
<from>
表单控件
</from>
3.from 标签属性
1.action :指定数据提交的目的地址
2.method :数据请求方式 get / post
默认为get方式提交
1.get请求(默认值):通常用于向服务器端获取数据
特点:1.提交的数据会以参数的形式拼接在URL的后面
2.安全性较低
3.提交数据最大为2KB
2.post请求 :将数据提交给服务器处理
特点:1.隐式提交,看不到提交数据
2.安全性较高
3.post请求没有数据限制
4.表单控件
1.作用:提供与用户交互td的可视化组件
注意:只有放在表单元素中的表单控件才允许被提交
2.分类
1.文本框和密码框
语法:
文本框 <input type="text">
密码框 <input type="password">
属性:
1.name属性 : 定义当前控件的名称,缺少的话无法提交
2.value属性 :要提交给服务器的值,同时也是默认显示在控件上的值
3.maxlength属性 :用来限制用户输入的最大字符数
4.placeholder属性 :用户输入前显示在框中的提示文本
2.单选框和复选框
单选按钮 <input type="radio">
复选框 <input type="checbox">
属性 :
1.name 属性 :定义控件名称,还起到分组的作用,一组中的按钮名称必须保持一致
2.value属性 :设置当前控件的值,最终提交给服务器
3.checked 属性 :设置预选中状态可以省略属性值也可以使用"checked"作为值
3.隐藏域和文件选择框
1.隐藏域
作用:需要提交给服务器但是却不需要呈现给用户的数据,都可以放在隐藏域中
语法 :<input type="hidden">
属性 :
1.name 控件名称
2.value 控件的值
2.文件选择框
作用 :选择文件上传,发送给服务端
语法 :<input type="file">
属性 :name 定义控件名称
4.下拉选择框
语法示例:
<select name="province">
<option value="hebei">河北省</option>
<option value="shanxi">陕西省</option>
</select>
假设用户选择河北省,在使用get方式提交数据时,URL后拼接的数据应为
5.文本域
支持用户输入多行文本
语法:
<textarea></textarea>
属性 :
1.name 控件名称
2.cols 指定文本域默认显示的列数一行中能显示的英文字符量,中文减半
3.rows 指定文本域能够显示的行数
注意:文本域可以由用户调整大小
6.按钮
1.提交按钮
<input type="submit">
作用:将表单数据发送给服务器
value属性重新设置按钮名字
2.重置按钮
<input type="reset">
作用:重置表单,将表单内容回复到初始化状态
value属性重新设置按钮名字
3.普通按钮
<input type="button" value="点击">
作用:可以绑定自定义事件
按钮中的value属性值实际上是定义按钮的显示文本
4.<button>按钮显示文本</button>
注意:
1.按钮标签可以在任何地方使用,不局限在form表单中使用
2.按钮标签使用在form中,默认具有提交功能,等同于input submit
3.可以添加属性type取值subnit / reset / button进行分区(非必填)
4.在表单外作为普通按钮使用时,需要通过JS,动态绑定
7.特殊用法
lable for ID
使点文本和点按钮达到相同效果
语法示例:(id必须相同)
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
使用lable标签包裹表单控件要显示的文本信息,为lable标签添加for属性,属性值与所要绑定的表单控件的ID属性值保持一致,实现文本与控件的绑定
html学习笔记整理----HTML表单及表单控件
最新推荐文章于 2021-11-30 22:30:43 发布