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 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 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15