这是HTML学习总结系列的第二篇，第一篇在这里：
HTML 学习总结1入门基本概念、格式文字标签图片标签链接标签表格标签注释
这次的学习内容相较第一次分类少，但是比较杂。

框架集标签

框架标签是将网页设置成网页框架的一种双标签，被设计成框架的网页被切分成若干区域，没有实际的内容，只当做框架用于镶嵌其它的网页。
那么，这个标签是：

<frameset></frameset>

框架集标签的属性

使用的时候需要将HTML文件中的body标签部分替换为框架标签，写成这样：

<html><head></head><frameset rows="500,*" border="3" noresize="noresize"></frame>
</html>

看上面的代码，用frameset替换掉body不难理解，毕竟我们约定做框架的网页不具有实体内容
接着，这里提到了框架标签的三个属性，分别为：

rows/cols 框架的分行或分列
border 分隔框的宽度
noresize 大小是否可调

现在来分别解释一下

第一个，rows 或cols 属性，代表了框架的分行或分列的情况，在引号内书写该属性的值的时候，不需要指明分成几栏，只需要指明每一栏占据的宽度或高度（单位为像素）并使用逗号隔开。浏览器在解析的时候会计算到底分成了几栏。另外，不指定宽度而使其占据剩余位置时，可以使用通配符 “ * ”。
第二个，border 属性，代表了分隔框的宽度，这是属性的数值单位是像素。所以如果你不想加入边框，则可以将它设置为零。
第三个，noresize 属性，表示我们的框架的大小是否可调，frameset标签默认为大小可调，当用户鼠标移动到边框上时，他可以拖拽改变大小。所以如果不想让用户随意改变框架大小，那么可以选择使用这个属性 （当然，也可以选择把边框的宽度设为零，让他找不到）。这个属性的值同属性名称一样。

最后还需要说明的是：框架集标签是可以进行嵌套的，也就是说，在已经分出来的框架中，我们可以借着分栏。

在框架内镶嵌网页

刚刚我们使用 frameset 标签将网页变成框架并划分成了若干区域，每一个区域都是一个单独的可显示页面的子网页（笔者起的名）。现在，我们需要在这些区域内为它镶嵌上一个网页，这需要用到frame这个单标签在框架下添加网页，它的写法如下：

<frame src="...." name="...." />

这里可以看到 frame 标签的两个属性; src 和 name 。它们分别代表着添置连接（这是一个超链接，网页，HTML文件，图片等都是可以的。有关超链接的信息，可参照上一篇学习总结或者问问度娘），以及框架名称。

框架的命名，很主要的一个原因在于可以重复利用一个框架，即在其他标签使用时，可以在某个框架上显示相应内容。还记得上一篇中，我们提到的链接标签 target 属性中的 “某框架名称” 这个值吗？在为框架命名后，就可以使用上述的 target 用法，将打开的网页放在某个框架中了。

综上，举个例子：

先来创造一个带有嵌套的框架

<!--frame-->
<html><head></head><frameset rows="200,*" border="5" noresize="noresize"><frame src="title.html" name="title" /><frameset cols="200,*"><frame src="selection_bar.html" /><frame name="output_page" /></frameset></frameset>
</html>

接着来写标题和选择菜单页面：

<!--title-->
<html><head></head><body><font size="7" color="blue">The test page</font></body>
</html>

<!--selection_bar-->
<html><head></head><body><font size="5" color="red">Please select websites.</font><br /><br /><a href="http://www.baidu.com" target="output_page"/>百度一下<br /><br /><a href="https://www.csdn.net" target="output_page"/>CSDN <br /><br /></body>
</html>

最后来看下结果：

点击左侧的连接可以切换右侧的网页：

nice！！！！

表单标签

说完了框架标签，在来介绍一个很常用的标签：表单！相信很多人都填过各种各样的表，我坚信那些表都是基于这个标签弄出来的。那么，它这样写：

<form></form>

表单标签属性

表单标签属性有四个：

action 规定向何处提交表单的地址（URL）（提交页面）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
target 规定 action 属性中地址的目标（默认：_self）。
enctype 指定当前表单的编码方式的，

对于enctype，有三种编码方式，分别为：

1.text/plain 纯文本方式去发送数据，不对数据进行编码（不常用）
2.application/x-www-form-urlencoded 将数据编码（最常用的）
3.multipart/form-data 在上传文件的时候，使用到它，二进制流
默认为application/x-www-form-urlencoded

上面是考点，圈起来！

为了保持数据提交时的保密性和易读性，通常将 method 设置为“post”。

表单控件标签

在表单中添加表单项，我们需要表单控件标签，它们有三种.

input
select
textarea

我们来分别介绍一下它们：

input 标签

这个标签的功能很多，插入表单项需要用到同一个属性 type ，而不同的表单项需要不同的值，看下表：

<input type=“text”/>      <!– 可编辑文本域 -->
<input type=“checkbox”/>     <!– 多选框 -->
<input type=“radio”/>        <!– 单选框 -->
<input type=“button”/>       <!– 按钮 -->
<input type=“submit”/>       <!– 表单提交-->
<input type=“file”/>     <!– 文件浏览 -->

在添加不同的表单项的同时，需要加入提示语，可以直接在input语句前后添加文本。可以理解为，表单允许添加文本，input 仅提供表单项。

input标签常用的属性，除了type，还有 value，以及 name，在这里还需要进一步说明一下这两个属性选项中的用途。

checkbox ，多选框中，value表示该选项的值，主要用于向服务器传递数据时。name 属性用于标记分组，即使是多选，也可以有很多组的。
radio ，单选框中，name 属性的的作用尤其重要，只有同一name 值的单选向才会被看做是一组！

利用上面的知识，我们来尝试这建立一张表单：

<!--form test-->
<html><head></head><body><font size="5" color="green">餐饮管理</font><form method="post">请选择餐饮设置类型：<br /><input type="radio" name="opretion" value="addition">添加食品<br /><input type="radio" name="opretion" value="search">查询食品<br /><br /><br />请输入食品名称：<input type="text" name="foodName"><input type="submit"></form></body>
</html>

来瞄一眼：

nice！！

select 标签

这个标签可以在表单中插入一个下拉框，写法如下：

<select><option>...</option><option>...</option><option>...</option>
</select>

在 option 间可以添加相对应的选项文本。当然option中仍然可以使用 value 属性。
如果需要设置默认选项，可以在option 标签中加入属性设置：selected = “selected”
name 属性用在select标签上，代表这个下拉框的名称。

textarea 标签

最后一种表单项啦，textarea 文本域标签，可以在表单中添加一个文本域，写法如下：

<textarea rows="20" cols="10" name="aText">文本内容
</textarea>

其中，属性 rows 和 cols 用于设置文本域所占行数和列数。name属性用于设置文本域的名称。
文本内容为默认显示在文本域上的文字。

综上，我们再来搞一张页面：

<html><head></head><body><font size="5" color="green">客房预订</font><form method="post">请输入您的手机号码:<br /><input type="text"/><br /><br /><br />请输入您的身份证号码:<br /><input typ="text"/><br /><br /><br />是否购买自动续订服务：<br /><input type="radio" name="selection" value="yes"/>是<input type="radio" name="selection" value="no"/> 否<br /><br />请选择需要的房间配置:<br /><input type="checkbox" name="content" value="window">窗户&nbsp &nbsp &nbsp<input type="checkbox" name="content" value="air_conditioner">空调&nbsp &nbsp &nbsp <br /><input type="checkbox" name="content" value="bathroom">独立卫浴&nbsp &nbsp &nbsp<input type="checkbox" name="content" value="double_bed">双人床&nbsp &nbsp &nbsp <br /><br />请选择门店：<br /><select><option>XX路一号店</option><option>XX路二号店</option><option>XX路三号店</option></select><br />备注：<br /><textarea rows="10" cols="30" name="tip">在此填写您的备注</textarea><input type="submit" value="点我提交"></form></body>
</html>

nice!!!
（另外，不要忘了可以将框架和表单相结合那就是 nice + nice = nniiccee了！！）

HTML 学习总结2 框架表单相关推荐

在php中表单传值怎么用,PHP学习笔记 01 之表单传值
一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
bootstrap学习（三）表单
bootstrap学习(三)表单基本实例: from-group:可以是其内的标签排列更好 from-control:使标签宽度为100% <form><div class=&qu ...
学习前端——表格、表单
学习前端--表格.表单表格在日常生活中使用的非常的多,比好excel就是专门用来创建表格的工具, 表格就是用来表示一些格式化的数据的,比如:课程表.银行对账单在网页中也可以来创建出不同的表格. ...
laui框架表单大小修改两个属性改变表格提示框（layui-form-label）的大小
laui框架表单大小修改两个属性改变表格提示框(layui-form-label)的大小 (1)直接在html界面上的head中修改表格的属性就好了(2)(3)是layui框架的属性查找的方法 < ...
TP6框架--EasyAdmin学习笔记：Excel表单导入数据库
这是我写的学习EasyAdmin的第四章,这一章我给大家分享下Excel表单导入数据库的全流程需要怎么处理并提供案例首先给大家看下这个功能的原理,下面是PHP连接打印机的代码 public func ...
Struts2框架学习之七：避免表单重复提交
前言防止表单重复提交在web开发中是一个经常遇到的问题,一般来避免重复提交有两种方式:客户端JavaScript代码实现和服务端代码实现.这里主要介绍服务端的实现方式.在服务端实现表单重复提交的基本 ...
Python Django框架学习07：Django表单
HTML表单是网站交互性的经典方式. 本章将介绍如何用Django对用户提交的表单数据进行处理. HTTP 请求 HTTP协议以"请求-回复"的方式工作.客户发送请求时,可以在请求 ...
jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

HTML 学习总结2 框架表单

框架集标签