3.1 <input type="button"> 要素
<input type="button"> 要素はデフォルトの動作を持たないボタンを作るために使うよ。
submit や reset のボタンとは違って、button ボタンは通常、
JavaScriptと組み合わせて特定のタスクを実行するために使われるね。
使用例:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
主要な属性:
1. value 属性: ボタンに表示されるテキストを設定するよ。
<input type="button" value="Click Me">
2. onclick 属性: ボタンが押されたときに実行されるJavaScriptの関数を定義するよ。
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
使用例:
JavaScript関数を呼び出す:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
要素のスタイルを変更する:
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">This is a paragraph.</p>
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 <input type="checkbox"> 要素
<input type="checkbox"> 要素はチェックボックスを作るために使うよ。
ユーザーが提供された選択肢から一つまたは複数選ぶことができるんだ。チェックボックスはオンまたはオフにできるね。
使用例:
<label for="subscribe">ニュースレターを購読する:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
主要な属性:
1. name 属性: フォーム要素の名前を設定し、データと一緒にサーバーに送信されるよ。
<input type="checkbox" name="subscribe">
2. value 属性: チェックボックスがオンのときにサーバーに送信される値を設定するよ。
<input type="checkbox" name="subscribe" value="yes">
3. checked 属性: デフォルトでチェックボックスがオンになっているかどうかを決めるよ。
<input type="checkbox" name="subscribe" value="yes" checked>
使用例:
複数のチェックボックス:
<p>興味のあることを選んでください:</p>
<input type="checkbox" name="interest" value="sports">スポーツ<br>
<input type="checkbox" name="interest" value="music">音楽<br>
<input type="checkbox" name="interest" value="movies">映画<br>
デフォルトで選択されているチェックボックス:
<input type="checkbox" name="terms" value="agree" checked> 利用規約に同意します
3.3 <input type="radio"> 要素
ラジオボタンの選択フィールド (type="radio")
<input type="radio"> 要素は「ラジオボタン」を作るために使うよ。
ユーザーがグループから一つの選択肢だけを選ぶことができるんだ。
ラジオボタンは同じname属性でグループ化されるよ。
使用例:
<p>性別を選んでください:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label><br>
主要な属性:
name 属性: ラジオボタンのグループの名前を設定するよ。
同じ名前を持つすべてのラジオボタンは同じグループに属するんだ。
そして、ユーザーはそのうち一つだけ選ぶことができるよ。
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
value 属性: ラジオボタンが選択されたときにサーバーに送信される値を設定するよ。
<input type="radio" name="gender" value="male">
checked 属性: デフォルトでラジオボタンが選択されているかどうかを決めるよ。
<input type="radio" name="gender" value="male" checked>
使用例:
一つの選択肢を選ぶためのラジオボタンのグループ:
<p>色を選んでください:</p>
<input type="radio" name="color" value="red">赤<br>
<input type="radio" name="color" value="green">緑<br>
<input type="radio" name="color" value="blue">青<br>
デフォルトで選択されているラジオボタン:
<input type="radio" name="subscription" value="monthly" checked>月額<br>
<input type="radio" name="subscription" value="yearly">年間<br>
GO TO FULL VERSION