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语言简洁利于理解,语法上相对容易能够让开发者更专注于业务 ...

随机推荐

Python学习笔记——import模块
OS模块直接输出系统命令到屏幕,该方法获取的命令返回值不可被赋值给变量,输出结果受编码影响会乱码: import os os.system("ipconfig") 将执行获取的系 ...
js验证表单密码、用户名是否输入--JS的简单应用
在登录.注册时,我们经常会遇到下面这种情况,如果我们没有输入用户名.密码时,系统会弹出提示框.提示框信息提示内容是我们密码没有输入密码或者用户名等.那么这样的弹出框效果是如何实现的呢?文章标题既然与j ...
掌握好这23个Linux命令常用项
运维工程师(Operations)在国内又称为运维开发工程师(Devops),在国外称为 SRE(SiteReliability Engineering).负责维护并确保整个服务的高可用性,同时不断优 ...
DotNetCore跨平台~发布脚本PowerShell的设计
回到目录这几天对PS情有独忠,被它的强大功能所希引,它可以快速部署,快速发布,将一些连带的动作一次的完成,挺方便,类似于早期的bat文件,也像linux平台的bash脚本,但功能上,比前两者都要强很 ...
django Modelform
前言: 为什么要用form去验证呢? 我们提交的是form表单,在看前端源码时如果检查到POST URL及我们提交的字段,如果没有验证我们是否可以直接POST数据到URL,后台并没有进行校验,直接处理 ...
单片机C语言基础编程源码六则2
1.某单片机系统的P2口接一数模转换器DAC0832输出模拟量,现在要求从DAC0832输出连续的三角波,实现的方法是从P2口连续输出按照三角波变化的数值,从0开始逐渐增大,到某一最大值后逐渐减小,直 ...
HDU 3829 Cat VS Dog / NBUT 1305 Cat VS Dog（二分图最大匹配）
HDU 3829 Cat VS Dog / NBUT 1305 Cat VS Dog(二分图最大匹配) Description The zoo have N cats and M dogs, toda ...
最小生成树之Prim算法和Kruskal算法
最小生成树算法一个连通图可能有多棵生成树,而最小生成树是一副连通加权无向图中一颗权值最小的生成树,它可以根据Prim算法和Kruskal算法得出,这两个算法分别从点和边的角度来解决. Prim算法 ...
谈谈localhost与127.0.0.1
localhost意为本地主机,指这台计算机,是给回路网络接口的标准主机名,对应的IP地址为127.0.0.1,可访问本地服务器的web项目(http://localhost). 那么它们有什么区别呢 ...
【转载】DHCP流程
来源: http://network.51cto.com/art/201406/441752.htm DHCP是一个局域网的网络协议,使用UDP协议工作,主要有两个用途:给内部网络或网络服务供应商自动 ...

HTML基础进阶