xhml・html

【ネットビジネス便利ツール】のモバイル対応の続きです。

フォームの入力であるテキストなどに、今までは大きさや長さをhtmlで設定していました。cssで設定する事が推奨だったのですが、面倒なのでついhtmlから設定していました。
レスポンシブWebデザインにするため、cssから設定するように変更しました。

html -------------------------------------------------

<input type="text" id="mail"  name="mail" value="" required placeholder="メールアドレスを入力">

<textarea id="naiyo" name="naiyo" cols="30" rows="15" wrap="off" required ></textarea>

------------------------------------------------------

css -------------------------------------------------

#mail{

	width: 250px;

	height: 20px;

}



#naiyo{

	width: 300px;

	height: 200px;

}



@media (min-width: 768px) {

	#mail{

		width: 350px;

		height: 20px;

	}

	

	#naiyo{

		width: 450px;

		height: 200px;

	}

}

------------------------------------------------------

placeholderに設定した文字列がテキストに表示されます。入力すると消えます。
placeholderあり

placeholderなし


requiredを設定すると必入力になります。入力せずサブミットしようとするとメッセージが表示されます。

type="text"ではなく、type="email"やtype="url"などにして、入力チェックも行うことができます。html5から多くのタイプが追加されました。
<input>－HTML5タグリファレンスがわかりやすいです。

便利・・のような気がするのですが、あくまでもブラウザでの入力チェックだけなので、私はほとんど利用していません。

と言うのも、まあ当たり前ですが、ブラウザを介さない入力をチェックできません。直接投げられたデーターは確認できないのです。そして直接投げられたデータほど危険なのです。
特にデータベースに登録するデータは登録前にきちんと確認しなければいけません。このチェックはデータベースに登録するスクリプトでしかチェックできません。

あまりブラウザでのチェックをきちんと書いても、どうせスクリプトでもチェックしなければいけないので二重チェックになって手間ばかりかかります。

誤解なさらないで欲しいのですが、無駄な機能だと言っているのではありません。htmlでの機能に頼り過ぎては危険、というだけす。

効果的に使うと、とても便利な機能です。
これからレスポンシブWebデザインを適用予定の販売ツールでは、もっと使う予定です。
日付（data）や時刻（time）は魅力的です。