HTML表单
form标签
<form> 标签代表一个表单,表单用于向服务器传输数据。
标签能够包含 <input> ,可以是文本字段,复选框,单选框或提交按钮等。还可以包含<textarea> <select>等。
<form>常用属性:
name:用于定义表单的名称
action:用于规定提交表单时向何处发送表单数据。
method:用于规定提交的方式。一般取值 POST或GET
关于POST与GET方式区别:
- get方式只能少量数据,而post可以携带大数据。
- get方式提交时,数据会在地址栏上显示,安全性差。Post方式提交不会在地址栏上显示数据,更加安全。
input种类
<input> 标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。
输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
关于<input>标签type属性值说明 :
text
<input type=”text”>
定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
其它常用属性:
- > name:定义标签名称
- > value:定义标签值
- > size:定义输入字段的长度
- > maxlength:定义可输入最大字符个数
password
<input type=”password”>
定义密码字段。该字段中的字符被掩码.
其它常用属性:
- name:定义标签名称
- value:定义标签值
- size:定义输入字段的长度
- maxlength:定义可输入最大字符个数
radio
<input type=”radio”>
定义单选按钮。
其它常用属性:
- name:定义标签名称.注意,对于单选按钮,如果要想做到单一选择,多个radion的name值必一样。
- value:定义标签值
- checked:定义该标签默认被选中。
checkbox
<input type=”checkbox”>
定义复选框。
其它常用属性:
- name:定义标签名称.注意,一组的checkbox它们的name值应该是一样的。
- value:定义标签值
- checked:定义该标签默认被选中。
button
<input type=”button”>
定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)
其它常用属性:
- name:定义标签名称
- value:按钮显示名称
hidden
<input type=”hidden”>
定义隐藏的输入字段。
其它常用属性:
- name:定义标签名称
- value:定义标签值
file
<input type=”file”>
定义输入字段和 “浏览”按钮,供文件上传。
其它常用属性:
- name:定义标签名称
submit
<input type=”submit”>
定义提交按钮。提交按钮会把表单数据发送到服务器。
其它常用属性:
- name:定义标签名称
- value:按钮显示名称
reset
<input type=”reset”>
定义重置按钮。重置按钮会清除表单中的所有数据。
其它常用属性:
- name:定义标签名称
- value:按钮显示名称
image
<input type=”image”>
定义图像形式的提交按钮。
这个标签主要是用了替换submit按钮,因为默认产生的提交按钮并不漂亮,这个标签允许你采用指定的图片做为提交按钮。
其它常用属性:
- name:定义标签名称
- src:定义作为提交按钮显示的图像的url
- alt:定义作用图像的替代文本。
select与option标签
<select>
用于定义一个下拉列表
常用属性:
- name:定义下拉列表的名称
- size:定义下拉列表中可见选项的数目
- multiple:定义可选择多个选项
<option>
用于定义下拉列表中的选项。
<option>需要位于<select>标签内部
常用属性:
- value:定义送往服务器的选项值
- selected:定义选项为选中状态。
textarea标签
<textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)
常用属性:
- name:定义多行文本框名称
- cols:定义多行文本框可见宽度
- rows:定义多行文本框可见行数
- wrap:规定多行文本框中文字如何换行。
文本格式化标签
标签 描述
- <b> 定义粗体文本。
- <big> 定义大号字。
- <em> 定义着重文字。
- <i> 定义斜体字。
- <small> 定义小号字。
- <strong> 定义加重语气。
- <sub> 定义下标字。
- <sup> 定义上标字。
- <ins> 定义插入字。
- <del> 定义删除字。
- <s> 不赞成使用。使用 <del> 代替。
- <strike> 不赞成使用。使用 <del> 代替。
- <u> 不赞成使用。使用样式(style)代替。
表格标签
表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。
框架结构标签(<frameset>)
- 框架结构标签(<frameset>)定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
框架标签(Frame)
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中,而 HTML 文档 “frame_b.htm” 被置于第二个列中:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
注意事项
假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize=”noresize”。
为不支持框架的浏览器添加 <noframes> 标签。
重要提示
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。(在下面的第一个实例中,可以查看它是如何实现的。)
iframe 用于在网页内显示网页。
<iframe src=”URL”></iframe>
URL 指向隔离页面的位置。
Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素,但也可以用百分比来设定(比如 “80%”)。
实例
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 “0” 就可以移除边框:
实例
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性:
实例
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>