前言
关于本章，内嵌标签和表单是重中之重，必须要会，为日后的MVC架构做铺垫，起到基石的作用！
范例
1.iframe标签的用法
我们看到的网页，一般都是有布局的。比如顶部是标题，底部是产品简介及版权声明，中央左侧是功能菜单，右侧是内容显示等等。
其实说白了，其实际上是三种不同的网页的集合，使用内嵌标签进行管理
我们看一个实例：网页嵌套淘宝网站：
其代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>内嵌标签学习</title>
</head>
<body>
<iframe src="http://www.taobao.com" width="100%" height="600px"></iframe>
</body>
</html>再看一个例子：如果你是个购物狂，京东和淘宝都逛，无法在一张页面上显示怎么办？没关系，实例代码如下：
这样，你就可以两个同时逛了吧，是不是很有意思！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>内嵌标签学习</title>
</head>
<body>
<a href="http://www.jd.com" target="jd">我爱京东</a>
<a href="http://www.taobao.com" target="tb">我爱淘宝</a><br/>
<iframe src="" width="50%" height="400px" name="jd"></iframe>
<iframe src="" width="49%" height="400px" name="tb"></iframe>
</body>
</html>2.form表单
说起表单，其实就是提交数据给服务器与后台进行交互，生活中有很多例子啊。例如你登陆CSDN博客，要输入用户名和密码，然后点击登陆，才能够正常的访问主页。
作用:收集并提交用户数据给指定服务器
属性:
action:收集的数据提交地址也就是URL
method:收集的数据的提交方式
get :适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全.
post:适合大量数据,安全,隐式提交（常用）
注意1:
表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.
提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据
注意2:form标签会收集其标签内部的数据
注意3:form表单的数据提交需要依赖于submit提交按钮.
<form action="#" method="post">
<!--表单内容-->
</form>注意：光有一个表单是不够的，我们还要内容，也就是文本框等内容，先上一个例子，模仿登陆，等下再详细解释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form表单的学习</title>
</head>
<body>
<form action="" method="post">
<div style="text-align: center;">
<h5>CSDN博客</h5>
用户名：<input type="text" id="" value="" placeholder="输入用户名/邮箱/手机号"/><br/>
密 码：<input type="password" name="" placeholder="输入密码"/><br/>
<br/>
<input type="submit" value="登陆"/> <input type="reset" name="" id="" value="重置" />
</div>
</form>
</body>
</html>
大家可能会觉得，怎么长得这么丑！！因为我们还没有学CSS，其实不学前端的话没必要了解太多CSS，找美工去吧！！
前面的你都可以不会，下面必须会！！！
3.form表单内容的学习
- 文本框:
input
type:
text 收集少量的文本数据,用户可见
password 收集用户密码数据
name:数据提交的键,也会被js使用
value: 默认值
文本框的实例，也就是上面说到的那个用户名和密码
- 单选框:
input
type:
radio
name:name属性值相同的单选框只能选择一项数据
value:要提交的数据
checked:checked 使用此属性的单选默认是选择状态
实例：我们注册用户的时候会让我们选择性别，其就是一个单选框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form表单的学习</title>
</head>
<body>
<form action="" method="post">
<h5>张三的注册信息</h5>
用户名：<input type="text" name="username" value="张三"/><br/>
性 别：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<br/>
<br/>
<input type="submit" value="提交"/> <input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>
- 多选框:
input:
type:
checkbox
name:一个多选组需要使用相同的name属性值
value:要提交的数据
checked:checked 使用此属性的多选框默认是选择状态
实例：注册的时候也会出现多选让我们选择爱好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form表单的学习</title>
</head>
<body>
<form action="" method="post">
<h5>张三的注册信息</h5>
用户名：<input type="text" name="username" value="张三"/><br/>
性 别：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<br/>
爱 好:<input type="checkbox" name="hobby" value="足球" checked="checked"/>足球<input type="checkbox" name="hobby" value="游泳" checked="checked"/>游泳
<input type="checkbox" name="hobby" value="棋牌" />棋牌<br/>
<input type="submit" value="提交"/> <input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>
- 下拉框:
select:
name:数据提交的键名,必须声明
子标签option:一个option标签表示一个下拉选项
value:要提交的数据
实例：当单选不足以描述一个属性的时候，就要用到下拉框了，比如说选择毕业大学：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form表单的学习</title>
</head>
<body>
<form action="" method="post">
<h5>张三的注册信息</h5>
用户名：<input type="text" name="username" value="张三"/><br/>
性 别：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<br/>
爱 好:<input type="checkbox" name="hobby" value="足球" checked="checked"/>足球<input type="checkbox" name="hobby" value="游泳" checked="checked"/>游泳
<input type="checkbox" name="hobby" value="棋牌" />棋牌<br/>
毕业院校：<select name="school">
<option value="--请选择--">--请选择--</option>
<option value="清华大学">清华大学</option>
<option value="北京大学">北京大学</option>
<option value="挖掘机技术学院" selected="selected">挖掘机技术学院</option>
</select><br/>
<input type="submit" value="提交"/> <input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>
- 文本域:
textarea:声明一个可以书写大量文字的文本区域
name:数据提交的键名,js和css也会使用
rows:声明文本域的行数
cols:声明文本域的列数
实例：注册时填写个人简介，文本框不足以支撑这么多字，这时候要用到文本域：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form表单的学习</title>
</head>
<body>
<form action="" method="post">
<h5>张三的注册信息</h5>
用户名：<input type="text" name="username" value="张三"/><br/>
性 别：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<br/>
爱 好:<input type="checkbox" name="hobby" value="足球" checked="checked"/>足球<input type="checkbox" name="hobby" value="游泳" checked="checked"/>游泳
<input type="checkbox" name="hobby" value="棋牌" />棋牌<br/>
毕业院校：<select name="school">
<option value="--请选择--">--请选择--</option>
<option value="清华大学">清华大学</option>
<option value="北京大学">北京大学</option>
<option value="挖掘机技术学院" selected="selected">挖掘机技术学院</option>
</select><br/>
个人简介：<textarea rows="3" cols="20">我是张三，我很能打！从前我拜师学艺，习得一身本事。如今已达化境！</textarea><br/>
<input type="submit" value="提交"/> <input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>
- 隐藏标签:
input
type:
hidden
name
value
实例：隐藏按钮，也就是说form表单里要有，但是无需让客户看见，如：注册信息时的用户编号，有些时候没必要让用户知道
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form表单的学习</title>
</head>
<body>
<form action="" method="post">
<h5>张三的注册信息</h5>
ID：<input type="hidden" name="userId" value="ID_001"/><br/>
用户名：<input type="text" name="username" value="张三"/><br/>
性 别：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<br/>
爱 好:<input type="checkbox" name="hobby" value="足球" checked="checked"/>足球<input type="checkbox" name="hobby" value="游泳" checked="checked"/>游泳
<input type="checkbox" name="hobby" value="棋牌" />棋牌<br/>
毕业院校：<select name="school">
<option value="--请选择--">--请选择--</option>
<option value="清华大学">清华大学</option>
<option value="北京大学">北京大学</option>
<option value="挖掘机技术学院" selected="selected">挖掘机技术学院</option>
</select><br/>
个人简介：<textarea rows="3" cols="20">我是张三，我很能打！从前我拜师学艺，习得一身本事。如今已达化境！</textarea><br/>
<input type="submit" value="提交"/> <input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>该文本是无法在页面上看到额，但其真实的存在于表单中！
- 普通按钮:
input:
type:
button
value: 按钮的名字
实例：注册信息需要提交，则提交按钮便是一个例子，只不过我这里的提交按钮以及重置按钮是比较特殊的按钮
（1）提交按钮的type为 submit ，当用户点击这个按钮，将立即挑战之action属性所指向的URL
（2）重置按钮的type为 reset ，当用户点击这个按钮的时候，所有表单项的值将会刷新
写后感：
表单的基本编写是以后项目的基础，博主因为是专攻后台开发，所以对前端的知识也就是简要的概括，讲的只是前端行业的一片牛毛，但是我们Java开发人员又有必要了解这些，所以学一点是必要的，尤其我们后期学到的JQuery以及EasyUI都是操纵这些HTML的元素的，说实话，不是特别难，现阶段你只需了解并熟练编写基本表单已经是足够了!
在这里祝大家发际线不要后移！
扫一扫
1077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
