JavaScript/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 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>
フォームデザイン 戻る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
<!--
** {
box-sizing: border-box; margin: 0; padding: 0;
}
h1 { text-align:center; }
#area{
background:#ccc;padding:20px;max-width:320px;margin:0px auto;
}
.field{
margin-bottom: 12px;
}
.field label{
display: block; font-size: 12px; color: #000; margin-bottom: 4px;
}
.field input,
.field select,
.field textarea{
box-sizing: border-box;
width: 100%;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
background: #fafafa;
color: #1a1a1a;
font-family: inherit;
outline: none;
transition: border-color 0.15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
border-color: #185FA5;
}
.field textarea{
resize: vertical; min-height: 72px;
}
.type-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
margin-bottom: 1.5rem;
}
.type-btn{
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px 8px;
cursor: pointer;
text-align: center;
transition: all 0.15s;
color: #1a1a1a;
}
.type-btn:hover{
background: #f0f0f0;
}
.type-btn.active{
border: 2px solid #185FA5;
background: #E6F1FB;
color: #0C447C;
}
.type-btn .icon{
font-size: 20px; display: block; margin-bottom: 4px;
}
.type-btn .label{
font-size: 11px; font-weight: 600; display: block;
}
-->
</style>
<script>
function selectType(type) {
currentType = type;
document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
document.getElementById('btn-' + type).classList.add('active');
}
function updatePreview() { }
</script>
</head>
<body>
<h1>フォームデザイン</h1>
<div id="area">
<div class="field">
<label for="f_input">氏名</label>
<input id="f_input" type="text" placeholder="山田 太郎" oninput="updatePreview()">
<label for="f_select">国籍</label>
<select id="f_select" onchange="updatePreview()">
<option value="aaa">日本</option>
<option value="bbb">中国</option>
<option value="ccc">韓国</option>
</select>
<label for="f_textarea">住所</label>
<textarea id="f_textarea" placeholder="東京都千代田区１丁目１番地" oninput="updatePreview()"></textarea>
</div>
<div class="type-grid">
<button class="type-btn active" onclick="selectType('url')" id="btn-url">
<span class="icon">🌐</span><span class="label">Webページ</span>
</button>
<button class="type-btn" onclick="selectType('email')" id="btn-email">
<span class="icon">✉️</span><span class="label">メール</span>
</button>
<button class="type-btn" onclick="selectType('contact')" id="btn-contact">
<span class="icon">👤</span><span class="label">連絡先</span>
</button>
</div>
</div>
</body>
</html>