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


Posted in HTML / CSS onOctober 09, 2011

HTML5在页面结构,多媒体处理等多方面都与以往的HTML有很大的不同。在本教程中,将带领大家使用HTML5,CSS3及PHP实际设计一个符合HTML5标准的简单的表单提交网页,读者可以从中学习到HTML5 新的表单页面的基本元素。本文的读者为有一定HTML,CSS及PHP的读者学习

表单的设计草图

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

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

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

开始动手设计

接下来我们开始进行表单的设计。本文要使用的是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">.

接下来,我们开始设计页面表单的结构,我们先来看下如下图,表单的结构:
HTML5 实战PHP之Web页面表单设计
可以看到,我们分为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的键盘布局,如下图所示:
 

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

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

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

HTML / CSS 相关文章推荐
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
HTML5标签小集
Aug 02 #HTML / CSS
HTML5的革新 结构之美
Jun 20 #HTML / CSS
HTML5 声明兼容IE的写法
May 16 #HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 #HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 #HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 #HTML / CSS
html5时钟实现代码
Oct 22 #HTML / CSS
You might like
PHP 开发工具
2006/12/06 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python实现的双色球生成功能示例
2017/12/18 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
高分子材料个人求职信范文
2013/09/25 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
歌咏比赛主持词
2015/06/29 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
大学生支教感言
2015/08/01 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
python创建字典及相关管理操作
2022/04/13 Python