`
wyf
  • 浏览: 436549 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

HTML5 一款漂亮的表单

阅读更多
<!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款漂亮HTML CSS样式用户留言表单的相关源码

    这6款不同的留言表单源码,每一种都展示了独特的设计风格和功能特性。它们可能包括以下部分: 1. 表单布局:表单的排列方式,可能是水平排列,也可能是垂直排列,或者采用网格系统,使表单看起来更整洁有序。 2. ...

    HTML5实现漂亮的分步骤注册登录表单

    分步骤的登录注册表单现在也比较多,主要是能提高用户体验,用户可以有选择性的填写相应的表单信息,...今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单,外观不用说,非常漂亮。你看一下DEMO就知道了。

    一款漂亮的滑动表单

    标题中的“一款漂亮的滑动表单”指的是一个设计精良且具有交互性的用户界面元素,通常用于网页或应用程序中收集用户信息。这种滑动表单的设计可以提高用户体验,因为它允许用户通过滑动或滚动的方式逐步填写信息,而...

    美观又功能齐全的HTML form表单

    为了增加表单的功能性,我们可以使用HTML5的`placeholder`属性提供提示文本,使用`autofocus`属性让特定输入框自动获取焦点,或者使用`disabled`属性禁用某些选项。还可以利用`&lt;fieldset&gt;`和`&lt;legend&gt;`组织表单内容...

    近100款漂亮CSS3/HTML5按钮合集.rar

    【标题】"近100款漂亮CSS3/HTML5按钮合集.rar"涉及的知识点主要集中在CSS3和HTML5的交互设计上,尤其是利用这两种技术实现的各种样式丰富的按钮效果。CSS3是CSS(层叠样式表)的第三个版本,引入了大量新的选择器、...

    html5 Ajax漂亮表单,纸张效果的登录框.rar

    html5 Ajax漂亮表单,纸张效果的登录框,具备Ajax提示功能的HTML5简单表单,若在没有输入内容或输入错误内容的情况下提交,会在不刷新网页的情况下弹出一个表单提示,类似于Ajax功能的提示,可广泛应用于移动设备上...

    漂亮Login登陆Form表单html5模板

    【标题】"漂亮Login登陆Form表单html5模板"揭示了这个资源主要是一个设计精美的登录界面,使用了HTML5技术来构建。HTML5是现代网页开发的标准,它提供了更丰富的语义化元素、更好的离线存储功能以及增强的多媒体支持...

    漂亮的表单验证样式,纯HTML

    本资源提供了一种“漂亮的表单验证样式”,完全基于HTML,无需额外的JavaScript库或CSS框架,仅通过HTML5的内置属性和样式就能实现美观且实用的效果。 1. **HTML5表单元素** HTML5引入了许多新的表单元素,如`...

    一套特别漂亮的HTML5响应式模板

    HTML5响应式模板是现代网页设计中的重要工具,...总的来说,这套"特别漂亮的HTML5响应式模板"提供了一种高效、美观且跨平台的解决方案,适合各种类型的web项目,无论是后台管理系统还是面向用户的界面,都能从中受益。

    9款大气实用的HTML5/CSS3注册登录表单

    利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS3发光登录表单更是绚丽多彩。今天我们要分享一款仿Facebook的登录表单,无论从...

    6款漂亮的html5手机导航菜单代码

    1. **HTML5**: HTML5是超文本标记语言的最新版本,它引入了许多新特性,如语义化标签、媒体元素、离线存储以及更好的表单控制等。在手机导航菜单中,HTML5用于构建结构化的页面布局,使得菜单元素能够被正确解析和...

    40多款漂亮的form表单设计

    例如,使用HTML5的新的表单元素,如`&lt;input type="email"&gt;`或`&lt;input type="date"&gt;`,可以为用户提供更好的输入体验,同时保持对旧版浏览器的支持。 表单的简洁性也是关键。过多的字段可能会让用户感到压力,从而...

    HTML5后台管理模板是一款高级的HTML5响应式管理模板。.rar

    HTML5后台管理模板是现代Web开发中的一个重要工具,它提供了丰富的功能和优秀的用户体验,尤其适合构建后台管理系统。这款高级的HTML5响应式管理模板利用了HTML5的新特性,结合CSS3和JavaScript,使得网页设计更加...

    HTML5超漂亮的一个后台CMS

    HTML5是一种先进的网页...这款“HTML5超漂亮后台CMS模板”很可能充分利用了这些特性,以创建一个既美观又高效的管理平台。对于开发者而言,这样的模板无疑能够加速项目开发,同时也能满足用户对现代化、易用性的需求。

    漂亮的广告公司html5模板是一款广告商务企业的html5网站模板。.zip

    这款“漂亮的广告公司html5模板”专为广告商务企业设计,旨在提供一个专业且吸引人的在线展示平台。模板的设计和功能都体现了HTML5的最新特性,以确保网站的交互性、响应性和可访问性。 首先,HTML5的语义化元素是...

    简洁漂亮的HTML5登录界面

    在本案例中,我们关注的是一个使用HTML5构建的简洁漂亮的登录界面,它不仅注重视觉效果,还充分考虑了跨设备兼容性,包括电脑、平板和手机。 首先,让我们探讨HTML5在登录界面设计中的应用。HTML5引入了一些新的...

    时尚美容造型html5模板是一款暗紫色漂亮时尚美容造型html5模板 .rar

    而主要的文件“时尚美容造型html5模板是一款暗紫色漂亮时尚美容造型html5模板。”可能是压缩包的主文件,包含了所有构成模板的HTML、CSS、JavaScript和其他资源文件。 综上所述,这款“时尚美容造型html5模板”是...

    漂亮的广告公司html5模板是一款广告商务企业的html5网站模板 .rar

    总结,这款“漂亮的广告公司html5模板”是利用HTML5技术打造的一款适用于广告和商务企业的网站构建工具,具备响应式设计、易用性、品牌一致性等特点,通过模板可以快速建立专业网站,同时,模板的定制性和SEO友好性...

    039 漂亮的登录界面 单页form表单【html登录注册页面代码】

    在本资源中,"039 漂亮的登录界面 单页form表单【html登录注册页面代码】" 提供了一个简单的HTML登录界面设计示例,它使用了单页(Single-Page Application, SPA)的概念,并结合了HTML、CSS技术来创建一个吸引人的...

    幸福恋人主页html5模板是一款简洁白色的大气漂亮幸福恋人结婚主页html5模板。.zip

    本文将详细解析“幸福恋人主页HTML5模板”,一款专为幸福恋人设计的简洁、大气且漂亮的结婚主页模板。此模板充分利用HTML5的新特性,旨在为即将步入婚姻殿堂的情侣提供一个展示爱情故事、分享婚礼信息的理想平台。 ...

Global site tag (gtag.js) - Google Analytics