HTML5のフォームタイプ
HTML5で追加されたフォームタイプをいくつか見ていきましょう(。・ω・。)ﾉ
HTMLファイルのほうは、下記の通りに入力します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML5のフォームタイプ</title>
</head>
<body>
<form method="post" action="#" id="myform">
<p>
<label>URL</label>
<input type="url" name="example1" id="example1" required />
</p>
<p>
<label>メールアドレス</label>
<input type="email" name="example2" id="example2" required />
</p>
<p>
<label>カレンダー</label>
<input type="date" name="example3" id="example3" required />
</p>
<p>
<label>時刻</label>
<input type="time" name="example4" id="example4" required />
</p>
<p>
<label>日付と時刻</label>
<input type="datetime" name="example5" id="example5" required />
</p>
<p>
<label>数値入力</label>
<input type="number" min="0" max="50" name="example6" id="example6" required />
</p>
<p>
<label>スライダー</label>
<input type="range" name="example7" id="example7" />
</p>
<p>
<input type="submit" value="送信" id="submit" />
<input type="reset" value="リセット" id="reset" />
</p>
</form>
</body>
</html>
ブラウザで確認する時はOperaで確認しましょう。
他のブラウザでも確認は出来ますが、一部反映されないところがあるので…。
urlは入力ボックスを作成、emailはメールアドレスの入力ボックスを作成、dateは日付の入力ボックスを作成、timeは時刻の入力ボックスを作成、datetimeは日付と時刻の入力ボックスを作成、numberは数値の入力ボックスを作成、rangeは数値の入力スライダーを作成します。
それぞれ入力ボックスに対してrequired属性を追加すると、入力が必須であることを示すことができます。
入力されていない状態で送信ボタンを押すと、警告文が表示されます。
完成見本はこちら
http://www6.ocn.ne.jp/~yokotchi/blog/sample05/index.html
