【完全版】HTMLでテキストボックスを作る方法を実例付きで解説

※本サイトにはプロモーション・広告が含まれています。

（最終更新月：2023年6月）

✔以下のような疑問を持つ方々に向けた記事となります

「HTMLでテキストボックスはどう作るのだろうか？」
「HTMLでのテキストボックスの作り方を具体的に知りたい」
「HTMLでテキストボックスを作る具体的な例を見てみたい」

✔この記事で解説する内容

  • HTMLでのテキストボックスの作成方法の基本
  • テキストボックスの作り方とその応用
  • HTMLでテキストボックスを作る実例

本記事では、HTMLでのテキストボックスの基本的な作成方法から、様々なオプションを活用した応用まで、具体的な事例を交えて詳しく解説します。

ぜひ最後までご覧ください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker

HTMLテキストボックス入門：基本的な作成方法

こちらでは、HTMLのテキストボックスの基本的な作成方法についてお伝えします。

このセクションでは以下のトピックを取り扱います。

  • テキストボックスの基本的な書式
  • テキストボックスのサイズ調整：size属性
  • テキストボックスの初期値設定：value属性
  • 最大文字数の設定：maxlength属性

テキストボックスの基本的な書式

HTMLのテキストボックスは、<input>タグのtype属性を”text”と指定することで作成します。

<input type="text">

これにより、ユーザーは1行のテキスト情報を入力が可能。

例えば、ユーザー名やメールアドレスなどを入力するためのフォームによく使用されます。

テキストボックスのサイズ調整：size属性

テキストボックスの幅は、size属性を用いて調整が可能です。

size属性の値は、テキストボックスが収容できる文字数を表します。

<input type="text" size="30">

30文字分の幅を持つテキストボックスが作成されます。

ただし表示される文字のサイズや種類により、実際の表示幅が異なるので注意しましょう。

テキストボックスの初期値設定：value属性

テキストボックスの初期値は、value属性を用いて設定できます。

<input type="text" value="初期値">

こちらの例では、テキストボックスに”初期値”と表示された状態で表示されます。

最大文字数の設定：maxlength属性

テキストボックスに入力できる文字数の最大値は、maxlength属性を用いて設定可能です。

<input type="text" maxlength="10">

この例では最大で10文字までしか入力できなくなります。

意図しない長すぎるテキストの入力を防げるメリットがあるのです。

この属性は、以下のような特定の長さを必要とする入力フィールドに特に有用です。

  • ユーザー名
  • パスワード
  • 郵便番号

複数行テキストボックスの作成方法

次に、複数行テキストボックスの作成方法について見ていきましょう。

このセクションでは以下のトピックを取り扱います。

  • 複数行テキストボックスの基本書式
  • 複数行テキストボックスのサイズ変更：cols属性とrows属性

複数行テキストボックスの基本書式

複数行のテキストを入力するためのテキストボックスは、<textarea>タグを使用して作成します。

<textarea></textarea>

このタグの間に初期値を設定可能です。

以下の例ではテキストボックスに”初期値”が表示されます。

<textarea>初期値</textarea>

これを利用することで、ユーザーに対して長いテキスト、例えばフィードバックや意見を入力させられます。

複数行テキストボックスのサイズ変更：cols属性とrows属性

<textarea>タグには、cols属性とrows属性があり、これらを用いてテキストボックスの大きさを調整できます。

  • cols属性：テキストボックスの幅（一行に表示される文字数）
  • rows属性はテキストボックスの高さ（表示される行数）
<textarea cols="50" rows="10"></textarea>

50文字分の幅と10行分の高さを持つテキストボックスが作成されます。

実際に試してみよう：HTMLテキストボックスの実装

それでは、実際にHTMLテキストボックスを作成してみましょう。

このセクションでは以下のトピックを取り扱います。

  • テキストボックス作成の手順
  • 具体的な実装例

テキストボックス作成の手順

まずは、基本的なテキストボックスを作成する手順を説明します。

  1. HTMLファイルを作成
  2. <body>タグの中に<form>タグを追加
  3. <form>タグの中に<input type=”text”>タグを追加

これだけで最も基本的なテキストボックスが作成されます。

具体的な実装例

それでは具体的な実装例を見てみましょう。

以下のHTMLコードは、最大文字数が30、初期値が”Hello, World!”となるテキストボックスを作成します。

<!DOCTYPE html>
<html>
    <body>
      <form>
        <label for="greeting">あいさつ：</label>
        <input type="text" id="greeting" size="30" maxlength="30" value="Hello, World!">
      </form>
    </body>
</html>

上記のコードでは、<label>タグを使用してテキストボックスに対するラベルを設定し、for属性を使用してラベルとテキストボックスを関連付けています。

関連付けるために、テキストボックスのid属性と<label>タグのfor属性の値を一致させましょう。

HTMLのinput要素とその型

HTMLの<input>要素には様々な型があり、それぞれ異なる種類のユーザー入力を受け付けます。

このセクションでは以下のトピックを取り扱います。

  • input要素の基本的な説明
  • 各種のinput要素の型

input要素の基本的な説明

HTMLの<input>要素は、ユーザーからの入力を受け取るためのもので、その型（type属性）によって受け付ける入力の形式が変わります。

型には以下のようなものがあります。

  • “text”：テキスト入力
  • “password”：パスワード入力
  • “checkbox”：チェックボックス
  • “radio”：ラジオボタン
  • “submit”：フォーム入力の送信ボタン

各種のinput要素の型

テキストボックスの他にも、<input>要素はさまざまな種類の入力フィールドを作成できます。

これらはユーザーからの情報収集に役立ちます。

例えば、”radio”型は一連のオプションからひとつを選択させるのに使います。

一方、”checkbox”型は一連のオプションから複数を選択させるのに使えるでしょう。

HTMLテキストボックスの属性とメソッド

HTMLテキストボックスにはさまざまな属性とメソッドがあります。

これらはテキストボックスの挙動を制御し、ユーザーエクスペリエンスを向上させます。

このセクションでは以下のトピックを取り扱います。

  • 主な属性とその利用
  • メソッドの説明と使用方法
  • 非標準の属性とその使い方

主な属性とその利用

HTMLテキストボックスの主な属性には以下のようなものがあります。

  • “type”：入力の種類
  • “value”：初期値
  • “name”：名前
  • “disabled”：無効化
  • “readonly”：読み取り専用
  • “maxlength”：最大文字数
  • “size”：表示サイズ

これらの属性はテキストボックスの挙動を制御しています。

メソッドの説明と使用方法

HTMLテキストボックスにはJavaScriptから操作するためのメソッドも用意されています。

主なメソッドはこちら。

  • “value()”
  • “focus()”
  • “blur()”
  • “select()”

それぞれテキストボックスの値を取得・設定、フォーカスを当てる・外す、テキストを全選択する機能を提供します。

非標準の属性とその使い方

非標準の属性とは、特定のブラウザや状況下でのみ動作する、または旧バージョンのHTMLで使用されていた属性のこと。

これらには通常、“data-“プレフィックスが付きます。

非標準の属性は慎重に使用する必要があり、特に互換性やアクセシビリティの観点から重要です。

CSSを用いたテキストボックスのスタイリング

HTMLテキストボックスの見た目を調整するためにはCSSを使用します。

このセクションでは以下のトピックを取り扱います。

  • UI擬似クラスの例と利用
  • 属性セレクターの利用法
  • ::placeholderとそのスタイリング
  • appearanceとcaret-color属性の利用
  • object-positionとobject-fitの利用
  • スタイル設定の具体的な例

UI擬似クラスの例と利用

UI擬似クラスは、HTML要素の特定の状態に対してスタイルを適用するためのセレクターです。

例えば:focus擬似クラスは、要素がフォーカスされている時にスタイルを適用します。

これをテキストボックスに使用すれば、テキストボックスがフォーカスされた時に枠線の色を変更するなどのスタイリングが可能です。

属性セレクターの利用法

属性セレクターは、要素の特定の属性や属性値に基づいてスタイルを適用するためのセレクターです。

これをテキストボックスに使用すれば、特定の属性を持つテキストボックスにだけ特別なスタイルを適用することが可能です。

::placeholderとそのスタイリング

::placeholder擬似要素は、テキストボックスのプレイスホルダーテキストのスタイリングに使われます。

この擬似要素を使用すれば、プレイスホルダーテキストの色やフォントを自由に変更することができます。

appearanceとcaret-color属性の利用

以下2つのプロパティも理解しておきましょう。

  • appearanceプロパティ：要素のデフォルトの外観をオーバーライドするためのCSSプロパティ
  • caret-colorプロパティ：テキストボックスのキャレット（テキストカーソル）の色を変更

appearanceプロパティでは、ブラウザがデフォルトで提供するテキストボックスの外観をカスタマイズできることを覚えておきましょう。

object-positionとobject-fitの利用

object-positionとobject-fitプロパティは、テキストボックス内の画像や動画の表示を調整するために使用します。

これらを適切に利用すれば、テキストボックス内のコンテンツが見やすく、またユーザビリティを向上させられます。

スタイル設定の具体的な例

具体的なスタイルの設定できる箇所はこちら。

  • テキストボックスの枠線の色や太さ
  • 背景色
  • 文字色
  • プレースホルダーの色
  • キャレットの色

CSSのプロパティを活用すれば、これらの要素を自由に変更し、自分だけのオリジナルなテキストボックスを作ることが可能です。

テキストボックスの追加機能とクライアント側の検証

HTMLテキストボックスは、基本的な入力機能だけでなく、追加的な機能や検証機能も提供します。

このセクションでは以下のトピックを取り扱います。

  • ラベルの利用と関連付け
  • プレイスホルダーのアクセシビリティ
  • クライアント側での検証方法とカスタムエラー
  • ローカライズとその利用方法

ラベルの利用と関連付け

“label”要素は、テキストボックスにラベルを追加するのに使用します。

“for”属性を用いてラベルとテキストボックスを関連付けられるのです。

ラベルをクリックしたときにテキストボックスがフォーカスされるようになります。

プレイスホルダーのアクセシビリティ

“placeholder”属性は、テキストボックスに初期のヒントテキストを表示するのに用いられます。

便利な半面、色覚障害者や画面リーダーを使用するユーザーにとっては見えにくい場合もあるでしょう。

必要な情報はプレイスホルダーだけに依存せず、ラベルなど他の手段で伝えるべきです。

クライアント側での検証方法とカスタムエラー

HTML5では、テキストボックスの入力値をクライアント側で検証するための機能が提供されています。

例えば、“required”属性を用いると、そのテキストボックスが空欄である場合にフォームの送信をブロック可能。

また、”pattern”属性を用いると、入力値が指定した正規表現にマッチするかどうかを検証します。

これらの検証が失敗したときのエラーメッセージは、”title”属性やJavaScriptを使用してカスタマイズすることが可能です。

ローカライズとその利用方法

テキストボックスは、その表示言語を変更することでローカライズすることが可能です。

これにより、テキストボックスのプレイスホルダーやエラーメッセージなどを、ユーザーの言語に合わせて表示できます。

HTMLの”lang”属性やJavaScriptの国際化APIを活用することで、このローカライズを実現します。

アクセシビリティの考慮

このセクションでは以下のトピックを取り扱います。

  • ラベルとアクセシビリティ
  • テキストボックスの大きさとアクセシビリティ

ラベルとアクセシビリティ

先にも触れましたが、ラベルはテキストボックスのアクセシビリティを向上させる重要な要素です。

なぜならラベルが適切に関連付けられていれば、ラベルをクリックすることで対応するテキストボックスにフォーカスを移すことが可能になるから。

また視覚的な指標だけでなく、画面リーダーによって読み上げられる情報としても機能します。

ラベルを上手く使いこなしましょう。

テキストボックスの大きさとアクセシビリティ

テキストボックスの大きさは、その使用感に大きく影響します。

その理由は視覚障害を持つユーザーや高齢者にとって、テキストボックスが小さいと入力が困難になる可能性があるから。

テキストボックスの大きさは十分な大きさを確保しましょう。

具体的な大きさは、ユーザーの具体的なニーズやデバイスの種類によるところが大きいですが、一般的には少なくとも指の先で容易に選択できるほどの大きさが求められます。

HTMLテキストボックスの仕様書とブラウザーの互換性

HTMLテキストボックスが各ブラウザでどのように実装されているかは、ブラウザの互換性に影響します。

このセクションでは以下のトピックを取り扱います。

  • HTMLテキストボックスの仕様書の見方
  • ブラウザ間の互換性と対応表

HTMLテキストボックスの仕様書の見方

HTMLテキストボックスの仕様は、World Wide Web Consortium (W3C) によって制定されたHTML5の仕様書に記述されています。

仕様書では、テキストボックスの動作や属性、メソッドなどが詳細に説明されており、ブラウザがテキストボックスをどのように解釈すべきかが定められています。

ブラウザ間の互換性と対応表

しかし、全てのブラウザが仕様書を完全に準拠しているわけではありません。

各ブラウザは独自の実装を持つことがあり、また仕様書の解釈にも違いが出ることがあります。

このため、ブラウザ間でテキストボックスの挙動に違いが出ることがあります。

このようなブラウザ間の互換性の問題は、Can I useやMDN Web Docsなどのリソースを利用して確認することが可能です。

まとめ

当記事では、HTMLテキストボックスの使い方をひと通り学びました。

ただしこれはあくまで基本的な内容に過ぎません。

さらに詳しく学ぶには、以下のようなものを利用しより深く学ぶことをおすすめします。

  • 公式のHTML5仕様書
  • MDN Web Docs
  • 各種のチュートリアル
  • 書籍

また、実際に手を動かしてテキストボックスを作成したり、スタイリングを試したりすることで、理解を深められるでしょう。

タイトルとURLをコピーしました