HTML5入力フォーム

投稿日: 投稿者: %s tobita11

ＨＴＭＬ５で強化された入力フォーム。今まですべてをｊａｖａｓｃｒｉｐｔなどでやってきたのを、ある程度の部分までＨＴＭＬ５の機能でカバーすることが可能です。

ＨＴＭＬ５フォーム機能　サンプルコード

（10日で覚えるＨＴＭＬ５より）

<form>
ID：<input type="text" id="userID" name="userID" required autofocus><br>
料理：<input type="text" id="menu" name="menu" list="menuList" autocomplete="on"><br>
<datalist id="menuList">
<option value="海鮮丼">海鮮丼</option>
<option value="海の幸と山の幸">海の幸と山の幸</option>
<option value="海の幸づくし">海の幸づくし</option>
<option value="山の幸づくし">山の幸づくし</option>
<option value="高級あわび料理">高級あわび料理</option>
<option value="高級寿司">高級寿司</option>
<option value="うに丼">うに丼</option>
<option value="うにいくら丼">うにいくら丼</option>
<option value="季節料理">季節料理</option>
<option value="季節の野菜料理">季節の野菜料理</option>
<option value="季節の魚料理">季節の魚料理</option>
</datalist>
予約日：<input type="date" id="resDay" name="resDay" required><br>
予約時間：<input type="time" id="resTime" name="resTime" required><br>
予約人数：<input type="number" id="resNumber" name="resNumber" min="1" max="20" required>(1-20人)<br>
部屋の色：<input type="color" id="roomColor" name="roomColor"><br>
メール：<input type="email" id="mailAddress" name="mailAddress"><br>
電話番号：<input type="tel" id="telephone" name="telephone"><br>
空き室状況：<meter min="0" max="50" value="41" low="25" high="40" optimum="0">41部屋予約されています</meter><br>
<input type="submit" value="送信">
</form>

今までのフォームとデータ内容確認スクリプトなど(カナリ以前）

<form action="★.cgi" method="post" onSubmit="return chkfrm()" name="Fid">
　　<input name="メールアドレス" onBlur="if(!addcheck()) alert('メールアドレスが正しくありません')"); >
　　<input type="submit" value="確認／送信など">
</form>

－－－
function addcheck(){
	str1 = document.Fid.メールアドレス.value ;
	checkstr = str1.match(/^\S+@\S+\.\S+$/);
	if(!checkstr)return false;
return true;
}
－－－
function chkfrm() {
if (document.Fid.FIN_DAYCNT.value == ""){ alert('日数が未入力です');	return false;} 
if (document.Fid.FIN_DAYCNT.value == "0"){ alert('日数にゼロは指定できません');	return false;} 
if (document.Fid.FIN_DAYCNT.value == "０"){ alert('日数にゼロは指定できません');	return false;} 
if (document.Fid.FIN_DIRECTION.value == ""){ alert('送信方向が未入力です');	return false;} 
if (document.Fid.FIN_TITLE.value == ""){ alert('メール件名が未入力です');	return false;} 
if (document.Fid.FIN_RETURNＣＲ.value == ""){ alert('返信文章が未入力です');	return false;} 

str = document.Fid.FIN_DAYCNT.value ;
for (i=0; i<str.length; i++){
	str = str.replace("０","0") ; 
	str = str.replace("１","1") ; 
	str = str.replace("２","2") ; 
	str = str.replace("３","3") ; 
	str = str.replace("４","4") ; 
	str = str.replace("５","5") ; 
	str = str.replace("６","6") ; 
	str = str.replace("７","7") ; 
	str = str.replace("８","8") ; 
	str = str.replace("９","9") ; 
	str = str.replace("　","") ; 
	str = str.replace(" ","") ; 
	document.Fid.FIN_DAYCNT.value = str;
	c = str.charAt(i);
	if ("0123456789.".indexOf(c,0) < 0){alert("日数に数値以外が含まれてます");	return false;}
}
	
return true;
}

フォーム：カウントアップ・カウントダウン

HTMLサンプル

<input type="button" value="カウントアップ" id="countUp">
<input type="button" value="カウントダウン" id="countDown"><br>
予約人数：<input type="number" id="resNumber" name="resNumber" value="1" min="1" max="20" required>(1-20人)

スクリプトサンプル

// 値の増減ボタン
document.getElementById("countUp").addEventListener("click", function(){
	document.getElementById("resTime").stepUp(1);
}, true);
document.getElementById("countDown").addEventListener("click", function(){
	document.getElementById("resTime").stepDown(1);
}, true);

プログレスバー

HTMLサンプル

予約状況：<progress id="resStatus" min="0" max="100" value="0">0%が予約済み</progress><br>
<input type="button" id="resCheck" value="予約チェック"><br>

スクリプトサンプル

// 予約状況を調べるボタン
document.getElementById("resCheck").addEventListener("click", function(){
	var n = document.getElementById("resStatus").value;
	n = n + 10;
		document.getElementById("resStatus").value = n;
		ele.innerHTML = n;
}, true);

演　習

１）上記のフォームをＨＴＭＬ（新規）に入れて、フォームを表示させてください。
２）カウントアップ、カウントダウンのＪＳを付け加えて、実施してください。
３）予約状況を調べるＪＳを追加して、プログレスバーの表示変更を実施してください。
４）カウントアップ、カウントダウンで、プログレスバーが変化するように、ＪＳを更新してください。