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. python+selenium自动化测试环境安装

    因为自己安装自动化测试环境时,遇到过许多问题,自己整理了一下安装的步骤,感谢那些帮助过我的人. 1.安装python,我装的是3.5版本,网络上也有许多安装步骤,照着就可以了(其实一直下一步也行) 不 ...

  2. [IB配置]PeopleSoft如何重置网关属性administrator密码

    当您在登陆主菜单>PeopleTools>继承代理程序>配置>网关>网关设置属性在尝试打开网关属性配置时候,需要输入账号:administrator以及密码,有时候在升级 ...

  3. java三大框架介绍

    常听人提起三大框架,关于三大框架,做了如下了解: 三大框架:Struts+Hibernate+Spring java三大框架主要用来做WEN应用. Struts主要负责表示层的显示 Spring利用它 ...

  4. vue 自定义组件

    1.Vue.component('component-test', { props:{}, data:function(){ return{} }, mounted:function(){}, com ...

  5. struts2教程&实例

    1.第一个struts2项目 参考官方配置 http://struts.apache.org/getting-started/ github地址:https://github.com/unbeliev ...

  6. maven简介及基础使用

    一.Maven简介 Maven可译为"知识的积累"."专家",主要服务于基于Java平台的项目构建.依赖管理和项目信息管理. 1.Maven-项目构建工具    ...

  7. Log4Net（一）：快速入门

    概览 Log4Net是Apache Log4J框架在.NET平台上的实现,它是一个帮助开发者将日志信息以多种方式(数据库.控制台.文件等)输出的开源工具. 为什么要使用日志记录 提供应用程序运行时状态 ...

  8. Objective-C 自定义UISlider滑杆 分段样式

    效果 自定义一个功能简单的分段的滑杆 可显示分段名 为了显示效果,我们将滑块和节点都设置为不规则 这里只实现了分段的slider,未分段的没有实现,有兴趣的可以定义另一种类型做个判断修改下 需求分析 ...

  9. 【samba】samba 用户权限配置（转）

    首先要保证你的samba安装并配置好,关于安装和配置samba请参考此文章 http://blog.csdn.net/linglongwunv/archive/2010/01/19/5212875.a ...

  10. MySQL学习笔记(一)：SQL基础

    定义:SQL即Structure Query Language(机构化查询语言)的缩写,是使用关系数据库的应用语言. 包括三个类别: (1):DDL(Data Definition Language) ...