H5学习笔记（表单、框架）
表单标签
表单用于收集不同类型的用户输入数据
form常用属性
form标签定义表单
属性名 代码 描述 action <form action ="服务器地址"></form> 将表单的数据提交到该地址上处理 method <form method ="提交方式"></form> get:不安全、数据有限 post:安全、没有限制 enctype <form enctype="编码方式"></form> applocation/x-www-form-urlcoded(默认，普通表单)multipart/form-data(文件上传使用) <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表单标签</title> </head> <body><h1>form标签：用来定义一个表单</h1><ul><li>action:表单数据提交的服务器地址</li><li>method：表单数据提交方式 get和post</li><li>enctype:表单的编码方式，普通表单(默认：application/x-www-form-urlencoded)、文本标签（text/plain）、文件标签(multipart/form-data)</li></ul> <h2>用户登录</h2><form action="" method="post" enctype="text/plain" >用户名:<input name ="username" type="text"/><br/>密码:<input name="pwd" type="password"/><input type="submit" value="登录" /></form> </body> </html>
表单元素
name属性必须包含，否侧不能提交给服务器，value时提交的数据
input元素：不同type值呈现为不同状态
| 属性值 | 描述 | 代码 | 说明 |
|---|---|---|---|
| text | 单行文本框 | <input type="text"/> | |
| password | 密码框 | <input type = "password"/> | 输入信息显示为 *** |
| radio | 单选按钮 | <input type="radio"/> | radio有id属性，多个radio，id相同时，一次只有一个显示被选中 |
| checkbox | 复选框 | <input type="checkbox"/> | checkbox的name属性使用同一个name |
| submit | 提交按钮 | <input type="submit"/> | submit不需要name属性，因为submit的信息不需要传输给服务器 |
| reset | 重置按钮 | <input type="reset"/> | 重置表单内的所有选项，只对当前表单有用 |
| button | 普通按钮 | <input type="button"/> | |
| image | 图片提交按钮 | <input type="image" src="..."/> | |
| file | 文件 | <input type="file"/> | 当使用文件属性值时，form表单的编码必须是 multiparty/form-data |
| hidden | 隐藏域 | <input type = "hidden"/> |
表单元素
属性值 描述 代码 Email 邮箱 <input type="email"/> number 数值 <input type="number"/> range 滑块 <input type="range"/> color 取色框 <input type="color"/> date 日期框 <input type="date"/> time 时间框 <input type="time"/> 其他表单元素
下拉列表
下拉列表的属性：operator
selected:默认选中
textarea
文本域
cols:列数
rows：行数
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表单元素</title> </head> <body> <h1>表单元素：使用input标签来表示，不同type值显示状态不同</h1> <ul><li>text:文本框</li><li>password:密码框</li><li>radio:按钮，使用同一个id时，只能选中一个</li> </ul> <h2>用户注册</h2> <form action="" method="post" enctype="multipart/form-data"><table><tr><td>用户名</td><td><input name="username" type="text"/></td></tr><tr><td>密码</td><td><input name="pwd" type="password"/></td></tr><tr><td>确认密码</td><td><input name="pwd2" type="password"/></td></tr><tr><td>性别</td><td><input name="sex" type="radio" value="男" checked="checked"/>男<input name="sex" type="radio" value="女"/>女</td></tr><tr><td>爱好</td><td><input name="hobby" type="checkbox" value="code"/>写代码<input name="hobby" type="checkbox" value="game"/>玩游戏<input name="hobby" type="checkbox" value="smoke"/>抽烟</td></tr><tr><td>头像</td><td><input name="photo" type="file"/></td></tr><tr><td>邮箱</td><td><input name="email" type="email"/></td></tr><tr><td>年龄</td><td><input name="age" type="number"/></td></tr><tr><td>滑块</td><td><input name="滑块" type="range" min="0" max="100" /></td></tr><tr><td>出生日期</td><td><input name="date" type="date"/></td></tr><tr><td>所在城市</td><td><select name="city" ><option value="beijing">北京</option><option value="henan" selected="selected">河南</option><option value="shanxi">陕西</option></select></td></tr><tr><td>个人简介</td><td><textarea name="introduce" cols="7" rows="7" > </textarea></td></tr><tr><td>喜欢的颜色</td><td><input name="mycolor" type="color"/></td></tr><tr><td colspan="2"><input name="id" type="hidden" value="123456789"/><!--按钮数据不用提交，所以不需要name属性--><input type="submit" value="提交"/><input type="reset" value="重置"/><!--普通按钮和JS配合使用--><input type="button" value="普通按钮" οnclick="alert('你点我干什么？')"/><input type="image" src="" value="图片按钮"/><!--a使用button标签--><button>提交</button><button type="button">普通按钮</button><button type="reset">重置按钮</button><button type="submit">提交按钮</button></td> </tr></table> </form> </body> </html>
框架标签
框架：
使用框架可以在同一个浏览器窗口中显示不止一个页面
每份HTML文档称为一个框架，并且每个框架都独立于其他的框架
frameset：框架集
rows/clos：规定了每行或每列占据屏幕的面积
frameborder：是否有框架边框
frame：框架
noresize="noresize"：不能调整每个框架的大小
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>框架标签</title> </head> <!--frameset:框架集标签：上下分割页面--> <frameset rows="15%,85%"><frame src="03顶部页面.html"/><frameset cols="20%,*"><frame src="03left.html" name="leftFrame"/><frame src="03right.html" name="rightFrame"/></frameset> </frameset> </html>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>顶部页面</title> </head> <body> 欢迎进入系统 </body> </html>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>下左</title> </head> <body> <ul><li><a href="02表单元素.html" target="rightFrame">信息注册</a></li><li><a href="班级信息.html" target="rightFrame">查看班级</a></li><li><a href="学生信息.html" target="rightFrame">学生信息</a></li><li><a href="就业数据.html" target="rightFrame">就业数据</a></li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>下右</title> </head> <body> <h2>详细信息</h2> </body> </html>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>学生信息</title> </head> <body> <h3><ul><li>姓名：</li><li>性别：</li><li>年龄：</li></ul> </h3> </body> </html>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <h2>班级信息</h2> </body> </html>
其他标签
其他标签
标签 描述 meta 定义网页元信息 link 链接样式表 script 定义JS代码、关联JS文件
特殊字符
特殊字符 描述  （;） 空格 >(;) > <(;) < ®(;) 注册符号 "(;) 双引号 ¥(;) 人名币
总结
HTML
制作网页的一门标签或标记语言
常用标签
结构标签：html, head title body
排版： 注释（<!---->） < br / > <p> <hr/>
标题h1(大)---h6(小)
标签容器：div span
文字：font
格式化;b strong em sub sup
列表 ： ul ol
表格： table tr td th
图片： img
链接 a
表单标签：form
常见表单元素类型
文本框
密码框
单选按钮
复选框
提交按钮
普通按钮
重置按钮
文件
框架标签：frameset frame
特殊符号
H5学习笔记（表单、框架）相关推荐
- 【HTML】学习笔记——表单、框架
[HTML]学习笔记--表单.框架 HTML 表单 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons) ...
- 在html中表单对象以什么标记开始,HTML学习笔记——表单
9.1 表单标记form 在网页中< form>< /form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容.在表单的标记中,可以设置 ...
- 八、PHP框架Laravel学习笔记——表单伪造和 CSRF 保护
一．表单伪造 之前一直用的 GET 请求方式,而表单可以实现 POST 方式,我们来实验下: 先在 TaskController 创建两个方法,一个表单页,一个接受表单数据路由: public fun ...
- html中表单涉及的标记有哪几个,HTML学习笔记--表单标记
表单是网页上的一个特定区域.这个区域是由一对 标记定义的.这一步有几方面的作用.第一方面,限定表单的范围.其它的表单对象,都要插入到表单之中.单击提交按纽时,提交的也是表单范围之内的内容.第二方面,携 ...
- 低代码amis学习笔记(表单)
基本用法 最基本的用法是配置表单项和提交接口API. 表单展示 首先展示默认模式: 其代码 {"type": "page","body": ...
- React学习笔记—表单
表单组件像 <input>.<textarea> 不同于其它的原生组件,因为它们会随着用户交互而改变.这些组件提供了接口方便我们管理这些交互. 交互属性 表单组件提供了一些受用 ...
- Hadoop学习笔记—15.HBase框架学习（基础知识篇）
Hadoop学习笔记-15.HBase框架学习(基础知识篇) HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase ...
- Hadoop学习笔记—18.Sqoop框架学习
Hadoop学习笔记-18.Sqoop框架学习 一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据 ...
- Hadoop学习笔记—16.Pig框架学习
Hadoop学习笔记-16.Pig框架学习 一.关于Pig:别以为猪不能干活 1.1 Pig的简介 Pig是一个基于Hadoop的大规模数据分析平台,它提供的SQL-LIKE语言叫Pig Latin, ...
- Python学习笔记--10.Django框架快速入门之后台管理admin（书籍管理系统）
Python学习笔记--10.Django框架快速入门之后台管理 一.Django框架介绍 二.创建第一个Django项目 三.应用的创建和使用 四.项目的数据库模型 ORM对象关系映射 sqlite ...
最新文章
- linux Centos6.5使用yum安装mysql
- 为何终端防护对ICS如此重要
- 【机器学习PAI实践七】文本分析算法实现新闻自动分类
- Hibernate save, saveOrUpdate, persist, merge, update 区别
- RGB_D_开发征程（使用Kinect）
- 特别慢_这款“爱豆”很特别，它带你重温旧时光，体验慢生活的时代
- 数据结构前缀，后缀，中缀表达式
- RuoYi-Cloud 部署篇_01（linux环境 mysql+nginx版本）
- Java关键字(六)——super
- 华为获 25 份 5G 合同；ofo 退款用户数超千万；贾跃亭躲豪宅拒收法律文书 | 极客头条...
- 同一域名对应多个IP时，PHP获取远程网页内容的函数
- OD使用教程7（上）- 调试篇07|解密系列
- 软Raid5，LVM，3T大硬盘纠缠操作的问题
- 9.Nginx 日志管理
- Excel：自动录入学生的基本情况信息表(转)
- 如何把SWF转为PDF文件
- 重庆兴渝计算机培训中心,重庆兴渝职业中等专业学校招生录取分数线
- 全站仪数据导入电脑_怎么把全站仪的数据导到电脑上来，并且成图？
- 数据压缩算法该如何选择？
- hdlbits刷题记录