<!DOCTYPE html>
<html>
<head>
<title>HTML5 inputs</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h3>HTML5 Inputs</h1>
<div>
<label >Click this label</label>
<input type="text" name=""> (individual)
<!-- 各自獨立的兩個標籤 -->
</div>
<br>
<div>
<label for="fname">Click this label</label>
<input type="text" name="" id="fname"> (link)
<!-- 用label for屬性命名 作為input的id名稱 將文字與輸入框結合-->
</div>
<hr>
<br>
<div>
<label for="form-search">Search</label>
<input type="search" name="" id="form-search">
<!-- HTML5的搜索輸入框 -->
</div>
<hr>
<br>
<div>
<label for="form-email">E-mail</label>
<input type="email" name="" id="form-email">
<!-- HTML5的Email輸入框 -->
</div>
<hr>
<br>
<div>
<label for="form-url">URL</label>
<input type="url" name="" id="form-url">
<!-- HTML5的URL輸入框 -->
</div>
<hr>
<br>
<div>
<label for="form-number">Number</label>
<input type="number" name="" id="form-number" min="0" max="50" step="5">
<!-- HTML5的數字輸入框 -->
</div>
<hr>
<br>
<div>
<label for="form-range">Range</label>
<input type="range" name="" id="form-range" min="0" max="100" value="50">
<!-- HTML5的範圍輸入框 -->
</div>
<hr>
<br>
<div>
<label for="form-date">Date</label>
<input type="date" name="" id="form-date" min="2015-01-01" max="2020-12-31">
<!-- HTML5的日期輸入框 -->
</div>
<hr>
<br>
<div>
<label for="form-color">Color</label>
<input type="color" name="" id="form-color" >
<!-- HTML5的顏色輸入框 -->
</div>
</body>
</html>
留言列表
Impression (1)
