「テキストボックス」って何？htmlでWebサイトにテキストボックスを実装するポイント

「テキストボックス」って何のこと？使い方は？

「テキストボックス」とは、Webサイトなどに文字を入力するために設定されている場所のことを言います。つまり「Webサイト内で文字入力を行う場所」です。

テキストボックスはWebサイトやプレゼンテーションソフトで文字を入力する際に使われます。

Webサイト内でのテキストボックスの使い方

現在のインターネットでは数多くのWebサイトが存在しており、様々なサイトを多くの人が利用しています。Webサイトの中では、特にショッピングサイトなどで配送先や氏名を入力する際にテキストボックスが使用されることが多いです。ショッピングサイトだけではなく、会員制度を持っているサービスやWebサイトでは会員情報を登録・入力することがあります。

そのようなWebサイトやサービスでの会員情報の入力にもテキストボックスが使われます。氏名や住所、連絡先メールアドレスや電話番号など、様々なユーザー個々の必要情報はどうしてもユーザー自身に入力してもらう必要があります。そのような時にテキストボックスが必要になるのです。

Webサイト以外でのテキストボックスの使い方

Webサイト以外でも「テキストボックス」は使われます。代表的なのがプレゼンテーションソフトです。プレゼンテーションソフトでは新製品やサービスなどの発表を行います。写真や動画、画像や図表などが使われることが多いですが、説明文が添えられているのを見た方も多いのではないでしょうか。プレゼンテーションで添えられている説明文を入力する際にもテキストボックスが使われます。

プレゼンテーションとWebサイトでのテキストボックスの違い

テキストボックスが様々な場面で使われていることをご紹介しました。ただし、プレゼンテーションとWebサイトで使われているテキストボックスは少し異なります。プレゼンテーションソフトで使われるテキストボックスは、ソフトそのものが持っている機能の一つですが、Webサイトで使われているテキストボックスはHTMLを使って個別に実装されているものです。

Webサイトでのテキストボックスの実装方法

Webサイトでテキストボックスを実装するためには何が必要なのでしょうか？

Webサイトを製作するためには様々なツールやアプリケーションが使われていますが、基本はHTMLとCSSのコードを使って構成されています。

テキストボックスのHTMLコードについて

一般的に使われるテキストボックスのHTMLコードは以下の2つがあげられます。

(1)<input type=”text” name=”name”>

HTMLのコードは「<>」と「で括られており「タグ」と呼ばれます。テキストボックスを表すためのタグの一つが「inputタグ」です。inputタグは氏名やメールアドレスを入力する際によく使われる「1行のテキストボックス」を実装するためのHTMLタグです。

Webサイトで情報を入力するために設定されるのは多くがこの「inputタグ」を使った1行のテキストボックスとなっています。

(2)<textarea name=”name”></textarea>

「inputタグ」が「1行のテキストボックス」であることはご紹介しました。場合によっては1行以上の文章を入力してほしい場合もあると思います。

そのような用途で使われるのが「textareaタグ」です。「textarea」の場合は行数の制限なく自由に文字入力が行えるフィールドであるため、Webサイトの「自由入力欄」や転職サイトなどの「履歴書欄」「自己アピール欄」などで使われることが多いタグです。

主に「複数行の入力」を目的としたテキストボックスを設置する際に使われるのが「textareaタグ」です。

テキストボックスを実装する時に注意するポイント

テキストボックスを実装するためのHTMLコードを入力し、配置することでWebサイトの任意に指定された場所にテキストボックスが現れることになるのです。しかし、単にテキストボックスのHTMLコードを入力すればいいというわけではありません。Webサイトにはサイト全体の設計やコンセプトがあるため、Webサイト自体のデザインを崩さず、違和感のない位置やデザインでテキストボックスが実装されないとサイト全体のバランスが崩れてしまいます。

「input」や「textarea」などのHTMLタグは、テキストボックスを実装するために必要なHTMLタグですが、実装のためにはWebサイト全体の設計やデザインがしっかりと仕様として固まっていることが求められます。

文字入力がさほど求められないことが前提として設計されたサイトにテキストボックスを設置するHTMLタグを設置してもサイト全体のコンセプトには合いません。

メールアドレスを入力するだけのテキストボックスを設置したいのに、HTMLタグとしては複数行入力できるものを実装してもあまり効果的だとは言えません。

このようにテキストボックスのHTMLタグを使って機能を実装できるとしても、きちんと用途ごとに使い分けは必要になるのです。

まとめ

ここまで、テキストボックスとは何か？WebサイトなどでHTMLタグを使って実装するための方法と注意点について紹介してきました。

HTMLタグはWebサイトを作成する上で必要不可欠ですし、テキストボックスもユーザーやサイト運営者にとっても必要な場合が多いですが、その使い方や配置の仕方にはしっかりとしたコンセプトが必要です。テキストボックスを使うことも、HTMLタグを身につけることも、どちらも手段であり目的ではありません。

Webサイトを便利に使ってもらうためにも、適切にテキストボックスを配置できるように丁寧なサイト設計を心がけましょう。