HTMLによる入力フォームのまとめ
サイトで目にする入力フォームのパターンをいくつかまとめてみました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Site</title>
</head>
<body>
<!-- 1行テキスト -->
<input type="text">
<!-- 1行テキスト(初期値あり) -->
<input type="text" value="hello">
<!-- 1行テキスト(入力例あり) -->
<input type="text" placeholder="taguchi">
<!-- パスワード入力用 -->
<input type="password">
<!-- 複数行テキストエリア -->
<textarea></textarea>
<!-- 複数行テキストエリア(初期値あり) -->
<textarea>hello</textarea>
</body>
</html>
結果
右から、一行テキスト、初期値あり、入力例あり、パスワード入力用ver.
複数行テキストエリアと初期値ありver.
index.html
<!-- 1行テキスト(ラベルあり) -->
<label for="name">名前</label>
<input type="text" id="name">
<!-- 1行テキスト(ラベルタグの中にinputタグを挿入) -->
<label>名前 <input type="text"></label>
結果
フォームの前に「名前」のラベルがついている
