今天,我们来学习一下如何用HTML5和CSS3创建一个简单的contact form,并提供代码下载。虽然许多WordPress插件可以马上安装和使用功能齐全的contact form,但是很多人还是倾向于有个独特的风格和漂亮的界面。因此,今天教程的重点是如何创建,至于喜欢什么风格,你可以使用CSS3来实现。网上有很多类似的教程,但它们都不是用HTML5来实现的,大部分都是基于HTML4或是XHTML1.0,今天我们就使用基于HTML5和CSS3来做一个contact form。
CSS3 style.css代码如下:
/* =========================== ======= Body style ======== =========================== */ body { padding: 50px 100px; font-size: 13px; font-style: Verdana, Tahoma, sans-serif; } h2 { margin-bottom: 20px; color: #474E69; } /* =========================== ====== Contact Form ======= =========================== */ input, textarea { padding: 10px; border: 1px solid #E5E5E5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; } textarea { width: 400px; height: 150px; max-width: 400px; line-height: 18px; } input:hover, textarea:hover, input:focus, textarea:focus { border-color: 1px solid #C9C9C9; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px; } .form label { margin-left: 10px; color: #999999; } /* =========================== ====== Submit Button ====== =========================== */ .submit input { width: 100px; height: 40px; background-color: #474E69; color: #FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
HTML5代码如下:
下载HTML代码 index 同时发布于:J4ML HTML5和CSS3推荐书籍:HTML5与CSS3基础教程(第7版)
相关推荐
这是一个示例单页应用程序,使用了自2010年以来我所学和创建的库和原理。我的库包括: 表格文件 样式表文件 HTML文件中嵌入PHP脚本 HTML文件中嵌入的Javascript脚本 嵌入式和外部链接的jQuery脚本。 该表格具有...
它将可视布局工具、应用程序开发功能和代码编辑支持组合为一个功能强大的工具,使每个级别的开发人员和设计人员都可利用它快速创建界面吸引人并且基于标准的站点和应用程序。 从对基于 CSS 的设计提供领先的支持到...
,响应式设计和视网膜就绪,易于使用,使用wordpress内置的图库创建图库,无限组合(支持多个嵌套组合),HTML5,CSS3,支持jQuery,灵活的图像和视频,完整的博客系统(支持所有帖子格式);2个博客布局(带或不带...
联系人列表和相关详细信息存储在名为contacts的数组中。 您希望创建一些助手功能来显示联系人,按城市过滤并进行一些修改。 现有文件 文件路径 描述 index.html 它包含要呈现的联系人列表的占位符元素。 它还包含...
必要时可以显示或隐藏添加联系人表单 标记为紧急联系人的联系人必须容易被取消 必须添加自定义Google字体 重新加载页面时显示联系人 功能性 提交后清除“添加联系人”表单 添加联系人表单提交不会重新加载页面 联系...
这次,我们将创建一个小的联系人管理应用程序,该应用程序允许用户:阅读,创建,更新和删除联系人。 您可以使用此gif: 或者您可以使用以下图像: 和 请为此项目使用上下文:样板配置了上下文。 检查/store...
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...
HW-02我的自适应档案袋目录描述分配的目的是创建可在多个设备上读取的... 联系人页面包含一个表格,用户可以在提交表格与我联系之前输入其姓名,电子邮件地址和消息。 所有页面都被链接。 如果用户单击NavBar中的任何链
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...
Ajax-Ajax-Contact-Form.zip,一个简单的ajax联系人表单,用php开发,带有html5表单验证和纯javascript,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态...
阿寒名字生成器这是一个允许用户输入生日和性别并返回相应“阿寒”姓名的...已知错误不适用使用的技术HTML5 CSS 引导程序 jQuery jQuery 缓动支持和联系方式如果您遇到任何问题或有疑问、想法或疑虑,请发送邮件执照
该项目的目标是创建一个包含3页的干净的投资组合页面-关于我,联系人和投资组合。 设计需要具有响应性,以便用户和访问者可以通过各种移动设备访问它并且呈现良好。 该项目涉及使用 Bootstrap 元素、edia 查询和 ...
当用户的日记、相册、金币数达到条件,会自动升级到下一个等级。 (2)、系统用户组,默认组不能删除否会出现严重错误。用途即为当新增加一个[注册用户组(等级)],那么默认的权限会根据系统用户组中的[注册用户]...
使用HTML5和CSS3网格来构建每个网格,并从头开始对网站上的每个页面进行样式设置(无需Bootstrap)。 访问网站 如果您想查看整个网站,则域名为 。 如果您发现任何内容有误,请通过联系页面通知我。 实施联系页面 ...
联系人页面具有导航栏和联系表单,该表单是自举程序和CSS的混合体。 每个html文件。 具有自己CSS,该CSS具有重写某些引导程序元素的功能。 在CSS中必须将一个元素标记为重要(!重要)。 所有其他元素均处于正常...
Ajax-simple-phonebook.zip,一个简单的php mysql联系人表单,用于查看和保存联系人号码。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中...
使用的技术该项目使用以下技术:JSP、JSTL、JPQL、JDBC、EJB、EJBQL 3.0、Servlets、JavaEE、HTML5、CSS3、jQuery、jQuery UI、GlassFish 安装您需要将库 minMail (/build/web/WEB-INF/lib/mail.jar) 添加到库项目...
贡献使开源社区成为了一个令人赞叹的学习,启发和创造场所。 您所做的任何贡献都将不胜感激。 分叉项目 创建功能分支( git checkout -b feature/AmazingFeature ) 提交更改( git commit -m 'Add some ...