読者です 読者をやめる 読者になる 読者になる

のんじゃんる

何でも書こう、ネタになる

HTML 5 の各種フォームを使ってみよう

どうも、@とよしー です。


今日は id:t_toshiyuki19 ことタナカトシユキさんから「ドットインストール」というwebサービスを教えていただきました!

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト

動画形式でプログラミングをステップバイステップで学習できるサイトです。
HTML 以外にも JavaScriptRuby なんかもありますねー。
ここで、HTML を学習していきたいと思います。

タナカトシユキさんありがとうございました。


さて、今回久々に HTML を書きました。やっぱり書かないと忘れてしまいますね・・・
今回は各種フォームを作ってみました。

f:id:tktyo:20140805222416p:plain

フォームはそれぞれ、メールアドレス、パスワード、日付、URL の4つです。
HTML5 では inputタグ の type 属性で、入力チェックをしてくれるフィールドが存在します。

それが今回のフォームの「メールアドレス」と「URL」です。
それぞれに不適切な値を入れるとこんなかんじになります。

f:id:tktyo:20140805222915p:plain

f:id:tktyo:20140805222929p:plain


また、password という type属性では、入力した項目が伏せ字になります。

f:id:tktyo:20140805223030p:plain

ログイン画面や、ユーザー登録画面などの作成に便利そうです。
また、カレンダーの入力フォームも標準で実装されています。
これは面白いです。

f:id:tktyo:20140805223133p:plain

とまあ、こんなかんじでいろいろ入力フォームを作ってみました。
ソースは以下のとおりです。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>フォーム</title>
	</head>
	<body>
		<form action ="survey.php" method="post">
		<p>メールアドレス:<input type="email" name="email" size="40"></p>
		<p>パスワード:<input type="password" name="password" size="40"></p>
		<p>日付:<input type="date" name="date"></p>
		<p>URL:<input type="url" name="url"></p>
		<p><input type="submit" value="送信"></p>
	</body>
</html>

html はどんな感じでインデントすればいいんですかね。
結構適当にしてるんですが、入れ子が多くなるとかなり見難くなってしまいます。
このへんは書きながら覚えていきたいと思います。

では、今日はこのへんで