HTML表单

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基础进阶的更多相关文章

【简单易懂的AMV图文教程-2】VEGAS基础进阶——认识关键帧
[简单易懂的AMV图文教程-2]VEGAS基础进阶--认识关键帧经过了上一期VEGAS基础教程的学习,相信大家都能独立完成一些比较简单的纯剪辑作品了.今天在这里为大家继续介绍VEGAS的一大基础应用 ...
老王Python培训视频教程（价值500元）【基础进阶项目篇 – 完整版】
老王Python培训视频教程(价值500元)[基础进阶项目篇 – 完整版] 教学大纲python基础篇1-25课时1.虚拟机安装ubuntu开发环境,第一个程序:hello python! (配置开发 ...
js基础进阶--关于setTimeout的思考
欢迎访问我的个人博客:http://www.xiaolongwu.cn 先热身看看下面的额代码会打印出什么? for (var i = 0; i < 5; i++) { setTimeout( ...
js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
第二十八节：Java基础-进阶继承，抽象类，接口
前言 Java基础-进阶继承,抽象类,接口进阶继承 class Stu { int age = 1; } class Stuo extends Stu { int agee = 2; } class ...
python最全学习资料:python基础进阶+人工智能+机器学习+神经网络(包括黑马程序员2017年12月python视频(百度云链接))
首先用数据说话,看看资料大小,达到675G 承诺:真实资料.不加密,获取资料请加QQ:122317653 包含内容:1.python基础+进阶+应用项目实战 2.神经网络算法+python应用 3.人 ...
前端基础进阶（五）：全方位解读this
https://segmentfault.com/a/1190000012646488 https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...
python学习大全:python基础进阶+人工智能+机器学习+神经网络
首先用数据说话,看看资料大小,达到675G承诺:真实资料.不加密.(鉴于太多朋友加我QQ,我无法及时回复,) 方便的朋友给我点赞.评论下,谢谢!(内容较大,多次保存) [hide]链接:[url]ht ...
Mybatis基础进阶学习2
Mybatis基础进阶学习2 1.测试基本结构 2.三个POJO package com.pojo; import java.io.Serializable; import java.util.Dat ...
学习python须知，Python基础进阶需掌握哪些知识点？
Python基础进阶需要掌握哪些知识点?Python将是每个程序员的标配,有编程基础再掌握Python语言对于日后的升职加薪更有利.Python语言简洁利于理解,语法上相对容易能够让开发者更专注于业务 ...

随机推荐

(cljs/run-at (JSVM. :all) "一次说白DataType、Record和Protocol")
前言在项目中我们一般会为实际问题域定义领域数据模型,譬如开发VDOM时自然而言就会定义个VNode数据类型,用于打包存储.操作相关数据.clj/cljs不单内置了List.Vector.Set和M ...
元组-tuple功能介绍
#元组不可变类型相当于只读的列表,不可被修改,不可被修改哦 ##创建元组最后加,最后加, 形成良好的习惯 """ tuple() -> empty tuple ...
org.apache.jasper.JasperException: - Page directive must not have multiple occurrences of pageencoding
最近写jsp遇到一系列的低级错误,记录下来权当前车之鉴吧. 错误提示: SEVERE: Servlet.service() for servlet jsp threw exceptionorg.apa ...
【亲测】Appium测试Android混合应用时,第二次切换到WebView失败
要解决的问题:Appium测试Android混合应用时,第二次切换到WebView时失败原因分析:在用Appium测试Android混合应用时,当程序第一次切换到WebView时,可以正常进行自动化 ...
STL—对象的构造与析构
STL内存空间的配置/释放与对象内容的构造/析构,是分开进行的. 对象的构造.析构对象的构造由construct函数完成,该函数内部调用定位new运算符,在指定的内存位置构造对象 ...
classloader加载的双亲委托模式
要深入了解ClassLoader,首先就要知道ClassLoader是用来干什么的,顾名思义,它就是用来加载Class文件到JVM,以供程序使用的.我们知道,java程序可以动态加载类定义,而这个动 ...
以图像分割为例浅谈支持向量机(SVM)
1. 什么是支持向量机? 在机器学习中,分类问题是一种非常常见也非常重要的问题.常见的分类方法有决策树.聚类方法.贝叶斯分类等等.举一个常见的分类的例子.如下图1所示,在平面直角坐标系中,有一些点 ...
[补] winpcap编程——EAP协议与EAPSOCKET实现
EAP SOCKET Implement Mentohust 时间:20161115,大二上 ## 准备. 什么是 EAP 协议 ? WIKI : https://en.wikipedia.org/w ...
JVM常用启动参数
本文参考 jvm参数设置大全:http://www.cnblogs.com/marcotan/p/4256885.html 堆内存分配及gc:http://www.cnblogs.com/weiguo ...
FCKEditor在jsp页面中的配置方法
大家在使用博客园或者是在网站上面发表一些东西的时候,往往会发现,输入文字的不是一个简单的文本框,而是一个类似于word的在线编辑环境.这个插件叫FCKEditor,使用这个插件要进行一定程度的配置,下 ...

HTML基础进阶