<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>入力フォーム（ＨＴＭＬ５）</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
//<!--
function init() {
var inputs = document.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("change", function() {
form.out2.value = this.value ;
}, false);
}
}
//-->
</script>
</head>
<body onload="init();">
<form name="form"><!--日付の入力欄-->date:<input type="date" name="date"><br>
<!--UTC（協定世界時）による日時の入力欄-->datetime:<input type="datetime" name="datetime"><br>
<!--UTC（協定世界時）によらないローカル日時の入力欄-->datetime-local:<input type="datetime-local" name="datetime-local" step="60"><br>
<!--月の入力欄-->month:<input type="month" name="month"><br>
<!--週の入力欄-->week:<input type="week" name="week"><br>
<!--時間の入力欄-->time:<input type="time" name="time"><br>
<!--数値の入力欄-->number:<input type="number" name="nunber"><br>
<!--レンジの入力欄-->range:<input type="range" name="range"><br>
<!--検索テキストの入力欄-->serchi:<input type="serch" name="serchi"><br>
<!--電話番号の入力欄-->tel:<input type="tel" name="tel"><br>
<!--ＵＲＬの入力欄-->url:<input type="url" name="url"><br>
<!--メールアドレスの入力欄-->mail:<input type="email" name="email"><br>
<!--色の入力欄-->colore:<input type="color" name="color"><br>
<br>
入力データの表示：<input name="out2" ><br>
<br>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ラジオボタン</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
//メイン処理
function cl(x) {if(document.myform.r1[x].checked)
document.myform.data.value=document.myform.r1[x].value;
}
// -->
</script>
</head>
<body>
<p>ラジオボタン</p>
<hr>
<form name="myform">
<p>
<input type="radio" value="あか" name="r1" onclick="cl(0)" checked>赤
<input type="radio" value="あお" name="r1" onclick="cl(1)">青
<input type="radio" value="きい" name="r1" onclick="cl(2)">黄
<input type="radio" value="しろ" name="r1" onclick="cl(3)">白
<input type="radio" value="くろ" name="r1" onclick="cl(4)">黒
<p>
<input type="text" name="data" size="18" >
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>チェックボックス</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
function cl(x) {
if(document.myform.c1[x].checked) {document.myform.data.value="○"+document.myform.c1[x].value;}
else {document.myform.data.value="×"+document.myform.c1[x].value;}
}
//-->
</script>
</head>
<body>
<p><b>チェックボックス</b></p>
<hr>
<form name="myform">
<p>
<input type="checkbox" value="あか" name="c1" onclick="cl(0)" checked>赤
<input type="checkbox" value="あお" name="c1" onclick="cl(1)" checked>青
<input type="checkbox" value="きい" name="c1" onclick="cl(2)" checked>黄
<input type="checkbox" value="しろ" name="c1" onclick="cl(3)" checked>白
<input type="checkbox" value="くろ" name="c1" onclick="cl(4)" checked>黒
<p>
<input type="text" name="data" size="19" >
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>セレクトボックス</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<SCRIPT>
<!--
function go() {
MyForm.p1.value=document.MyForm.ft.value;
MyForm.p2.value=document.MyForm.wt.value;
}
function s1(x1) {
MyForm.p3.value=x1+"-"+document.MyForm.d1.value;
}
function s2(x2) {
MyForm.p4.value=x2+"-"+document.MyForm.d2.value;
}
// -->
</SCRIPT>
<link rel="stylesheet" type="text/css" href="tom.css">
</HEAD>
<body>
<p>セレクトボックス</p>
<hr>
<FORM NAME="MyForm">
<p>
<select NAME="d1" onChange="s1(this.selectedIndex)">
<option value="赤" >あか
<option value="青" >あお
<option value="黄" >きい
<option value="白" selected>しろ
<option value="黒" >くろ
<option value="紫" >むらさき
<option value="茶" >ちゃ
</select>－<input type="text" name="p3" size="5" >
<p>
<select NAME="d2" size=3 onChange="s2(this.selectedIndex)">
<option value="赤" >あか
<option value="青" >あお
<option value="黄" selected>きい
<option value="白" >しろ
<option value="黒" >くろ
<option value="紫" >むらさき
<option value="茶" >ちゃ
</select>－<input type="text" name="p4" size="5" ></p>
</form>
</body>
</html>