<!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就知道了。
标题中的“一款漂亮的滑动表单”指的是一个设计精良且具有交互性的用户界面元素，通常用于网页或应用程序中收集用户信息。这种滑动表单的设计可以提高用户体验，因为它允许用户通过滑动或滚动的方式逐步填写信息，而...
【标题】"近100款漂亮CSS3/HTML5按钮合集.rar"涉及的知识点主要集中在CSS3和HTML5的交互设计上，尤其是利用这两种技术实现的各种样式丰富的按钮效果。CSS3是CSS（层叠样式表）的第三个版本，引入了大量新的选择器、...
html5 Ajax漂亮表单，纸张效果的登录框，具备Ajax提示功能的HTML5简单表单，若在没有输入内容或输入错误内容的情况下提交，会在不刷新网页的情况下弹出一个表单提示，类似于Ajax功能的提示，可广泛应用于移动设备上...
【标题】"漂亮Login登陆Form表单html5模板"揭示了这个资源主要是一个设计精美的登录界面，使用了HTML5技术来构建。HTML5是现代网页开发的标准，它提供了更丰富的语义化元素、更好的离线存储功能以及增强的多媒体支持...
为了增加表单的功能性，我们可以使用HTML5的`placeholder`属性提供提示文本，使用`autofocus`属性让特定输入框自动获取焦点，或者使用`disabled`属性禁用某些选项。还可以利用`<fieldset>`和`<legend>`组织表单内容...
本资源提供了一种“漂亮的表单验证样式”，完全基于HTML，无需额外的JavaScript库或CSS框架，仅通过HTML5的内置属性和样式就能实现美观且实用的效果。 1. **HTML5表单元素** HTML5引入了许多新的表单元素，如`...
HTML5响应式模板是现代网页设计中的重要工具，...总的来说，这套"特别漂亮的HTML5响应式模板"提供了一种高效、美观且跨平台的解决方案，适合各种类型的web项目，无论是后台管理系统还是面向用户的界面，都能从中受益。
利用CSS3制作的登录表单的确很漂亮，我们在html5tricks网站上也分享过几款了，比如CSS3密码强度验证表单可以显示密码的强度，这款纯CSS3发光登录表单更是绚丽多彩。今天我们要分享一款仿Facebook的登录表单，无论从...
例如，使用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友好性...
1. **HTML5**: HTML5是超文本标记语言的最新版本，它引入了许多新特性，如语义化标签、媒体元素、离线存储以及更好的表单控制等。在手机导航菜单中，HTML5用于构建结构化的页面布局，使得菜单元素能够被正确解析和...
本文将详细解析“幸福恋人主页HTML5模板”，一款专为幸福恋人设计的简洁、大气且漂亮的结婚主页模板。此模板充分利用HTML5的新特性，旨在为即将步入婚姻殿堂的情侣提供一个展示爱情故事、分享婚礼信息的理想平台。 ...
“餐饮酒店类html5黑色模板是一款黑色精品漂亮的餐饮酒店的html5网站模板。” 这个文件名称看起来是重复的描述，但可能是模板的主文件夹或者包含所有模板文件的压缩包本身的名称。 【相关知识点】 1. HTML5：HTML5...