HTML5 一款漂亮的表单
zjnig的信息仓库 2014-11-26
<!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 protected]" />
<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> 
相关推荐
wusiye 0喜欢 / 0评论 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 0喜欢 / 0评论 2020-08-09
nercon 0喜欢 / 0评论 2020-08-01
swiftwwj 0喜欢 / 0评论 2020-07-21
nercon 0喜欢 / 0评论 2020-07-16
饮马天涯 0喜欢 / 0评论 2020-07-05
Lophole 0喜欢 / 0评论 2020-06-28
gufudhn 0喜欢 / 0评论 2020-06-12
csstpeixun 0喜欢 / 0评论 2020-06-11
huzijia 0喜欢 / 0评论 2020-06-09
WebVincent 0喜欢 / 0评论 2020-06-06
niehanmin 0喜欢 / 0评论 2020-06-03
行吟阁 0喜欢 / 0评论 2020-05-30
qsdnet我想学编程 0喜欢 / 0评论 2020-05-26
gufudhn 0喜欢 / 0评论 2020-05-25
qsdnet我想学编程 0喜欢 / 0评论 2020-05-19
suixinsuoyu 0喜欢 / 0评论 2020-05-15
HSdiana 0喜欢 / 0评论 2020-05-15
PioneerFan 0喜欢 / 0评论 2020-05-15
GimmeS 0喜欢 / 0评论 2020-05-15
owhile 0喜欢 / 0评论 2020-05-15
KungLun 0喜欢 / 0评论 2020-02-03
nercon 0喜欢 / 0评论 2020-05-04
行吟阁 0喜欢 / 0评论 2020-04-10
rionchen 0喜欢 / 0评论 2020-04-09
WebVincent 0喜欢 / 0评论 2020-04-07
86384798 0喜欢 / 0评论 2020-04-04
qsdnet我想学编程 0喜欢 / 0评论 2020-03-27
WebVincent 0喜欢 / 0评论 2020-03-25
lyg0 0喜欢 / 0评论 2020-03-20
STPace 0喜欢 / 0评论 2020-03-14
viewerlin 0喜欢 / 0评论 2020-03-07
STPace 0喜欢 / 0评论 2020-03-06
nercon 0喜欢 / 0评论 2020-03-06
owhile 0喜欢 / 0评论 2020-03-05
WebVincent 0喜欢 / 0评论 2020-03-04
zsh 0喜欢 / 0评论 2020-03-01
swiftwwj 0喜欢 / 0评论 2020-03-01
swiftwwj 0喜欢 / 0评论 2020-02-23
owhile 0喜欢 / 0评论 2020-02-23
lyg0 0喜欢 / 0评论 2020-02-18
黎豆子 0喜欢 / 0评论 2020-02-18
InterestSoul 0喜欢 / 0评论 2020-02-17
haohong 0喜欢 / 0评论 2020-02-14
行吟阁 0喜欢 / 0评论 2020-02-01
黎豆子 0喜欢 / 0评论 2020-02-01
一个客户要求给网站添加一个背景音乐，我用的是html5添加网页背景音乐的代码，在此记录一下以后有用。html5方法二：<videocontrols=""autoplay=""name="media&q
玫瑰小妖 0喜欢 / 0评论 2020-01-24