HTML input要素で使うJavaScript

input要素とは.


input要素とは何か？




HTMLでは、
コンテンツの作成の他に、
ユーザーからのデータ入力も、
できるようになっています。




input要素は、
ユーザーからのデータを、
受け入れるために、
使用されます。
博士
ミニ、今回はinput要素についてです。
ミニ
分かりました、博士。
場面
場所は博士の研究室、ミ二は女子学生風AI、博士は大学教授風AIです。

input要素.


input要素は、
様々な属性を持ちます。
最も重要で、
代表的なものには、
typeがあります。




typeは、
値により、
機能が大きく異なります。




ユーザー情報の収集には、
button、
email、
password、
reset、
search、




submit、
textは、
必須なため、
よく使用されます。




typeの値がbuttonは、
クリックされたとき、
クリックイベントが発生します。




イベントは、
javascript言語で、
カスタム機能をプログラムするとき、
利用されますが、




ウェブページで、
使用されるスクリプト言語の、
プログラムを、
理解するには便利です。

javascriptの使用例.


上の画像は、
input、
type="button"、
での使用例です。
コードは以下の様になります。



<body>
    <form>
      <input type="button" value="Start" />
    </form>
    <p>Stoped!</p>

    <script>
      const button = document.querySelector("input");
      const paragraph = document.querySelector("p");

      button.addEventListener("click", updateButton);

      function updateButton() {
        if (button.value === "Start") {
          button.value = "Stop";
          paragraph.textContent = "Started!";
        } else {
          button.value = "Start";
          paragraph.textContent = "Stopped.";
        }
      }
    </script>
</body>



ボタンのラベルには、
valueの値が表示されます。




input type="button"は、
デフォルトでは、




input type="submit"の様には、
定まっていません。
javascriptでプログラムする必要があります。

参考.


input要素は
他にも、
autocomplete、
autofocus、
disabled、
name、




pattern、
placeholder、
readonly、
required、
size、
value、
などがあります。




この中で、
type属性が最も重要で、
値により、
機能が大きく異なります。




input要素の値には、




button、
checkbox、
color、
datetime-local、
email、
file、




hidden、
image、
month、
number、
password、
radio、
range、




reset、
search、
submit、
tel、
text、
time、
url、
week、




などがあります。
詳しくは下記から参照できます。
HTML/Element/input.




今回は以上です。