读:HTML5 for web designers
author:[英]Jeremy keith
如果一种模式足够流行，那么它几乎一定会从需要脚本化的解决方案演变得更加具有描述性。这就是为什么CSS3引入了更多动画功能，这些功能原本都是需要JavaScript的。
在表单增强方面CSS具有一定的局限性，这也正是HTML5的用武之地。
1. placeholder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/reset.css">
<title>Document</title>
<script>
function elementSupportAttribute(element,atttribute){
var test=document.createElement(element);
if (atttribute in test) {
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<div class="study">
<label for="hobbies">Your hobbies</label>
<input type="text" id="hobbies" name="hobbies" placeholder="Owl stretching">
</div>
<div class="study">
<label for="pass">Your password</label>
<input type="password" id="pass" name="pass" required>
</div>
<div class="study">
<label for="homeworld">Your home planet</label>
<input type="text" name="homeworld" id="homeworld" list="planets">
<datalist id="planets">
<option value="Mercury"></option>
<option value="Mercury"></option>
<option value="Mercury"></option>
<option value="Mercury"></option>
<option value="Mercury"></option>
<option value="Mercury"></option>
</datalist>
</div>
<div class="study">
<label for="query">Search</label>
<input type="search" id="query" name="query">
<label for="email">Email</label>
<input type="email" id="email" name="email">
<label for="website">Website</label>
<input type="url" id="website" name="website">
<label for="phone">Telephone</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="study">
<label for="amount">How much?</label>
<input type="range" id="amount" name="amount" min="1" max="50">
</div>
<div class="study">
<label for="amount">How much?</label>
<input type="number" id="amount" name="amount" min="1" max="50">
</div>
<div class="stuudy">
<label for="dtstart">Start date</label>
<input type="date" id="dtstart" name="dtstart">
</div>
<div class="study">
<label for="bgcolor">Background color</label>
<input type="color" id="bgcolor" name="bgcolor">
</div>
<div class="study">
<abbr title="1992-02-02">
january 12th,1992
</abbr>
</div>
<div class="study">
<meter max="10">9 cats</meter>
</div>
<div class="study">
<meter low="-273" high="100" min="12" max="110" optimum="21" value="23">its quite</meter>
</div>
<div class="study">
<progress min="0" max="100" value="60">
</progress>
</div>
</body>
</html>
网友评论