巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
建站资讯News

HTML5 实战PHP之Web页面表单设计

0
nba篮球竞彩分析互联网站建设(www.slreporter.com) 发布时间:2019-04-20 08:57:02 浏览数: 84
HTML5在页面结构,多媒体处理等多方面都与以往的HTML有很大的不同。在本教程中,将带领大家使用HTML5,CSS3及PHP实际设计一个符合HTML5标准的简单的表单提交网页,读者可以从中学习到HTML5 新的表单页面的基本元素。本文的读者为有一定HTML,CSS及PHP的读者学习

  表单的设计草图

  由于本文不是教photoshop制作的文章,因此只是把设计的表单的草图设计出来,然后去使用HTML5,CSS3和PHP去实现,nba篮球竞彩分析要设计的表单草图如下图所示:
 


  可以看到,在这个设计草图中,nba篮球竞彩分析期望实现的效果是:当用户输入姓名时,NAME字段的文本框会以焦点的形式显示出来,而email的输入框仔细看,是一个圆角边框的输入框,而message的文本区域输入框中,可以看到有一张背景底图。而提交按钮则是一个自定义的按钮。

  开始动手设计

  接下来nba篮球竞彩分析开始进行表单的设计。本文要使用的是php,因此可以用任何的PHP编程工具先建立一个index.php文件,然后开始编写符合HTML5标准的表单。

  1)关于DOCTYPE

  在HTML5中,关于DOCTYPE的声明将变得十分简单,代码如下:复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact Form</title>
</head>
<body>
</body>
</html>

看到了么?在HTML5中,对页面首部的类型声明,现在只需要一句:
  就可以了,而对比下以前的HTML4,需要比较麻烦地去声明,如下: 复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.

接下来,nba篮球竞彩分析开始设计页面表单的结构,nba篮球竞彩分析先来看下如下图,表单的结构:

可以看到,nba篮球竞彩分析分为Header头部区域,Main Body的表单主区域,Footer area则是表单的底部区域。而HTML5中,实现这一切其实十分简单,如下代码: 复制代码代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact Form</title>
</head>
<body>
<header class="body">
</header>
<section class="body">
</section>
<footer class="body">
</footer>
</body>
</html>

可以看到,在这里没有了传统的div,取而代之的是,HTML5中新的标签元素header,footer和section,这些标签中的header标签是指定了页面头部区域,section则指定了页面的主体区域,footer部分则指定了页面的尾部区域,相比div,它们的含义更加清晰,从语义上更符合使用习惯。这里同时为它们指定了css类body,以统一它们的风格。
  表单部分设计
  接下来看下表单部分的设计,先看下代码如下: 复制代码代码如下:
<form>
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>

下面介绍在HTML5中,input标签跟HTML4中的不同。在HTML5中,input标签同样有name和id等属性。而最大的不同,是HTML5中的type属性中,新增了很多类型,以适应用户的需求,但很遗憾的是,目前不是所有浏览器都支持这些新增的type属性,因此本文只讲解其中一些大部分浏览器都支持的新增type属性,比如其中上面例子中谈到的type=email,则是一个只允许用户输入email的文本框。即使有部分浏览器不支持email文本框的话也无所谓,因为会将其识别为一个传统的type=text的文本框,而在iOS系统上,当遇到type=email属性时,将会打开方便输入email的键盘布局,如下图所示:
 


  而在type=email标签中,请留意其中的placeholder属性,这里设置为”type here”,意思是当用户没有在这个email框输入内容时,自动会出现提示用户输入的文字,这里很好地起到提醒的作用,比用一大堆javascript编写的效果要好,如下图:

nba篮球竞彩分析互联是全国知名建站品牌服务商,nba篮球竞彩分析有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

上一篇:整理的15个非常有用的 HTML5 开发教程和速查手册
下一篇: HTML5标签小集
[返回新闻列表]

相关新闻more

30
04月
php开发过程中关于继承的使用方法分享

继承 通常需要这样一些类,这些类与其它现有的类拥有相同变量和函数。实际上,定义一个通用类用于所有的项目,并且不断丰富这个类以适应每个具体项目... >>详情

15
04月
媒体调查月饼消费:电商“私人订制”助长铺张风

据高端网站建设网9月20日消息:当前,平价月饼已成主流。中央实施八项规定、反“四风”以来,月饼消费回归理性,风气明显... >>详情

14
03月
哪里有好的虚拟主机空间?又快又好?又便宜?不

哪里有好的虚拟主机空间?又快又好?又便宜?送自助建站看下这种虚拟主机要求:1、空间够稳定:不要在7天内出现过2-3次“服务器不能服务”,“服... >>详情

01
04月
宁夏团组织微信公众号影响力排行榜「12.16

简介:本周的各级团组织微信公众号影响力排行榜上,大武口青年以578.09的WCI值占据榜首;平罗团委以541.67的WCI值紧随其后;石嘴山... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站
nba篮球竞彩分析