【HTML】テキストボックスの使い方（基礎編）

こんにちは！Kです！

今回は、HTMLでのテキストボックスについて書こうかと思います。

テキストボックス は、例えば資料請求するときや何かに応募するときに名前や住所などを入力する入力欄をイメージしてもらえれば大丈夫です！

基本的な使い方から、いろいろな使い方まで紹介したいと思います。

テキストボックス の作り方

テキストボックス はinputタグのtype属性にtextを設定することで作ることができます。

<input type=”text”>

■ブラウザでの表示結果

たったこれだけです！

テキストボックスは文字を直接打つことができる要素です。
よく使うので覚えておきましょう。

テキストボックス の属性の使い方

テキストボックスは使用できる属性も他と比べ多く、プログラムを組まなくても様々なチェック機能を使うことが可能です。
属性ではテキストボックスに入力できる最大値を設定したり、入力例を表示したりと様々な設定が可能です。

ここから使える属性を簡単に紹介します。

◎横幅を設定する

テキストボックス の横幅を設定するにはサイズ属性を使えば変更できます。
ただし、ブラウザによって幅が変わるのでCSSで設定した方が無難かもしれませんね。

<input type="text" name="sample" size="12">

■ブラウザでの表示結果

◎入力文字数を制限する（最大文字数）

テキストボックスの入力文字数を制限するには「maxlength」属性で可能です。maxlength属性の値に入力最大文字数を設定するだけです。

下の例では6文字以上の文字を入力することができません。

<input type="text" name="sample" maxlength="5">

■ブラウザでの表示結果

◎最小文字数を設定する

テキストボックスの最小文字数を設定するには、「minlength」属性で可能です。

下の例では5文字以上で入力する必要があるという意味になります。

<input type="text" name="sample" minlength="5">

◎ヒントを表示する

テキストボックス にヒントを表示することでユーザーがすぐに何を入力したらいいか理解させることができます。
これを設定するには、「placeholder」属性を使えば可能です。

下の例では電話番号を入力するテキストボックス に対して、どう入力したらいいかを一目でユーザーに理解させることができます。

<p>電話番号を入力：
<input type="text" name="sample" placeholder="000-0000-0000">
<p/>

■ブラウザでの表示結果

電話番号を入力：

初期値を設定する

テキストボックス に初期値を設定する場合は、「value」属性に値を設定すれば可能です。

<input type="text" name="sample" value="初期値を設定">

■ブラウザでの表示結果

入力不可に設定する

テキストボックスに入力できなくするには、「disabled」属性を使います。
disabledと入れるだけでテキストボックスへの入力が不可になります。

<input type="text" name="sample" disabled>

■ブラウザでの表示結果

最後に

いかがでしたでしょうか。

今回はよく使いそうなものに絞り基礎編として紹介しました。

今回紹介したもの以外にも様々な属性がありますので、またどこかの記事で紹介したいと思います。

属性を使っての実装はあくまで一例なので、もちろんJavaScriptを使っての実装も多く目にします。

状況に応じて使えるようになりましょう！

それでは、また！

Follow me!