【HTML】テキストボックスの使い方+アレンジ方法総まとめ!
  • facebookページ
  • twitterページ
  • 2020.04.17

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

    テキストボックスの役割

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

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

    テキストボックスの役割

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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属性を使用します。

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

    ■表示結果

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

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

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

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

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

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

    ■表示結果

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

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

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

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

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

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

    ■表示結果

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

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

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

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

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

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

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

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

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

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

    ■HTML+JS

    ■CSS

    ■表示結果

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

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

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

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

    テキストボックスで入力した値は左寄せで表示されていますが、右寄せにはできませんか?

    右寄せで表示させるには、CSSで「text-align」を指定すればOKです。

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

    ■HTML

    ■CSS

    ■表示結果

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

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

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

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

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

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

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

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

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

    ■CSS

    ■表示結果

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

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

    ■CSS

    ■表示結果

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

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

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

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

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

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

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

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

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

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

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

    ■HTML

    ■CSS

    ■表示結果

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

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

    まとめ

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

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

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE