【HTML】inputタグでユーザーからの入力を受け付け、JavaScriptで取得する方法

このページについて

このページではHTMLで使う事ができるinputタグの機能と使い方を解説しています。

inputタグ

inputはユーザーが何かしらのデータを入力するためのフィールドを定義する機能を持っています。何かしらと書いたのは、このタグはtype属性次第で色々とできる事が変わるという点からです。

このタグはインラインかつ、終了タグが不要です。inpt単体で使うこともできますが、formタグの中で使うこともできます。

inputタグの書き方

inputは単体でもformタグの中でもどちらでも書き方は同じです。

<input>

これだけです。ただしこの状態だと機能が無いに等しいので、属性を使って機能を与えます。

inputタグで使える属性

inputで使う事ができる属性は以下の通りです。

ここではそれぞれの詳しい解説はしませんが、それぞれのページで書いております。詳しくはそちらを参照してください。

inputタグの汎用例

ここからはinputの汎用例を掲載していきます。

基本の入力

まずはコメントや会員登録などの、基本の入力エリアの作成から。これは電話番号・メールアドレス・テキストなど色々な要素があります。それらをそれぞれ適した入力エリアを作ることで、ユーザーにとってもデータを扱う側にとっても、スムーズに進むフォームが出来上がります。

<form>
<label>名前</label>
<input><br>
<label>電話番号</label>
<input type="tel"><br>
<label>メールアドレス</label>
<input type="email"><br>
<input type="submit" value="送信">
</form>

このように基本的な3つの入力エリアと、1つの送信ボタンを備えたフォームを作ったとします。実際の出来上がりは以下のとおりです。

CSSによる装飾やサイズ変化などを一切行ってないのでかなり質素ですが、ベースの見た目はこんな感じになります。

チェックボックスとラジオボタン

typeにはチェックボックスとラジオボタンの2つがありますが、それぞれ用途が異なります。チェックボックスは選択してもしなくてもOKみたいな感じですが、ラジオボタンはどこかしら1つは必ず選択しなければなりません。

ラジオボタンはname属性を使って同じ名前を付与します。そうで無いと、画像のように全て選択できる状態になってしまいます。

正しく使う場合はこのように書きます。

<form>
<label>利き手</label><br>
<label>右</label>
<input type="radio" name="hand"><br>
<label>左</label>
<input type="radio" name="hand">
</form>

こうすることでラジオボタンはname属性(hand)の中で1つしか選択できないようになります。実際のサンプルが以下です。

右
左

どちらか一方しか選択できないのが分かりますね。

反対にチェックボックスは複数選択可みたいな仕組みを取る場合に活用できます。複数選択と、それをJavaScriptでその場で表示する仕組みのサンプルは以下の通りです。

<form name="test">
<label>好きなカメックス</label><br>
<label for="no">通常の姿</label>
<input type="checkbox" value="通常の姿" id="no" name="カメックス"><br>
<label for="mega">メガ進化</label>
<input type="checkbox" value="メガシンカ" id="mega" name="カメックス"><br>
<label for="no">キョダイマックス</label>
<input type="checkbox" value="キョダイマックス" id="vmax" name="カメックス"><br>
<button type="button" onclick="read()">ボタン</button>
</form>

<p id="result"></p>

<script>
function read() {
var z = [];
for (var i=0;i<document.forms.test.カメックス.length;i++) {
if (document.forms.test.カメックス[i].checked==true) {
z.push(document.forms.test.カメックス[i].value);
}
}
document.getElementById('result').innerHTML = z;
}
</script>

これの初期画面が以下です。(画像)

これでどれか1つを選択すると、選んだもののvalue属性が出力されます。

3つ全てを選ぶことも可能です。

これがradioとcheckboxの違いになります。

数字を受け付ける

数字を受け付ける際に、最小値と最大値を設定する事ができます。特定の範囲内での数値を受け付ける方法は以下の通りです。

<form name="test">
<input type="number" min="10" max="100" value="" id="testnum" name="testnum2">
<button type="button" onclick="testfun()">確認</button>
</form>

<p id="result"></p>

<script>
function testfun() {
var x = document.forms.test.testnum2.value;
if (x<10) {
document.getElementById('result').innerHTML = '10より大きい数字を入力してください。'
}else if (x>100) {
document.getElementById('result').innerHTML = '100より小さい数字を入力してください。'
}else {
document.getElementById('result').innerHTML = `数字は${x}です`;
}
}
</script>

これは入力される数値を10から100の間に限定するというものです。なので10を入力した場合は問題ありません。しかしそれより下の数値を入力された場合にはメッセージを出して気付いてもらう必要があります。今回はスクリプトでそれを行うという方式にしました。

行っていることはシンプルで、まずクリック時にtestfun()を起動します。そしてまず入力エリアの数値を取得します。それをif文で判定していくという方式です。10<x<100の数値を入力できた場合はこのように表示されます。

リテラルテンプレートと呼ばれるものを使い、メッセージと変数の値を同時に出力しています。詳しくはそちらの解説ページを参照してください。

パスワード

パスワードを入力される時に使うのがpasswordです。これはシンプルで、文字を隠してくれます。

<input type="password">

実際のサンプルが以下です。

適当に入力してもらって構いません。入力されたデータはどこにもいきませんし、そもそも送信すらできません。ブラウザによってはSafariのパスワード機能が起動したりします。

まとめ

inputは色々な属性があり、それらの組み合わせで受け付ける事ができるものが大きく変わってきます。ここでは全てを紹介していませんが、ファイルなども可能です。詳しくはtype属性のページを参照してください。

inputの汎用例を参考に、自分に必要な入力エリアを構築してみてください。その際はPHPやJavaScriptで値を受け取ることになると思うので、そちらの勉強もしてみてください。

HTMLの基礎

HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。

HTMLタグで押さえておきたいポイント3選

HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。

HTMLタグと属性一覧

HTMLタグと属性の一覧です。

tableタグ生成ページ

tableタグの基本形を生成できるページです。

ulタグ・olタグ生成ページ

ulタグとolタグの基本形を生成できるページです。