<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5+CSS3超酷表单效果</title>
<style>
*: focus{outline: none;}
body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;/**/}
#top_bit{width: 760px;margin: 0 auto;}
form{width: 300px;margin: 20px auto;}
p{line-height: 1.6;}
input, textarea{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #fff;border: 1px solid #ccc;font-size: 20px;width: 300px;min-height: 30px;display: block;margin-bottom: 16px;margin-top: 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
textarea{min-height: 200px;}
input: focus, textarea: focus{-webkit-box-shadow: 0 0 25px #ccc;-moz-box-shadow: 0 0 25px #ccc;box-shadow: 0 0 25px #ccc;-webkit-transform: scale(1.05);-moz-transform: scale(1.05);transform: scale(1.05);}
input: not(: focus), textarea: not(: focus){opacity: 0.5;}
input: required, textarea: required{background: url("/jscss/demoimg/201310/formdemo/asterisk_orange.png") no-repeat 280px 7px;}
input: valid, textarea: valid{background: url("/jscss/demoimg/201310/formdemo/tick.png") no-repeat 280px 5px;}
input: focus: invalid, textarea: focus: invalid{background: url("/jscss/demoimg/201310/formdemo/cancel.png") no-repeat 280px 7px;}
input[type=submit]{padding: 10px;background: none;opacity: 1.0;}
</style>
</head>
<body>
<div id="top_bit">
<h1>HTML5 Form Demo</h1>
<p>If you don't see asterisks or ticks then your browser doesn't support the HTML5 bits we are looking at. Try <a href="/">Chrome Dev builds</a>, <a href="#">Webkit Nightlies</a></p>
</div>
<form action="formdemo.php" method="post">
<label for="name">Name:</label>
<input type="text" name="name" required placeholder="Name" />
<label for="email">Email:</label>
<input type="email" name="email" required placeholder="email@example.com" />
<label for="website">Website:</label>
<input type="url" name="website" required placeholder="website" />
<label for="number">Number:</label>
<input type="number" name="number" min="0" max="10" step="2" required placeholder="Even num < 10">
<label for="range">Range:</label>
<input type="range" name="range" min="0" max="10" step="2" />
<label for="message">Message:</label>
<textarea name="message" required></textarea>
<input type="submit" value="Send Message" />
</form>
</body>
</html>
分享到：
相关推荐
这6款不同的留言表单源码，每一种都展示了独特的设计风格和功能特性。它们可能包括以下部分： 1. 表单布局：表单的排列方式，可能是水平排列，也可能是垂直排列，或者采用网格系统，使表单看起来更整洁有序。 2. ...
分步骤的登录注册表单现在也比较多，主要是能提高用户体验，用户可以有选择性的填写相应的表单信息，...今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单，外观不用说，非常漂亮。你看一下DEMO就知道了。
标题中的“一款漂亮的滑动表单”指的是一个设计精良且具有交互性的用户界面元素，通常用于网页或应用程序中收集用户信息。这种滑动表单的设计可以提高用户体验，因为它允许用户通过滑动或滚动的方式逐步填写信息，而...
为了增加表单的功能性，我们可以使用HTML5的`placeholder`属性提供提示文本，使用`autofocus`属性让特定输入框自动获取焦点，或者使用`disabled`属性禁用某些选项。还可以利用`<fieldset>`和`<legend>`组织表单内容...
【标题】"近100款漂亮CSS3/HTML5按钮合集.rar"涉及的知识点主要集中在CSS3和HTML5的交互设计上，尤其是利用这两种技术实现的各种样式丰富的按钮效果。CSS3是CSS（层叠样式表）的第三个版本，引入了大量新的选择器、...
html5 Ajax漂亮表单，纸张效果的登录框，具备Ajax提示功能的HTML5简单表单，若在没有输入内容或输入错误内容的情况下提交，会在不刷新网页的情况下弹出一个表单提示，类似于Ajax功能的提示，可广泛应用于移动设备上...
【标题】"漂亮Login登陆Form表单html5模板"揭示了这个资源主要是一个设计精美的登录界面，使用了HTML5技术来构建。HTML5是现代网页开发的标准，它提供了更丰富的语义化元素、更好的离线存储功能以及增强的多媒体支持...
本资源提供了一种“漂亮的表单验证样式”，完全基于HTML，无需额外的JavaScript库或CSS框架，仅通过HTML5的内置属性和样式就能实现美观且实用的效果。 1. **HTML5表单元素** HTML5引入了许多新的表单元素，如`...
HTML5响应式模板是现代网页设计中的重要工具，...总的来说，这套"特别漂亮的HTML5响应式模板"提供了一种高效、美观且跨平台的解决方案，适合各种类型的web项目，无论是后台管理系统还是面向用户的界面，都能从中受益。
利用CSS3制作的登录表单的确很漂亮，我们在html5tricks网站上也分享过几款了，比如CSS3密码强度验证表单可以显示密码的强度，这款纯CSS3发光登录表单更是绚丽多彩。今天我们要分享一款仿Facebook的登录表单，无论从...
1. **HTML5**: HTML5是超文本标记语言的最新版本，它引入了许多新特性，如语义化标签、媒体元素、离线存储以及更好的表单控制等。在手机导航菜单中，HTML5用于构建结构化的页面布局，使得菜单元素能够被正确解析和...
例如，使用HTML5的新的表单元素，如`<input type="email">`或`<input type="date">`，可以为用户提供更好的输入体验，同时保持对旧版浏览器的支持。 表单的简洁性也是关键。过多的字段可能会让用户感到压力，从而...
HTML5后台管理模板是现代Web开发中的一个重要工具，它提供了丰富的功能和优秀的用户体验，尤其适合构建后台管理系统。这款高级的HTML5响应式管理模板利用了HTML5的新特性，结合CSS3和JavaScript，使得网页设计更加...
HTML5是一种先进的网页...这款“HTML5超漂亮后台CMS模板”很可能充分利用了这些特性，以创建一个既美观又高效的管理平台。对于开发者而言，这样的模板无疑能够加速项目开发，同时也能满足用户对现代化、易用性的需求。
这款“漂亮的广告公司html5模板”专为广告商务企业设计，旨在提供一个专业且吸引人的在线展示平台。模板的设计和功能都体现了HTML5的最新特性，以确保网站的交互性、响应性和可访问性。 首先，HTML5的语义化元素是...
在本案例中，我们关注的是一个使用HTML5构建的简洁漂亮的登录界面，它不仅注重视觉效果，还充分考虑了跨设备兼容性，包括电脑、平板和手机。 首先，让我们探讨HTML5在登录界面设计中的应用。HTML5引入了一些新的...
而主要的文件“时尚美容造型html5模板是一款暗紫色漂亮时尚美容造型html5模板。”可能是压缩包的主文件，包含了所有构成模板的HTML、CSS、JavaScript和其他资源文件。 综上所述，这款“时尚美容造型html5模板”是...
总结，这款“漂亮的广告公司html5模板”是利用HTML5技术打造的一款适用于广告和商务企业的网站构建工具，具备响应式设计、易用性、品牌一致性等特点，通过模板可以快速建立专业网站，同时，模板的定制性和SEO友好性...
在本资源中，"039 漂亮的登录界面 单页form表单【html登录注册页面代码】" 提供了一个简单的HTML登录界面设计示例，它使用了单页（Single-Page Application, SPA）的概念，并结合了HTML、CSS技术来创建一个吸引人的...
本文将详细解析“幸福恋人主页HTML5模板”，一款专为幸福恋人设计的简洁、大气且漂亮的结婚主页模板。此模板充分利用HTML5的新特性，旨在为即将步入婚姻殿堂的情侣提供一个展示爱情故事、分享婚礼信息的理想平台。 ...