連載でお届けしているHTML講座、第３回です。
今回はJavaScriptの開発に必要な部品についてをお送りします。
プログラムを動かすにはボタンやテキストボックスなど、入力インターフェイスが不可欠です。そうした要素の扱い方を、順に説明していきます。
第1回・2回はこちらから
過去の回をご覧でない方は、以下のリンクからどうぞ。
学習の前に：フォームってなに？
各部品について解説する前に、フォームというものについておさえておきましょう。フォームとは、HTMLの機能上でユーザーの入力情報をサーバーが受け取るための仕組みです。メールフォームを作る時などに使われています。
ボタンやテキストボックスといったものは、本来はこれらの機能のためにあるものです。が、JavaScriptのインターフェイス（入出力の部品）として使うこともできます。
当入門はJavaScriptを学びたい方向けを想定しているため、フォーム機能自体については省略します。JavaScriptに関する部分のみの解説になっております。
本来のフォーム機能としての説明とは多少異なる部分もありますので、ご注意ください。
ボタンの作り方
まずはボタンを作るためのタグです。フォーム用のタグは特別な属性もいくつかあるので、しっかり理解していきましょう。
<button>の基本構文
<button id="（このアイテムの識別ID）"
type="button"
onclick="(押下した時に起動する関数)"
disabled = "true/false">
(ボタンに表示する文章）</button>
id属性：アイテムを識別するID
このページの中で、このアイテムを識別するためのIDです。この属性はすべてのタグに存在します。JavaScriptのコードからこのアイテムを取得する際に必要になります。
type="button"：種別の設定
このアイテムの種別を指定します。JavaScript用に使う場合は"button"を指定します。onclick属性：押下した時のアクション
ボタンを押下した時の動作を指定します。JavaScriptで利用する場合は、起動したい関数名を指定します。詳細はJavaScriptの記事で解説します。
disabled属性：ボタンを無効にする
ボタンの有効/無効設定です。有効にしたい場合は"true"、無効の場合は"false"を入れます。この属性は、後に紹介する他のフォーム系の部品も同様です。
<button>の使用例
<!-- 有効ボタン -->
<button id="button1" type="button"
onclick="script01()" >ボタン1</button>
<!-- 無効ボタン -->
<button id="button2" type="button" disabled="true"
onclick="script02()" >ボタン2</button>
</div>
NOTE:id属性とclass属性について
今回紹介したid属性は、すべてのHTMLタグに存在する属性です。この値をもとに、JavaScriptで要素を取得したり、CSSで要素に就職を指定したりできます。
同様の属性に
class属性があります。idはページ中でその部品だけを識別できる名前をつけたい場合（＝ページ内で唯一の値）、classは複数の部品に同じ名前をつけて扱いたい場合（＝重複してもOK）に使います。テキストエリアは１行のものと複数行のものがある
次はテキスト入力/表示エリアのタグです。1行のものと複数行のものがあるので、あわせてご紹介します。
<input type="text">の基本構文
<input id="(id)"
type="text"
maxlength=(最大文字数)
minlength=(最小文字数)
value="（初期値の文字列）"
placeholder="(プレースホルダ文字列)">
ちなみに
<input>タグに閉じタグに閉じタグ（後ろの</input>）は不要です。type="text"：テキスト入力エリアとしての指定
この要素をテキスト入力エリアとして使う為の指定です。inputタグはテキストエリア以外にもいろいろな用途があるため、この設定が必要になります。maxlength属性/ minlength属性：最長・最短文字数
入力できる文字数を制限したいときに設定します。value属性：初期値の設定
初期値としてあらかじめ値が入力された状態にしたい場合、ここに設定します。placeholder属性：プレースホルダ
値が何も入力されていない時、仮で表示される文章を設定します。readonly属性：読み取り専用設定
読み取り専用で入力できないテキストエリアにしたい場合、"true"を設定します。 <textarea>の基本構文
<textarea id="(id)"
placeholder="本文を入力"
rows=(行数)
cols=(1行の文字数)
maxlength=(最大文字数)
minlength=(最小文字数)
disabled="true/false"
readonly="true/false">
（初期値の文字列）</textarea>
大半の属性は
<input type="text">と共通になっています。新しく現れる要素だけ紹介していきます。初期値の文字列
textareaはvalue属性を持ちません。タグの間に挟まれた文字列が、テキストエリアの初期値として扱われます。
rows属性/cols属性：テキストエリアの大きさ
テキストエリアの表示上の大きさを設定します。rowsが行数、colsが横の文字数となります。
<input type="text">、<textarea>の使用例
<!-- １行テキストエリア-->
<p><input id="input_text" type="text" maxlength="100" minlength="10" placeholder="10-100文字を入力可能" value="1行エリアのテスト"></p>
<!-- 複数行テキストエリア-->
<p><textarea id=" area01" placeholder="50-200文字を入力可能" rows=3 cols=50 maxlength=200 minlength=50>入力可能テキストエリアのテストです</textarea></p>
<!-- 複数行テキストエリア（読み取り専用）-->
<p><textarea id=" area01" placeholder="50-200文字を入力可能" rows=3 cols=50 maxlength=200 minlength=50 readonly>読み取り専用テキストエリアのテストです</textarea></p>
・入力文字数が最小文字数より少ないとメッセージ（ツールチップ）が出ること
・最大文字数が制限されていること
を触って確認してみてください。
NOTE:値"true"は省略してもよい
今の例文では、readonlyに値を書かず、属性名のみを書いています。このように、値が
true/falseになる属性は、属性名のみ書いても値trueとして扱われます。falseにしたい場合は属性を省略すればOKです。
チェックボックスとラジオボタンで入力を便利に
続いてはチェックボックスとラジオボタンの作り方です。どちらもあらかじめ用意した選択肢から、チェックを入れて選択できる入力アイテムです。
ラジオボタンは１グループの中で１つのみ、チェックボックスは複数選択が可能という違いがあります。
<input type="checkbox">の基本構文
<input type="checkbox" id="check01" checked="true/false">チェックボックスの名前
<input>タグで作れるのはチェックの部分のみです。表示上での項目名は、その後に書き添える形になります。type="checkbox"： チェックボックスとしての指定
<input>タグをチェックボックスとして使いたい場合、type属性をこれに指定します。checked属性：チェックのON/OFF初期値
初期値としてチェックを入れておくかを設定します。trueでONになります。<input type="radio">の基本構文
<input type="radio" name="(グループ名)"
value="（値）"
checked="true/false">ラジオボタンの名前
アイテムをグループで扱う関係で、少しチェックボックスと異なるところがあります。
type="radio"： ラジオボタンとしての指定
<input>タグをラジオボタンとして使いたい場合、type属性をこれに指定します。name属性：グループ名
ラジオボタンの属するグループ名を設定します。同じグループに属するラジボタンはすべて同じ
name属性の値を設定します。value属性：このアイテムの値
同じグループ内で、このアイテムが持つ値を設定します。JavaScriptからラジオボタンを取得する際、この値でどれが選択されたのかを判断します。
<input type="checkbox">、<input type="radio">の使用例
<p>
<input type="checkbox" id="check01" checked>チェックボックス(ON)
<input type="checkbox" id="check01">チェックボックス(OFF)
</p>
<p>
<input type="radio" name="radio01" value="value1-1">ラジオボタン1-1
<input type="radio" name="radio01" value="value1-2" checked>ラジオボタン1-2
<input type="radio" name="radio01" value="value1-3">ラジオボタン1-3
</p>
<p>
<input type="radio" name="(グループ名)" value="value2-1">ラジオボタン2-1
</p>チェックボックス(ON) チェックボックス(OFF)
ラジオボタン1-1 ラジオボタン1-2 ラジオボタン1-3
ラジオボタン2-1
ラジボタンがグループごとに扱われていることなど、触って確かめてみてください。
まとめ
今回の学習内容はここまでになります。実習ですが、JavaScriptについての説明を交えないと実際に動くものが作れないため、今回は省略します。
各セクションの使用例を見て、アイテムの作り方を練習してみてください。
HTML入門の基礎編はここまでとなります。
この3回で、JavaScriptを学ぶ上での最低限の知識は身に着いたと思います。次はJavaScript入門の方をお読みください。
HTMLには他にもレイアウトに重要な
divタグや、他のフォーム系パーツなど色々重要な要素がありますが、こちらはまた別の機会を設けて解説する予定です。
