ywork2020.com

Title

ボタンを活用する

目次 (INDEX)

buttonとは

ここで説明する button とは次の語句からなる HTML の要素です。
button
読み: ボタン
意味: 止め具として使用される服飾物。画面上のクリックされる要素

目次に戻る

button要素の概要

この要素は、クリックされることを主な役割とするユーザーインターフェースに置き換えられます。

button 要素は、 type 属性に与える値によって、汎用ボタン、送信ボタン、リセットボタン等のクリックできるボタンを作成することができます。

目次に戻る

サンプルコードと実行結果

ここでは、概要のところで述べている 汎用ボタン、送信ボタン、リセットボタン をそれぞれ作成しています。

汎用ボタンは、純粋にクリックされるだけの役割を担っていますので、プログラムによる制御が必要になる場合もあります。 それについては次のセクションでサンプルを用意しています。

また、送信ボタンとリセットボタンは form 要素の子要素として使われることが主です。 なお、ここでは form 要素は使っていないので機能を直接に試すことはできません。




サンプルコード: HTML (汎用ボタン)
<body>
	<button type="button"> 汎用ボタン </button>
</body>
  • 02: button type="button" (type="button" は汎用ボタンを表します。これは既定値ですので type="button" を省略しても構いません。)
実行結果:





サンプルコード: HTML (送信ボタン)
<body>
	<button type="submit"> 送信ボタン </button>
</body>
  • 02: button type="submit" (submit は送信という意味です。このボタンは form 要素の子要素として機能し、form 要素内のデータを送信する役割を担っています。)
実行結果:





サンプルコード: HTML (リセットボタン)
<body>
	<button type="reset"> リセットボタン </button>
</body>
  • 02: button type="reset" (reset は初期化という意味です。このボタンは form 要素の子要素として機能し、form 要素内のデータを初期化する役割を担っています。)
実行結果:

目次に戻る

button と javascript との連携

ここでは、ボタンをクリックすることで、javascript の関数を呼び出すものをサンプルとしました。

関数の処理としては、アラートダイアログを表示するだけの単純な処理です。

サンプルコード: HTML (ダイアログを開く)
<body>
	<button onclick="funcOpenDialogue()"> ダイアログを開く </button>
	<script>...</script>
</body>
  • 02: button onclick="funcOpenDialogue()" (onclick 属性に指定する値はクリックされた場合に実行されるハンドラーです。ハンドラーとは、単純にいうと関数のことです。 つまり、この要素がクリックされると funcOpenDialogue() という関数が呼び出されて実行されます。)
サンプルコード: script
<script>
	function funcOpenDialogue(){
		window.alert("メッセージ");
	}
</script>
  • 02-04: function funcOpenDialogue(){ 関数の処理 }(funcOpenDialogue() という名前の関数を作成しています。)
  • 03: window.alert("メッセージ") (アラートダイアログが表示されます。ダイアログには "メッセージ" と表示されます。)
実行結果:

このサンプルコードで使用している onclick は イベントリスナー の役割をもつ属性です。 これを もう少し詳しく理解したい方は イベントとは のページを参照してください。

目次に戻る

使用できる属性

目次に戻る