php与html表单的交互,php表单html代码
HTML在页面结构、多媒体处理等方面与以前的HTML有很大不同。在本教程中，我们将带领您使用HTML5、CSS3和PHP设计一个符合HTML5标准的简单表单提交页面。读者可以学习HTML5新表单页面的基本元素。本文读者学习表单的设计草图适合有一定HTML，CSS，PHP的读者。
由于这篇文章不是教photoshop的文章，我们只设计设计好的表单的草图，然后用HTML5，CSS3，PHP实现。我们要设计的表单草图如下图所示：
你可以看到，在这个设计草图中，我们期望达到的效果是：当用户输入姓名时，姓名字段的文本框会以焦点的形式显示，而邮件的输入框是圆角边框，而在邮件的文本区的输入框中，有一个背景图。提交按钮是一个自定义按钮。
开始设计。
接下来，我们开始设计表单。本文使用php，所以你可以使用任何PHP编程工具先创建一个index.php文件，然后开始编写符合HTML5标准的表单。
1)关于DOCTYPE
在HTML5中，DOCTYPE的声明会非常简单，代码如下：复制代码如下：
！声明文档类型
超文本标记语言
头
meta http-equiv= Content-Type Content= text/html；charset=utf-8
头衔联系方式/头衔
/头
身体
/body
/html
看到了吗？在HTML5中，页眉的类型声明现在只需要一句话：
还可以，但是相比之前的HTML4，声明起来比较麻烦，如下：复制代码代码如下：
！DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Strict . DTD 。
接下来，我们开始设计页面表单的结构。我们先来看下图，表单的结构：
正如你所看到的，我们被分为页眉区，主体表单的主要区域，页脚区是表单的底部区域。在HTML5中，实现这一切其实很简单，如下：复制代码如下：
！声明文档类型
超文本标记语言
头
meta http-equiv= Content-Type Content= text/html；charset=utf-8
头衔联系方式/头衔
/头
身体
header class=body
/页眉
section class=body
/部分
页脚class=body
/页脚
/body
/html
如你所见，这里没有传统的div。相反，HTML5中有新的标签元素header、footer和section。在这些标签中，header标签指定页面的头部区域，section指定页面的主要区域，footer部分指定页面的尾部区域。与div相比，它们的含义更清晰，语义上更符合使用习惯。同时为他们指定css类体，统一风格。
表单部件设计
接下来看表单部分的设计。首先，如下看代码：如下复制代码：
形式
标签名称/标签
input name= name placeholder= Type Here
标签邮件/标签
input name= email Type= email placeholder= Type Here
标签信息/标签
textarea name= message placeholder= Type Here /textarea
输入id=提交名称=提交类型=提交值=提交
/表单
以下是HTML5中的输入标签与HTML4中的不同之处。在HTML5中，输入标签也有属性，比如名称和id。最大的区别就是在HTML5中的type属性中加入了很多类型来满足用户的需求，但遗憾的是，目前并不是所有的浏览器都支持这些新加入的type属性，所以本文只说明一些新加入的大多数浏览器都支持的type属性，比如上面例子中提到的type=email，这是一个只允许用户输入邮件的文本框。如果某些浏览器不支持电子邮件文本框也没关系，因为它会被识别为传统的type=text文本框。在iOS系统上，当遇到type=email属性时，会打开输入邮件的键盘布局，如下图所示：
在type=email标签中，请注意占位符属性，这里设置为“type here”，表示当用户没有在这个邮箱中输入内容时，会自动出现提示用户输入的文字。这里作为一个提醒，比写很多javascript要好，如下图所示：
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。