【HTML】テキストボックスの使い方＋アレンジ方法総まとめ！

テキストボックスの役割

テキストボックスとは、直接文字を打ち込める要素のことです。

Webページにある「お問い合わせフォーム」がわかりやすい例でしょう。

submit（送信）ボタンを押すことで入力したデータをサーバーサイドに送れます。

また、属性値を設定すればテキストではなく数字のみを入力できるように指定したり、パスワードのように入力された値を「*」で隠すことも可能です。

Webページを作成するにあたって、テキストボックスを使う機会は多くあるため、必須の知識といえます。

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

テキストボックスには、大きくわけて次の2つがあります。

• inputタグで1行のテキストボックスを作成
• textareaタグで複数行テキストボックスを作成

ひとつずつ使い方を見ていきましょう。

inputタグで1行テキストボックスを作成

inputタグを使うことで、1行のテキストボックスが作成可能です。

ポテパンのお問い合わせフォームでいうと「お名前」「メールアドレス」「題名」がinputタグで作られています。

inputタグは次のように記述して使いましょう。

<input type=”text” name=”name”>

type属性にはさまざまな属性値を設定可能です。

詳しくは、「テキストボックスで使える属性」で解説します。

また、inputタグでは「name属性」を指定するのもほぼ必須といえます。

name属性を簡単に説明すると、入力項目を管理するclassやidのようなものです。

name属性についても後述します。

textareaタグで複数行テキストボックスを作成

textareaタグを使うことで、複数行のテキストボックスが作成可能です。

ポテパンのお問い合わせフォームでいうと「メッセージ本文」がtextareaタグで作られています。

長い文章を入力されるのが予想できる場合は、textareaタグで作成しましょう。

textareaタグは次のように記述します。

<textarea name=”name”></textarea>

inputタグとは異なり、type属性の指定はありません。

また、</textarea>の閉じタグが必要になります。

テキストボックスで使える属性

ここでは、テキストボックスで使える属性について見ていきましょう。

テキストボックスでは、inputタグとtextareaタグでそれぞれ次の属性を設定できます。

属性名	説明	inputタグ	textareaタグ
type属性	テキストボックスの形式	○	×
name属性	テキストボックスの名前	○	○
value属性	テキストボックスの初期値	○	×
size属性	テキストボックスの幅	○	×
maxlength属性	テキストボックスの入力できる最大文字数	○	○
placeholder属性	テキストボックスの入力内容のサンプル	○	○
checked属性	チェックされている状態に設定（チェックボックスの場合）	○	×
disabled属性	テキストボックスの無効化	○	○
readonly属性	テキストボックスの書き換えを禁止する	○	○
cols属性	テキストボックス の横幅を文字数で指定	×	○（必須）
rows属性	テキストボックス の縦幅を行数で指定	×	○（必須）

上記はすべてではありませんが、よく使われる属性です。

inputタグとtextarea属性で、使える属性が異なりますので注意しましょう。

type属性の種類は次の通りです。

type属性値	説明
text	テキスト入力
number	半角数字のみ入力
tel	話番号入力
email	メールアドレス入力
url	サイトURL入力
password	パスワード入力
radio	ラジオボタン
checkbox	チェックボックス
file	ファイル選択
search	検索フォーム
date	カレンダーから年月日を入力
hidden	隠しデータ
submit	送信ボタン
reset	リセットボタン
image	画像による送信ボタン
button	汎用ボタン

text以外にも、numberやtelなど用途に応じてtype属性は指定できます。

テキストボックスをアレンジする

ここでは、テキストボックスをアレンジする方法を紹介します。

次の基本的なスタイルの変更方法と、おしゃれにデザインする方法をあわせて説明しますね。

• テキストボックスのサイズ・幅を変更する
• テキストボックスの初期値の指定方法
• テキストボックスを入力不可にする
• テキストボックスの値を取得する
• テキストボックスの値を右寄せにする
• テキストボックスで改行する
• テキストボックス背景色を変える
• テキストボックス文字数制限する
• テキストボックス表示・非表示を指定する

ひとつずつ解説します。

テキストボックスのサイズ・幅を変更する

テキストボックスのサイズを変更するには、size属性を使用します。

サンプルで表示を確認してみましょう。

<input type="text" size="1">
<input type="text" size="5">
<input type="text" size="10">
<input type="text" size="20">

■表示結果

size属性には「文字数」または「ピクセル数」を指定します。

ただし、size属性は使用するブラウザによって解釈が異なってしまいます。

参考：Input タグ Text ボックスの size 属性はブラウザにより解釈が異なるので注意

確実にサイズを指定したい場合は、widthを使った方が確実でしょう。

また、textareaタグでテキストボックスのサイズを変更したい場合は「cols」と「rows」の値を調整しましょう。

<textarea cols="30" rows="5"></textarea>
<textarea cols="100" rows="5"></textarea>
<textarea cols="30" rows="10"></textarea>
<textarea cols="100" rows="10"></textarea>

■表示結果

テキストボックスの初期値の指定方法

テキストボックスの初期値を指定するには、「value属性」か「placeholder属性」を指定します。

ただし、textareaタグはvalue属性を指定できないため、placeholder属性のみになります。

value属性は編集可能なテキストが表示され、placeholder属性には編集不可なテキストが表示されます。

サンプルコードで表示を確認してみましょう。

<input type="text" value="初期値を指定します、未入力でも何か値を入れておきたい場合に使用されることが多いです。" >
<input type="text" placeholder="初期値を指定します、記入例などで使用されることが多いです。" >
<textarea placeholder="初期値を指定します、記入例などで使用されることが多いです。" ></textarea>

■表示結果

テキストボックスを入力不可にする

テキストボックスを入力不可にするには、readonly属性を指定します。

readonly属性を指定するには「readonly」と記述すればOKです。

<input type="text" size="50" value="入力できません。" readonly>
<textarea cols="100" rows="5" placeholder="入力できません。" readonly></textarea>  

見た目にはわかりませんが、入力しようとしてもテキストボックスが選択できないはずです。

テキストボックスの値を取得する

テキストボックスの値を取得するには、Javascriptの知識が必要になります。

簡単に流れを説明すると次の通りです。

①テキストボックスにidを設定
②Javascriptで指定したidのvalueを取得

ここでは、inputに入力された値をボタンクリックで表示されるサンプルを作成してみます。

■HTML+JS

<input type="text" id="msg" size="50">
<input class="button" type="button" value="値を表示します" onclick="alert_msg()">
<script>
    function alert_msg() {
      var message = document.getElementById('msg').value;
      alert(message);
    }
</script>

■CSS

input {
  padding: 10px;
}
.button {
  background-color: #FF3C5F;
  border: #FF3C5F;
  color: #fff;
  border-radius: 5px;
}

■表示結果

テキストボックスとボタンも少しアレンジしてみました。

テキストボックスに入力した値を「value」で取得し、アラート画面に表示されているのがわかります。

テキストボックスの値を右寄せにする

サンプルで表示を確認してみましょう。

■HTML

<input type="text" class="right" size="50">
<input type="text" class="center" size="50">

■CSS

input.right {
  padding: 10px;
  text-align: right;
}
input.center {
  padding: 10px;
  text-align: center;
}

■表示結果

サンプルでは確認していませんが、text-alignでleftを指定すれば左寄せ表示になります。

ただし、左寄せ表示がデフォルトなのでわざわざ指定する必要はないでしょう。

テキストボックスで改行する

テキストボックスで改行する・改行できるものを使う場合は「textareaタグ」を使用しましょう。

inputタグでのテキストボックスは、前述した通り1行のテキストボックスになるため改行できません。

テキストボックスの背景色を変える

テキストボックスの背景色を変えるには、要素のCSSに「background-color」を指定しましょう。

サンプルコードで背景色を変更してみます。

■CSS

input {
  padding: 10px;
  background-color: cadetblue;
  color: white;
}

■表示結果

「:focus」を使って入力中の項目の背景色だけ変える、なんてことも可能です。

■CSS

input {
  padding: 10px;
  margin-bottom: 10px;
}
input:focus {
  background-color:cornflowerblue;
}

■表示結果

テキストボックスの文字数を制限する

テキストボックスの文字数を制限するには、maxlength属性を使用しましょう。

ユーザーが文字数を多く入力しても、指定した値までしか表示されないため、長すぎる文字を入力されたくない場合にmaxlength属性は活躍します。

指定方法は次の通りです。

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

上記の場合だと半角・全角問わず10文字以上は入力できません。

また、maxlength属性はtextareaタグにも使用可能です。

テキストボックスの表示・非表示を指定する

テキストボックスの表示・非表示を指定するには、主に次の3通りあります。

①type属性に「hidden」を指定する
②CSSで「display: none;」を指定する
③CSSで「visibility: hidden;」を指定する

サンプルで確認してみましょう。

■HTML

<input type="hidden" size="50" value="hidden属性のテキストボックスです。">
<input type="text" class="display" size="50" value="display:noneのテキストボックスです。">
<input type="text" class="visibility" size="50" value="visibility:hiddenのテキストボックスです。">
<input type="text" size="50" value="指定なしのテキストボックスです。">

■CSS

.display {
  display: none;
}
.visibility {
  visibility: hidden;
}

■表示結果

属性を指定したテキストボックスが表示されていないことがわかります。

まとめ

HTMLのテキストボックスについて解説しました。

Webページを作成する上でテキストボックスを使う機会は多くあります。

属性の指定によってさまざまなテキストボックスを作成できますので、ぜひこの記事を参考にテキストボックスを使いこなしてください！