感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

HTML5っぽいフォームの機能まとめ

<スポンサーリンク>

CSSから。

入力フォームが画面の横幅に合わせて変わるようにする方法

まず横幅が変わるからといって、際限なく広がるとカッコ悪いので、最大でも600pxというようにformの最大幅を指定する。

form {
	max-width: 600px;
	margin: 30px auto
}

そして、以下のようにtextareaに横幅を%指定することで、画面に合わせて広がるように作ることができる。

input, textarea {
	width: 100%;
	box-sizing: border-box;
}

送信ボタンの横幅を調整する

以下のようにsubmitのボタンを指定して、CSSを適用すれば、ボタンがちょっとかっこ良くなる。
ボタンの色とかも変えることができる。以下は茶色にしてみた例。

input[type="submit"] {
	width: 150px;
	background-color: #F4A460;
}

フォームにオートフォーカスを設定する

オートフォーカスというのは、ページをロードすると同時にフィールドを選択する設定のこと。

<input type="text" name="hoge" size="30" required autofocus>

みたいに、autofocusという記述をくっつけると、ページの読み込みが終わったら、既にテキストのところでチカチカするようになる。
ちなみに入力フィールドを選択したときのデザインは、こんな感じで色を変えたりできる。

input:focus {
	outline: solid 3px #5F9EA0;
}

これを設定すると、変な緑色で囲まれるようになる。

必須項目の設定とプレースホルダ

<input type="text" name="hoge" size="30" required placeholder="なんか入力して!" autofocus>

プレースホルダーというのは、テキストボックスの中に薄い文字で出てくる注意文みたいなものである。
何か入力すると同時に消える。
設定は上記のように、inputの属性にplaceholderの記述を載せる。
また、必須項目の設定はrequired属性を記述すれば良い。

inputのtype属性で指定できる入力フィールドの種類

type属性の値 情報の種類
email メールアドレス
url URL
tel 電話番号
search 検索
date 年月日
week 年&週ナンバー
month 年月
time 時刻
datetime 日付&時刻(UTC)
datetime-local 日付&時刻(ローカルタイム)
number 数値
range 数値(スライダー)
color カラーピッカー

アレンジした写経

  • HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>フォームのサンプル</title>
<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">

<header id="pageheader">
<hgroup>
<h1>少年ジャンプと僕</h1>
<h2>人生で大切なことはすべて少年ジャンプから学んだ</h2>
</hgroup>

<nav>
<ul>
<li><a href="index.html">少年ジャンプとは</a></li>
<li><a href="index.html">スラムダンクとぼく</a></li>
<li><a href="index.html">感謝の正拳突き</a></li>
<li><a href="index.html">ONE PIECE</a></li>
<li><a href="index.html">努力・友情・勝利</a></li>
</ul>
</nav>
<img src="header.jpg" alt="">
</header>

<article>
<form action="http://hoge.com" method="POST">
<p><label>名前<span>(必須)</span>:<br>
<input type="text" name="name" size="40" required placeholder="名前を入力してください!" autofocus>
</label></p>

<p><label>URL:<br>
<input type="url" name="url" size="40" placeholder="URLを入力してください!">
</label></p>

<p><label>電話番号:<br>
<input type="tel" name="tel" size="40" placeholder="電話番号!">
</label></p>

<p><label>色は?:<br>
<input type="color" name="color">
</label></p>

<p><label>時間は?:<br>
<input type="time" name="time">
</label></p>


<p><label>メッセージ:<br>
<textarea name="message" cols="40" rows="8" placeholder="コメントをよろしく"></textarea>
</label></p>


<p id="button">
<input type="submit" value="送信">
</p>
</form>
</article>
</body>
</html>
header#pageheader img {
	height: auto;
}

nav ul {
	font-size: 10px;
}

nav ul li a {
	width: 100px;
}

form {
	max-width: 500px;
	margin: 30px auto;
}

input, textarea {
	width: 100%;
	box-sizing: border-box;
}

textarea {
	height: 110%;
}

input[type="color"] {
	width:30px;
}
input[type="submit"] {
	width: 200px;
	background-color: #F4A460;
}

input:focus {
	outline: solid 3px #5F9EA0;
}

input[type="time"] {
	width:70px;
}

input:required, input:invalid {
	background-repeat: no-repeat;
	background-position:right center;
}

input:valid {
	background-image: none;
}

label span {
	color: #ff0000;
}

勉強した本

HTML5 & CSS3ステップアップブック

HTML5 & CSS3ステップアップブック


この記事のすべてはこの本から学んだ。
この記事の10倍くらい詳しく、実際のイメージ付きで解説してくれる。
もちろん、フォームだけではなく、HTML5の主要機能を網羅してサンプル付きで詳細に解説してくれて、HTML5の入門にとても役に立つ。

感謝のプログラミング

今回で感謝のプログラミングは【532時間目】
10000時間まで、あと【9468時間】