本文已参与「新人创作礼」活动，一起开启掘金创作之路。
HTML 表单
什么是表单？
- 搜索框
- 登录框
- 文件上传
- 注册
- 留言板
用户：向服务器提交信息（写）
服务器：搜集用户信息
交互
双向交流
读写执行
读取 获取信息
写入 发出信息
小技巧
管理控制器
- 查看器
DOM 文档对象模型 树形结构
浏览器
- 控制台
可以执行JS代码
- 网络
页面的网络连接
- 存储
存储了页面的Cookie信息
表单本身是一个框架，表单里会有很多控件（元素）
action
数据提交到服务器的url
如果为空，提交到当前页面
也可以采用绝对路径和相对路径的形式
method 提交方法
get
url中显示
url 长度有限制
post
上传文件等等
HTTP 请求正文中
enctype
1、application/x-www-form-urlencoded 默认值
2、multipart/form-data 上传文件时,必须要写
表单元素
大部分
<input /> 单标签
type 属性
password 密码框
text 文本框
radio 单选框
checkbox 复选框
reset 重置按钮
file 文件域
hidden 隐藏内容
下拉列表
<select>
<options></options>
</select>
文本域
<textarea></textarea>
可以输入回车换行符
html源码
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
<h1>用户注册页面</h1>
<form
action="#"
method="post"
enctype="multipart/form-data"
>
用户名：<input name="user" type="text"/>
<br />
头像上传<input type="file" name="tx">
<br />
<!--
user=test
-->
密码：<input name="passwd1" type="password"/><br/>
<!--
passwd1=123456
-->
确认密码：<input name="passwd2" type="password"/><br />
<!--
passwd2=123456
-->
性别：<input name="sex" vlaue="1" type="radio" checked="checked">男<input name="sex" value="0" type="radio">女
<!-- sex=1 -->
<br />
爱好： <input name="ah1" vlaue="cf" type="checkbox"/>吃饭
<input name="ah2" value="sj" type="checkbox"/>睡觉
<input name="ah3" value="dyx" type="checkbox"/>打游戏
<!--
ah1=cf
ah2=sj
ah3=dyx
-->
<br />
出生年月： <input type="text" name="year" size="4" />年
<select name="mon" >
<option value="0" selected="selected">[选择月份]</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
<option>。。。</option>
</select>
月
<input type="text" name="day" size="2" />日
<br />
<input type="reset" >
<input type="submit" name="submit" value="提交">
<br />
同意注册协议：
<br/>
<textarea name="xy" ></textarea>
<input type="hidden" name="token" value="e10adc3949ba59abbe56e057f20f883e"/>
</form>
</body>
</html>
iframe框架
<iframe></iframe>
属性
src 在一个页面中显示另一个页面（url）
width 宽度
height 高度
frameborder 1 显示边框 0 不显示边框
name 框架名
scrolling no 不显示滚动条 yes 显示滚动条 auto 根据内容确定是否显示滚动条
html源码
<html>
<head>
<title>testIframe</title>
<meta charset="utf-8">
</head>
<body>
<iframe
src="http://www.baidu.com"
width="100%"
height="3000px"
frameborder="0"
scrolling="yes"
>
</iframe>
</body>
</html>
实例：
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<a href="http://www.baidu.com" target="myFrame" >百度</a>
<a href="http://www.qq.com" target="myFrame" >QQ</a>
<a href="http://www.sohu.com" target="myFrame" >搜狐</a>
<iframe
name="myFrame"
width="100%"
frameborder="0"
height="100%"
>
</iframe>
</body>
</html>
参考文献：
