HTML表单

form标签

<form> 标签代表一个表单，表单用于向服务器传输数据。

标签能够包含 <input> ，可以是文本字段，复选框，单选框或提交按钮等。还可以包含<textarea> <select>等。
   <form>常用属性:
      name:用于定义表单的名称
      action:用于规定提交表单时向何处发送表单数据。
      method:用于规定提交的方式。一般取值 POST或GET
### 关于POST与GET方式区别: ###
1. get方式只能少量数据,而post可以携带大数据。
2. get方式提交时，数据会在地址栏上显示，安全性差。Post方式提交不会在地址栏上显示数据，更加安全。
## input种类 ##
<input> 标签用于搜集用户信息。
>根据不同的 type 属性值，输入字段拥有很多种形式。

输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

关于<input>标签type属性值说明 :

text

定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

其它常用属性:

name:定义标签名称
value:定义标签值
size:定义输入字段的长度
maxlength:定义可输入最大字符个数

password

定义密码字段。该字段中的字符被掩码.

其它常用属性:

name:定义标签名称
value:定义标签值
size:定义输入字段的长度
maxlength:定义可输入最大字符个数

radio

定义单选按钮。

其它常用属性:

name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样。
value:定义标签值
checked:定义该标签默认被选中。

checkbox

定义复选框。

其它常用属性:

name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。
value:定义标签值
checked:定义该标签默认被选中。

button

定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）

其它常用属性:

name:定义标签名称
value:按钮显示名称

hidden

定义隐藏的输入字段。

其它常用属性:

name:定义标签名称
value:定义标签值

file

<input type=”file”>

定义输入字段和 "浏览"按钮，供文件上传。

其它常用属性:

name:定义标签名称

submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

其它常用属性:

name:定义标签名称
value:按钮显示名称

reset

定义重置按钮。重置按钮会清除表单中的所有数据。

其它常用属性:

name:定义标签名称
value:按钮显示名称

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 - 设置高度和宽度

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>

HTML进阶的更多相关文章

nodejs进阶(6)—连接MySQL数据库
1. 建库连库连接MySQL数据库需要安装支持 npm install mysql 我们需要提前安装按mysql sever端建一个数据库mydb1 mysql> CREATE DATABA ...
nodejs进阶(4)—读取图片到页面
我们先实现从指定路径读取图片然后输出到页面的功能. 先准备一张图片imgs/dog.jpg. file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'.(file. ...
JavaScript进阶之路（一）初学者的开始
一:写在前面的问题和话一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
nodejs进阶(3)—路由处理
1. url.parse(url)解析该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...
nodejs进阶(5)—接收请求参数
1. get请求参数接收我们简单举一个需要接收参数的例子如果有个查找功能,查找关键词需要从url里接收,http://localhost:8000/search?keyword=地球.通过前面的进 ...
nodejs进阶(1)—输出hello world
下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var http = require ...
[C#] 进阶 - LINQ 标准查询操作概述
LINQ 标准查询操作概述序 “标准查询运算符”是组成语言集成查询 (LINQ) 模式的方法.大多数这些方法都在序列上运行,其中的序列是一个对象,其类型实现了IEnumerable<T> ...
Java 进阶 hello world! - 中级程序员之路
Java 进阶 hello world! - 中级程序员之路 Java是一种跨平台的语言,号称:"一次编写,到处运行",在世界编程语言排行榜中稳居第二名(TIOBE index). ...
C#进阶系列——WebApi 接口返回值不困惑：返回值类型详解
前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.之前分享过一篇 C#进阶系列——WebApi接口传参不再困惑:传参详解 ...
【腾讯优测干货分享】如何降低App的待机内存（四）——进阶：内存原理
本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/3FTPFvZRqyAQnU047kmWJQ 1.4进阶:内存原理在 ...

随机推荐

Struts2框架05 result标签的类型
1 result标签是干什么的就是结果,服务器处理完返回给浏览器的结果:是一个输出结果数据的组件 2 什么时候需要指定result标签的类型把要输出的结果数据按照我们指定的数据类型进行处理 3 常 ...
HttpServletResponse addHeader() 与 setHeader() 区别
对于addHeader() 和 setHeader()这两个方法,可能我们在需要的时候,用起来感觉都一样,都能达到想要的效果.但是这两个方法本质上是不一样的. setHeader(name, val ...
了解Java基础原理
Java 是1995年SUN公司推出的一门高级编程语言,是面向互联网的语言,WEB应用程序首选的语言(安卓底层,大数据hadoop框架用java编写,Spark用Scala编写,Scala用java写 ...
php与MySQL（基本操作）
PHP连接 MySQL 在我们访问 MySQL 数据库前,我们需要先连接到数据库服务器,连接服务器,我们使用mysqli_connect()函数. 在使用这个函数之前,我们首先来看一下这个函数的语法: ...
在CentOS7上部署OpenStack 步骤详解
OpenStack作为一个由NASA(美国国家航空航天局)和Rackspace合作研发并发起的,开放源代码项目的云计算管理平台项目.具体知识我会在后面文章中做出介绍,本章主要按步骤给大家演示在Cent ...
ubuntu下处理mysql无法启动故障一例
故障现象: mysql无法启动 1: dmesg |grep mysql [101353.820000] init: mysql post-start process (9077) terminate ...
ServletContext对象统计在线人数
package com.zdsofe.servlet1; import java.io.IOException; import java.io.PrintWriter; import javax.se ...
会话跟踪Cookie与Session
会话跟踪用来跟踪用户的整个会话,常用的是Session和Cookie.Cookie通过客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份. 1.Cookie 1.1概念及使 ...
玛雅游戏[NOIP2011]
题目描述 Mayan puzzle 是最近流行起来的一个游戏.游戏界面是一个7 行5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定 ...
attr(),addClass()使用方法练习
这次我主要是想要完成2个li之间样式的变化.方法比较傻,如果有人有更好的办法或者有别问题,希望可以不吝指教. <!DOCTYPE html><html> <head> ...

HTML进阶