手机WEB页面(HTML5)实现一键拨号及短信发送功能

在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能

如果需要在移动浏览器中实现拨打电话,发送email,美国服务器,调用sns等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法。

采用url链接的方式,实现在Safari ios,香港服务器,Android 浏览器,webos 浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能。

1.最常用WEB页面JS实现一键拨号的电话拨打功能:

<a href=”tel:10086″>拨打10086</a>

在拨号界面,显示号码,并提示拨打。

支持大部分的浏览器,但是在QQ浏览器上支持不好。

微信现在出现屏蔽常规拨号功能,如果出现,可以在需要拨号页面要做下处理,在网址后面增加一个锚节点mp.weixin.qq.com。

2.最常用WEB页面JS实现一键发送短信功能:

<a href=”sms:10086″>发送短信到10086</a>

在信息录入界面,显示发送号码,并提示录入信息。

支持大部分的浏览器,但是在QQ浏览器上支持不好。

 

3、移动web页面自动探测电话号码

<meta name=”format-detection” content=”telephone=no”>

<meta http-equiv=”x-rim-auto-match” content=”none”>

 

4.使用wtai协议进行拨打电话。

代码如下所示:

实例:

<a href=”wtai://wp//mc;10086″>拨打10086 </a>
<a href=”wtai://wp/ap;10086;”>将10086存储至电话簿 </a>

 

备注:在做响应式网站时,手机端也可实现拔号功能,经测试第一种方式兼容性最好。

思维导图:HTML5和CSS3新特性

HTML5和CSS3一直作为被讨论的热门话题,虽然自己平时经常接触这些新的规范和标准,但是这些新规范具体是什么,有哪些,一时半会却说不上来。最近,在看一些前端大牛们写的文章,摘抄出来一些分享给大家,共勉。


这里写图片描述

作者: 寒泉(winter),是阿里的一位前端大神。他对知识学习的目标理解是,一曰全面,二曰准确


用我自己的看法来讲,全面意味着要架构出一个整体的知识体系,该体系必须涵盖常用的核心功能。(可以采用建立思维导图的方式进行绘制,推荐Mindmanager破解版)

这里写图片描述


结语

整体架构已经建立完成之后,那么我们就可以进行细究具体的知识点(例如某些控件的用法,特性,以及缺陷等)。最终,我们可以信誓旦旦的说,我对这一整块知识有了基本了解,这样只要一想这些知识点大概属于哪一模块,便可以快速地在脑海中进行索引。我们在面试或平时工作中,都将会大大受益!

HTML5_nav标签使用教程

首先nav也是在html5中新增的元素标签。同时和其它新增标签一样,nav在传统html5以前版本Html布局中作为导航条相关常用命名来使用。

比如:    <div class=”nav”>网站导航内容</div>
或    <div id=”nav”>网站导航内容</div>

在html5中特地将以前常用命名nav作为一个新标签元素。此标签常用于导航处布局。
一、html nav标签语法与结构   –   TOP

1、基本语法

<nav>内容</nav>

2、nav加id

<nav id=”abc”>内容</nav>

3、nav加class

<nav class=”abc”>内容</nav>

4、nav标签快速理解掌握
Nav是与导航相关的,所以一般用于网站导航布局。同时完全就像使用div标签、span标签一样来使用<nav>标签可添加id或class,而与div标签又有不同处是,此标签一般只用于导航相关地方使用,所以在一个html网页布局中可能就使用在导航条处,或与导航条相关的地方布局使用。

5、nav配合什么标签使用
DIVCSS5在以前文章教程中介绍过一般导航条使用ul li标签布局,使用一般布局中nav标签与ul li标签配合使用。

小案例如下:

1)、传统html布局

<div id="nav">
<ul>
<li>首页</li>
<li>栏目名称</li>
<li>联系我们</li>
</ul>
</div>

 

 

2)、nav标签后

<nav>
<ul>
<li>首页</li>
<li>栏目名称</li>
<li>联系我们</li>
</ul>
</nav>

aside元素在网站制作中主要有以下两种使用方法

a)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名次解释,等等。

b)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。

由以上HTML布局到HTML5转换其实很容易理解html nav标签使用,以及配合ul li布局导航条技巧。

 

二、兼容性提示
因为<nav></nav>标签是html 5新增的标签,而在IE8及以下IE浏览器(IE8、IE7、IE6)不支持,所以根据需求选择布局HTML。

 

三、html nav css布局案例
通过传统div布局与nav布局进行对比学习,从而从html css布局中掌握nav语法与用法。

以下DIVCSS5通过三个布局实践让大家掌握nav布局,分别:
1)、传统div+ul+li布局导航样式;
2)、nav+ul+li布局导航样式;
3)再在nav+ul+li布局的基础上对nav设置class css样式
通过以上案例让大家明白nav一般配合ul li或直接用于布局导航相关的布局,同时nav就像div那样使用可以直接设置css也可以加class或id 。

 

四、divcss总结

Nav是新增的html标签,只要html中使用nav标签,这样的html布局就变成使用html5布局的网页,但html5新增标签局限性,低版本IE浏览器不支持(如果低版本浏览器浏览新增html5标签,对应布局将失效,设置CSS样式也是无效的),所以谨慎选择使用。一般传统网页通常不会使用html5新增布局,所以注意选择使用。智能手机浏览网页、平板电脑浏览的网页可以适当使用html5新增标签或新增CSS3样式布局。

HTML5中aside标签的两种使用方法

aside元素在网站制作中主要有以下两种使用方法

1)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名词解释,等等。

<article>
  <h1>…</h1>
  <p>…</p>
  <aside>…</aside>
</article>

2)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。

<aside>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
</aside>

HTML5之article元素与section元素之间的区别?

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。内容区块是指将HTML页面按逻辑分割后 的单位。例如对于书籍来说,章、节可以称为内容区块;对于博客网站来说,导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。
在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素?何时用section元素?两者之间的区别是什么?
一、article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论 或独立的插件,或其他任何独立的内容。除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚 注。
现在,让我们以博客为例来看一段关于article元素的代码示例,代码如下:
<article>
<header>
<h1>article元素使用方法</h1>
<p>发表日期:<time pubdate=”pubdate”>2010/10/10</time></p>
</header>
<p>article元素是什么?怎样使用article元素?……</p>
<footer>
<p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
</footer>
</article>
这个示例是一篇讲述article元素使用方法,在header元素中嵌入了文章的标题部分,在标题下部的p元素中,嵌入了一大段该博客文章的正文,在结 尾处的footer元素中,嵌入了文章的著作权,作为脚注。整个示例的内容相对比较独立、完整,因此,对这部分内容使用了article元素。
article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。
接着,让我们来看一个关于article元素嵌套的代码示例,代码如下:
<article>
<header>
<h1>article元素使用方法</h1>
<p>发表日期:<time pubdate=”pubdate”>2010/10/10</time></p>
</header>
<p>article元素是什么?怎样使用article元素?……</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者:shenmiweiyi</h3>
<p><time pubdate datetime=”2011-12-23T:21-26:00″>1小时前</time></p>
</header>
<p>这篇文章很不错啊,顶一下!</p>
</article>
<article>
<header>
<h3>发表者:神秘唯一</h3>
<p><time pubdate datetime=”2011-12-23T:21-26:00″>1小时前</time></p>
</header>
<p>这篇文章很不错啊,对article解释的很详细</p>
</article>
</section>
</article>
这个示例中的内容比上述代码更加完整了,它添加了文章读者的评论内容,示例内容分为几个部分,文章标题放在了header元素中,文章正文放在了 header元素后面的p元素中,然后section元素把正文与评论进行了区分(是一个分块元素,用来把页面中的内容进行区分),在section元素 中嵌入了评论的内容,评论中每一个人的评论相对来说又是比较独立的、完整的,因此对它们都使用一个article元素,在评论的article元素中,又 可以分为标题与评论内容部分,分别放在header元素与p元素中。
另外,article元素也可以用来表示插件,它的作用是使插件看起来好像内嵌在页面中一样。代码如下:
<article>
<h1>一个插件</h1>
<object>
<param name=”allowFullScreen” vlaue=”true”>
<embed src=”#” width=”600″ height=”395″></embed>
</object>
</article>
二、section元素
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容 器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中 或输出到word文档中。
<section>
<h1>section元素使用方法</h1>
<p>什么时候用section元素?怎样合理使用section元素?</p>
</section>
通常不推荐为那些没有标题的内容使用section元素,可以使用HTML5轮廓工具来检查页面中是否有标题 的section,如果使用该工具进行检查后,发现某个section的说明中有”untitiled section”(没有标题的section)文章,这个section就有可能使用不当。
section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,请不要与有着自己的完整的、独立的内容”的article元素混淆。
下面,我们来看article元素与section元素结合使用的示例,希望能够帮助你更好地理解article元素与section元素的区别。
<article>
<h1>article元素与section元素的使用方法</h1>
<p>何时使用article元素?何时使用section元素…..</p>
<section>
<h2>article元素使用方法</h2>
<p>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。</p>
</section>
<section>
<h2>section元素使用方法</h2>
<p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>
</section>
</article>
上述代码中的内容首先是一段独立的、完整的内容,因此使用article元素。该文章分为3段,每一段都有一个独立的标题,因此使用了两个section 元素。请记住,对文章分段的工作也是使用section元素完成的。可能有人会问,为什么没有对第一段使用section元素,这里其实是可以使用 section元素的,但是由于其结构比较清晰,分析器可以识别第一段内容在一个section元素里,所有也可以将第一个section元素省略,但是 第一个section元素里还要包含于section元素或子article元素,那么就必须写明第一个section元素。
在HTML5中,你可以将所有页面的从属部分,譬如导航条、菜单、版权说明等包含一个统一的页面中,以便统一使用CSS样式来进行装饰。最后,关于section元素的使用禁忌总结如下:
1)不要将section元素用作设置样式的页面容器,那是div元素的工作。
2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。
3)不要为没有标题的内容区块使用section元素。
三、两者的区别:
以上讲述了那么多,两者的区别到底是什么呢?事实上,在HTML5中,article元素可以看成是一种特殊类型的section元素,它比 section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的 时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。另外,在HTML5中,div元素变成了一种容 器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。

如何让IE加载特殊的CSS样式

如果你读了这篇文章,你会觉得IE浏览器很是让人头疼。但是如果你是一名优秀的前端开发人员的话,你必须得解决这个问题,我认为你可以用很多方法去 解决这个问题,当然,hack除外,如果使用了hack,那么你做的网站将变得非常的危险!因为你使用了这些hack,你将不能保证这些暂时显示正常的页 面在以后的浏览器中也是正常的,其中有一种很好的方法可以解决这个问题,那就是使用IE的条件注释语句,IE条件注释语句支持所有的IE版本。

一、为什么使用这种方法呢?

  • 首先,这需要一个合理的解决方法
  • 请不要使用Hack(因为它很危险!),让你的代码更加的标准化
  • 你应该写出精简高效果的代码
  • 这种方法是被认可的(至少微软认可)

需要记住的是:这种选择标签不只在CSS中用到,你也可以用它来有选择的控制JS的加载,甚至可以用它来控制网页中的内容显示。

二、开始编写代码

以下这些代码应该出现在head标签内,链接CSS文件还是常规方法。打开和关闭的标签应该遵循就近原则,这些都是HTML标签的基本知识,在方扩 号之间的“IF”和“IE”等字样应该非常的明显,里面的“!”是“不是”的意思,那么“!IE”就是“不是IE”的意思,gt是greater than的缩写,就是高于的意思,gte是greater than or equal的缩写,就是高于或等于的意思,lt是less than的缩写,就是低于的意思,lte是less than or equal的缩写,就是低于或等于的意思。

代码示例:

所有的IE都起作用:

<!--[if IE]>
      <link rel="stylesheet" type="text/css" href="all-ie-only.css/>
<![endif]-->

IE以外的浏览器起作用:

<!--[if !IE]><!-->
        <link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

只有IE7起作用:

<!--[if IE 7]>
      <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

只有IE6起作用:

<!--[if IE 6]>
      <link rel="stylesheet" type="text/css" href="ie6.css"/>
<![endif]-->

只有IE5起作用:

<!--[if IE 5]>
      <link rel="stylesheet" type="text/css" href="ie5.css"/>
<![endif]-->

只有IE5.5起作用:

<!--[if IE 5.5000]>
      <link rel="stylesheet" type="text/css" href="ie55.css"/>
<![endif]-->

只对IE6及以下的版本起作用:

<!--[if lt IE 7]>
      <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/>
<![endif]-->
<!--[if lte IE 6]>
      <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/>
<![endif]-->

只对IE7及以下的版本起作用:

<!--[if lt IE 8]>
      <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/>
<![endif]-->
<!--[if lte IE 7]>
      <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/>
<![endif]-->

只对IE8及以下的版本起作用:

<!--[if lt IE 9]>
      <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/>
<![endif]-->
<!--[if lte IE 8]>
      <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/>
<![endif]-->

只对IE6及以上的版本起作用:

<!--[if gt IE 5.5]>
      <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/>
<![endif]-->
<!--[if gte IE 6]>
      <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/>
<![endif]-->

只对IE7及以上的版本起作用:

<!--[if gt IE 6]>
      <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/>
<![endif]-->
<!--[if gte IE 7]>
      <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/>
<![endif]-->

只对IE8及以上的版本起作用:

<!--[if gt IE 7]>
      <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/>
<![endif]-->
<!--[if gte IE 8]>
      <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/>
<![endif]-->

三、通常对IE6做这样的处理:
(本站就是这样处理的)
对于IE6及以下版本的处理是很具有挑 战性的.近来,人们都在呼吁对IE6不要太在意,包括一些企业,一些网络应用,甚至是政府。现在有一个比让这些在 IE6下让人惨不忍睹的网站下地域更好的解决方案,那就是单独写一个针对IE6的精简的CSS样式表,这样至少不会影响人们浏览网页的主要内容。然后再写 一个IE6以上版本及其它的浏览器用的正常的CSS,这样不是很好?

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
 
<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
 
<!--[if lte IE 6]>
  <link 
rel="stylesheet" type="text/css" media="screen, projection" 
href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

四、如果你非要用HACK来解决的话……请往下看
只对IE7起作用:

* html #div {
    height: 300px;
}

对非IE7起作用:

#div {
    _height: 300px;
}

只对IE6以上的版本起作用:

#div {
   height: 300px;
}
html->body #div {
      height: 300px;
}

十六进制色值什么时候能缩写为3位

制作网页时,我们经常会把色标值简写为:#FFF,或#CCC等,但有时会写成#FFFFFF,#CCCCCC,这两种书写形式有什么不同呢,或者说它们之间有什么联系呢?下面就简要的说说。

我们知道:#FFF,#CCC,#FFFFFF,#CCCCCC,这种格式是十六进制的色值写法,当书写的为3位时,那3位字母分别对应代表的是三原色R(red)、G(green)、B(blue)的取值数;若书写为6位时,那第1、2位代表的是R取值,第3、4位代表的是G的取值,第5、6位代表的是B的取值。

明白了这两种书写格式分别代表的函义,那就比较好理解它们之前的区别和联系了。

其实,#FFF是#FFFFFF的缩写,#CCC是#CCCCCC的缩写,但并不是所有的色标值都可以缩写的,必须符合一定格式的色标值才能缩写。比如:
#000000 –> #000;
#AABBCC –> #ABC;
#999999 –> #999;
#112233 –> #123

从上面的例子可总结出,6位可以缩写为3位的,都是以每2位为缩写单位,且数值必须相同的,即R、G、B对应的两位取值数完全一致时才可以缩写为3位。

url与uri 区别

url是全球资源定位符的英文所写,您平时上网时在IE浏览器中输入的那个地址就是url。
比如:网易 http://www.163.com就是一个url。 uri是Web上可用的每种资源 - html文档、图像、视频片段、程序,
由一个通过通用资源标志符( universal Resource Identifier, 简称” uri”)进行定位。

url的格式由下列三部分组成:

第一部分是协议(或称为服务方式);

第二部分是存有该资源的主机IP地址(有时也包括端口号);

第三部分是主机资源的具体地址。

  uri一般由三部分组成:

 访问资源的命名机制。

 存放资源的主机名。

 资源自身的名称,由路径表示。

==========================================================

URIs, URLs, and URNs

首 先,URI,是uniform resource identifier,统一资源标识符,用来唯一的标识一个资源。而URL是uniform resource locator,统一资源定位器,它是一种具体的URI,即URL可以用来标识一个资源,而且还指明了如何locate这个资源。而 URN,uniform resource name,统一资源命名,是通过名字来标识资源,比如mailto:java-net@java.sun.com。也就是说,URI是以一种抽象的,高层 次概念定义统一资源标识,而URL和URN则是具体的资源标识的方式。URL和URN都是一种URI。

框架

框架

学习手册的制作:它其实就是网页框架的制作,生成电子书的一具。“电子书制作工具”关键字。

框架主要应用于:电子书、帮助手册、企业网站的后台管理等。

框架技术,对于低版本的浏览器一般不支持,IE浏览器支持最好,Firefox浏览支持不太好。

网站前后一般不用框架实现,网站后台一般用框架实现。

 

框架技术:它就是将一个浏览器窗口划分成不同的小窗口,每个小窗口都显示不同的HTML网页。

框架就像一个窗户一样。一个窗户由:窗格和玻璃构成。

一个框架由:框架集(<frameset>)和框架页(<frame>)构成。

 

实例:一个上下型的框架

<frameset rows=“180,*,180”>

<frame src=“topFrame.html” />

<frame src=“mainFrame.html” />

<frame src=“rightFrame.html” />

</frameset>

 

注意事项:<frameset>和<body>只能二选一。

<frameset>的常用属性

Cols:划分列的框架,如:cols=“180,10,*”左180px,中间10px,右边为自动

Cols=“20%,10%,*”可以使用百分比表示

Rows:划分行的框架,如:rows=“180,*”

Frameborder:是否显示框架边线,取值:yes或no

Border:设置框线的粗细,border=“20”

Bordercolor:设置框线的颜色

 

<frame>的常用属性

Src:引入一个HTML文件进来,在指定的一个小窗口中显示;

Scrolling:设置滚动条如何显示,取值:auto、yes、no

Noresize:不能调整框架的尺寸;

Name:设置当前窗口(框架)的名称;

 

注意:框架中需要注意的是:一是左框架的链接内容,如何在主框架显示?

              如果返回框架首页,取决于<a>标记的 target属性的设置!

 

浮动框架(行内框架、内嵌框架)

浮动框架,就是在一个网页中开一个“小窗口”,在小窗口中来显示一个网页的内容。

<iframe>是<body>的子标记。

<iframe>如果浏览器不支持时,显示的提示信息</iframe>

 

<iframe>的常用属性

Src:引入哪一个网页文件进来;

Width:指浮动框架的宽度

Height:指浮动框架的高度

Frameborder:是否显示框架边框,取值:yes、no、1、0

Scrolling:网页内容该如何显示,取值:auto、yes、no

Align:实现框架和文本混排

Hspace:左右间距

Vspace:上下间距

 

框架是将一个浏览器窗口划分成多个小窗口。

作用:将多个网页并列显示。

一个框架由框架集<frameset>和框架页<frame>构成

<frameset>和<body>两者取其中一个。

<frameset cols=“100,*,100” rows=“*”>

<frame src=“left.html” noresize=“noresize” scrolling=“auto”name=“leftFrame” />

<frame src=“center.html” noresize=“noresize” scrolling=“auto”name=“centerFrame” />

<frame src=“right.html” noresize=“noresize” scrolling=“auto”name=“rightFrame” />

<noframes>你的浏览器不支持框架!</noframes>

</frameset>

XHTML简介(3)

XHTML编写规范

1)所有的标记、属性都要小写;

2)所有的标记都要关闭,如:<hr /> <br /> <meta /> <img />

3)所有的属性值都要加引号

4)所有的属性都必须要有值,例如:<hr noshade=“noshade” />

5)DTD文档类型定义,DTD就是一套标记的验证规则而已。

严格型:结构(HTML标记)和表现(CSS)完全分离

过渡型:可以在结构中,来书写样式、格式。

框架型:主要用来作框架,将一个浏览器窗口划分成不同的小窗口,一个小窗口中可以来显示一个网页。

 

表格:很细表格边线的制作

CSS的写法:style=”border-collapse:collapse;”

表单

1、表单的主要作用:收集用户信息的。

2、表单的工作原理

1)填写有表单的网页,点击“提交按钮”进行提交;

2)表单数据,通过互联网传递到了服务器

3)服务器上有专门的程序,对提交的表单数据进行验证;

4)如果验证通过,直接写入数据库;

5)如果验证失败,将返回一个错误信息;

因此,表单的开发分两个部分,一是前台表单页面的制作和排版,二是后台PHP程序对表单数据的验证和写入数据库。

 

3、实例:用户登录的表单

<form name=“form1”>

用户名:<input type=”text” name=”username” size=”40″ />

密码:<input type=”password” name=”password” size=”40″ />

<input type=”submit” name=”submit” value=”提交表单” />

</form>

 

4<form>标记常用属性

Name:表单的名称,用于JS来操作或控制表单时使用;

Id:表单的名称,用于JS来操作或控制表单时使用;

Action:指定表单数据的处理程序,一般是PHP,如:action=“login.php”

Method:表单数据的提交方式,一般取值:get(默认)和post

GET方式:将表单数据,以“name=value”形式追加到action指定的处理程序的后面,两者间用“?”隔开,每一个表单的“name=value”间用“&”号隔开。

file:///E:/itcast/20140706/lesson/day4/login.php?username=admin&password=admin1234&submit=提交表单

特点:只适合提交少量信息,并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

POST方式:将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。

Action指定的处理程序可以获取到表单数据。

特点:可以提交海量信息,相对来说安全一些,提交的数据格式是多样的(Word、Excel、rar、img)

Enctype:表单数据的编码方式(加密方式),取值:application/x-www-form-urlencoded、multipart/form-data

Enctype只能在POST方式下使用。

Application/x-www-form-urlencoded默认加密方式:除了上传文件之外的数据都可以

Multipart/form-data:上传附件时,必须使用这种编码方式。

 

5、单行文本框:用户名中、邮箱、QQ号、公司地址等

<input type=“text” name=“name” value=“默认值” size=“宽度” maxlength=“最大字符数” />

Type:指定文本框的类型,取值:text(文本框)、password(密码)、radio(单选)、checkbox(复选框)

Name:指定文本框的名称

Value:指文本框中默认显示的文本;

Size:指文本框的宽度(字符数)

Maxlength:最大可以输入多少个字符

 

注意:表单和表格嵌套时,是在<form>标记中赋套<table>标记。

 

6、单行密码框

<input type=“password”name=“name”size=“”maxlength=“” />

 

7、单选项

<input type=“radio”name=“sex”value=“先生”checked=“checked” />先生

<input type=“radio”name=“sex”value=“女士” />女士

Checked属性:是默认选择其中一项。

提示:单选是一组相互排斥的选项,每次只能选择一个,不能同时选择多个。

 

8、复选框:同时选择多个,也可以一个都不选

<input type=“checkbox” name=“hobby”value=“游戏” checked=“checked” />游戏

<input type=“checkbox” name=“hobby”value=“杀人” />杀人

<input type=“checkbox” name=“hobby”value=“吹牛” />吹牛

Checked属性:默认选中哪几个选项

提示:复选框也是一组选项,名称是一样的,最终用PHP来获取值时,将产生一个数组(一个名称好几个不同的值)的结果。

 

9、上传文件

<input type=“file”name=“uploadFile” />

提示:如果要限制上传文件的类型,需要配合JS来实现验证。对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。

 

10、文本区域

<textarea name=“name” cols=“宽度” rows=“高度”>默认的显示文本</textarea>

 

11、下拉列表

<select name=“city”>

<option value=“北京市”selected=“selected”>北京市</option>

<option value=“天津市”>天津市</option>

</select>

Selected属性:是默认选中一个下拉列表项;

 

12、提交按钮、重置按钮、普通按钮、图片按钮

提交按钮:<input type=“submit” name=“submit” value=“提交表单” />

注意:如果按钮上的文本,不想发送到服务,可以不用加name属性。

重置按钮:<input type=“reset” name=“reset” value=“重新填写” />

普通按钮:<input type=“button” name=“button” value=“普通按钮”/>

<input type=”button” value=”提交表单” onclick=”javascript:this.form.submit()” />

普通按钮没有任何功能,既不会提交表单,也不会重置表单;如果想实现“提交”“重置”功能,将需要配合JS来实现。

图片按钮:<input type=“image” src=“图片的URL”/>

图片按钮的默认动作,就是提交表单。