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

<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>

HTML进阶的更多相关文章

  1. nodejs进阶(6)—连接MySQL数据库

    1. 建库连库 连接MySQL数据库需要安装支持 npm install mysql 我们需要提前安装按mysql sever端 建一个数据库mydb1 mysql> CREATE DATABA ...

  2. nodejs进阶(4)—读取图片到页面

    我们先实现从指定路径读取图片然后输出到页面的功能. 先准备一张图片imgs/dog.jpg. file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'.(file. ...

  3. JavaScript进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  4. nodejs进阶(3)—路由处理

    1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...

  5. nodejs进阶(5)—接收请求参数

    1. get请求参数接收 我们简单举一个需要接收参数的例子 如果有个查找功能,查找关键词需要从url里接收,http://localhost:8000/search?keyword=地球.通过前面的进 ...

  6. nodejs进阶(1)—输出hello world

    下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var  http  =  require ...

  7. [C#] 进阶 - LINQ 标准查询操作概述

    LINQ 标准查询操作概述 序 “标准查询运算符”是组成语言集成查询 (LINQ) 模式的方法.大多数这些方法都在序列上运行,其中的序列是一个对象,其类型实现了IEnumerable<T> ...

  8. Java 进阶 hello world! - 中级程序员之路

    Java 进阶 hello world! - 中级程序员之路 Java是一种跨平台的语言,号称:"一次编写,到处运行",在世界编程语言排行榜中稳居第二名(TIOBE index). ...

  9. C#进阶系列——WebApi 接口返回值不困惑：返回值类型详解

    前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.之前分享过一篇 C#进阶系列——WebApi接口传参不再困惑:传参详解  ...

  10. 【腾讯优测干货分享】如何降低App的待机内存（四）——进阶：内存原理

    本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/3FTPFvZRqyAQnU047kmWJQ 1.4进阶:内存原理 在 ...

随机推荐

  1. 【Stack Overflow -- 原创加工、原创整理、生产实战】-- 深度复制

    一.说明 1.本程序的核心代码不是我原创的,是我在Stack Overflow上搜集后加工出来的,原作者已忘记了~ 2.这段程序是我在上海携程(2014年左右)上班时整理并在生产环境应用的,先后经历了 ...

  2. Microsoft office2010页码设置----论文、课程设计报告格式

    思想:将目录页(含目录页)与目录页以下的页面用分隔符分隔开,单独设置目录页以下的页面页码,删除目录页(含目录)以前的页码. 1.在目录页页面内容最下面一行插入分隔符,实现与下面页面分隔开的目的. 页面 ...

  3. Servlet转发到JSP页面的路径问题

    一.现象与概念 1. 问题 在Servlet转发到JSP页面时,此时浏览器地址栏上显示的是Servlet的路径,而若JSP页面的超链接还是相对于该JSP页面的地址且该Servlet和该JSP页面不在同 ...

  4. python中函数的定义,调用，全局变量，局部变量，函数的嵌套使用-初级篇

    函数的基本概述 在学习函数之前,一直遵循:面向过程编程,即:根据业务逻辑从上到下实现功能,可以思考一下如果有某个功能的代码是在多个地方使用的是否可以只写一次?此时的代码该如何定义.先观察以下的案例: ...

  5. linux用户及权限管理

    [文件管理.管道.用户及组管理.用户及权限管理]\用户及组管理 用户与组管理 Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这 ...

  6. JSON的详细介绍

    JSON的语法可以表示以下三种类型的值: 简单值:可以表示字符串,数值,布尔值,null,但不支持undefined. 对象(Object):对象作为一种复杂数据类型,表示的是一组无序的键值对儿. 数 ...

  7. PDF安全模式破解的简单办法

    网上下电子书时,经常会遇到 电子书被加密的情况,此时读者将无法进行标亮,加注释等基本的操作.网上的方法都是建议下个 PDFPasswodRemove 的软件,麻烦而且软件不好用.经各种研究,尝试,发现 ...

  8. hadoop环境中误删除tmp文件夹的恢复

    情景描述: 种种原因,不小心把系统根目录中的tmp文件删除了!发现jps之后看不到 master主机上面的namenode,resourcemanager,secondarynamenode三个进程了 ...

  9. 阿里云服务器Windows Server 2008/2012部署Office Web Server 2013

    以前成功将Office Web Server 2013部署在了本地服务器上,此次是将Office Web Server 2013部署在阿里云服务器Windows Server 2008和2012上,中 ...

  10. log4go的日志滚动处理——适应生产环境的需要

    日志处理有三类使用环境,开发环境DE,测试环境TE,生产环境PE. 前两类可以看成是一类,重要的是屏幕显示--termlog.生产环境中主要用的是socklog 和 filelog,即网络传输日志和文 ...