初投稿です。
ITの世界に足を踏み入れてまだ間もないですが、プログラミングの原理や基礎的事項をしっかり固め、皆さんとの情報共有を通じて、プログラミングの奥底に迫っていきたいと思っております。
まず初回はフロントエンド言語であるJavaScriptにまつわるお話から。
目次
- disable属性とは
- 選択肢ごとにdiable属性を設定
disable属性とは
disable属性とはHTMLにおけるフォーム要素を非活性にするための属性です。
inputタグで構成される記入フォームやボタンなどに、このdisable属性を仕込むことでそれぞれの要素を無効化できます。
文字だけではいまいち上手にイメージさせられないので、具体的に仕組みを追っていきます。
少し例を見てみましょう。
記入フォーム1：<input type="text" id="input1" value="">
まず初めはオーソドックスな形から。
上記ソースではinputタグでフォームを構成しています。タグ内にはtype属性、id属性、value属性が用いられており、通常の入力フォームを創出する上で基礎構造となる形です。
disable属性を用いると
通常のフォームを見たところで、今度はdisable属性を用いた入力フォームを構成してみます。
記入フォーム1：<input type="text" id="input1" value="" disabled="disabled">
上記ソースで構成されたフォームを画像で見てみると、通常パターンと比較して入力欄に色がついていることが確認できます。
静止画ではわかりづらいのですが、上記のフォームでは入力ができない構造となっています。カーソルでフォームにフォーカスしても反応しませんし、キーボードを叩いても入力欄に文字列が表示されることはありません。
これはinputタグ内におけるdisabled属性(disabled="disabled")が大きな効果を発揮しています。
この属性を用いることで各入力フォームの記述の可否が決まっていきます。
管理者は、ユーザに記入を許可したフォームにはdisabled属性を用いず、記入してほしくないフォームにdisabled属性を用いることで、意図的に記述欄のコントロールが可能となるのです。
このdisable属性により、フォームに記述を行なわせない形を無効化といい、
disable属性を用いずに、フォームに記述を許可する形を有効化と呼びます。
これらはHTMLで基礎的事項に数えられている用語なので、覚えておいて損はない知識といえるでしょう。
選択肢ごとにdiable属性を設定
ここまでdisable属性の概要、フォームを無効化させるための骨格の部分に焦点を当ててまいりました。
ですが、この時点でそもそも無効化された入力フォームなど、入力フォームの存在意義をなさないのでは？という疑問が浮かび上がった方もいらっしゃるのではないでしょうか。
ここで思い出されるのは大人気マンガ「ドラゴンボール」での一説。
登場初期のベジータが瀕死寸前のナッパに対して「動けないサイヤ人など必要ない」とトドメの一撃を放ち、抹殺したシーンが想起されます。
この「動けないサイヤ人」と「入力できないフォーム」。姿形は違っても直面している問題は似た者同士の二人。しかし「動けないサイヤ人」は役立たずかもしれませんが、「入力できないフォーム」は大きな役割を果たしてくれることもあります。
入力フォームは人を選ぶ
エンジニアの方でしたら、所属している企業、もしくは健康保険組合での健康診断を毎年受けられていると思います。
そこで検診前にアンケートに記入を求められることがあるでしょう。その際に下記のような設問を目にしたことはありませんか？
| Q1:入院の経験はありますか？| はい or いいえ |
| Q2: Q1で「はい」と答えた方に質問します。| どのような病気で入院されましたか？ |
上記設問において、Q1で「いいえ」を選んだ回答者はQ2の設問に答える必要性はありません。
そのためWebにおける入力フォームでは、ユーザによって答える必要性のない設問をdisable属性で無効化させることが一般的になっています。
disable属性をコントロールする
ではその検診前アンケートを例にして、簡単に入力フォームを作ってまいります。
<body>
<th>Q1：入院の経験はありますか</th>
<label><input type="radio" id="hospital0" name="hospital" onClick="hospitalflg0(this.checked);"/> はい</label>
<label><input type="radio" id="hospital1" name="hospital" onClick="hospitalflg1(this.checked);"/> いいえ</label>
<br>
<th>Q2: Q1で「はい」と答えた方に質問します。どのような病気で入院されましたか？</th>
<input type="text" id="hospitalization" value="" disabled="disabled">
</body>
上記ソースでまずはフォームの骨格を作ることに成功しました。
次にQ1で選んだ回答によって、入力フォームの有効・無効化をコントロールするための仕組みを実装していきます。
<script>
function hospitalflg0(ischecked){
if(ischecked == true){
document.getElementById("hospitalization").disabled = false;
} else {
document.getElementById("hospitalization").disabled = true;
}
}
function hospitalflg1(ischecked){
if(ischecked == true){
document.getElementById("hospitalization").disabled = true;
} else {
document.getElementById("hospitalization").disabled = false;
}
}
</script>
scriptタグ内でJavaScriptを動かします。
関数名になっている「hospitalflg0」と「hospitalflg1」はそれぞれラジオボタン内のonClick属性の値となっています。
おさらいすると、「はい」ボタンにはhospitalflg0が、「いいえ」ボタンにはhospitalflg1が、ボタンを押された(ischecked)で機能する設計になっています。
これらの関数が発動するとgetElementByIdで入力フォームのid要素である「hospitalization」をとってきて、disable属性の有無をコントロールする仕組みが働くのです。
「.disabled = true」で無効化、「.disabled = false」で有効化。両関数ともにifによる条件分岐でdisableの有効・無効化を仕込んでいるのは、ボタンの再選択による機能不全を防止するためのおまじないみたいなものです。
では実際の動きを見てみましょう。
「はい」を選んだ場合
「はい」を選択したことにより、入力フォームは有効化され、フォーム内の記述が可能になりました。
「いいえ」を選んだ場合
「いいえ」を選択すると、入力フォームが無効化されて、デフォルトに戻りました。
ひとりごと
この初投稿でdisable属性の一面性を見てきました。
一見、フォームそのものの存在意義を否定しかねないほどの存在感を持った属性ですが、正しく使えば不必要なタスクからの撤退につながる役割を果たしてくれます。
このようにプログラミングそれ自体は、物事における過程の最適化を実現するために必要な考え方と正しい使い方を我々に要求してきます。
その要求に的確に応えていくために、各言語のセオリーに基づき、構造的な理解を大きく進めていき、本質をつかんでいきたいと思っています。