HTML & CSS - テキストフィールドを表示する

テキストフィールドを表示する

テキストフィールドを表示するには、input 要素で定義します。

input 要素は、フォームの部品を作るための要素のひとつです。type 属性の値を text にすることでテキストフィールドに設定することができます。

テキストフィールドに入力するテキストは途中で改行ができないため、名前、ID、メールアドレス、電話番号など、比較的短いテキストを入力するために使用します。

<form action="#" method="post">

  <input type="text" name="name">
  <input type="submit" value="Save">
  
</form>

type="text"

<type 属性の値を text にすることでテキストフィールドに設定することができます。

name=""

テキストフィールドの名前を文字列で指定します。name 属性の値は、value 属性の値とセットで送信されます。

value=""

value 属性は、初期値としてテキストフィールドに表示されます。

size=""

size 属性はテキストフィールドの横幅を文字数で指定します。ただし、横幅はブラウザによって異なるため、どのブラウザでも同じ幅で表示させたい場合は CSS で定義するべきです。

maxlength=""

maxlength 属性はテキストフィールドに入力できる最大文字数を指定します。例えば、maxlength="10" とした場合は、10 文字までしか入力できません。

disabled

disabled 属性が指定された項目は入力不可の状態になります。また、disabled 属性が指定された項目はサーバにデータも送信されません。

readonly

readonly 属性が指定された項目は変更不可の状態になります。ただし、disabled 属性と異なり、readonly 属性が指定された項目はサーバにデータは送信されます。

テキストフィールドをメールアドレス入力用としたい場合は、type 属性に email を指定します。type 属性に email を指定することで、入力値がメールアドレスかどうかのチェックを行うようになります。もしも入力値がメールアドレスの形式でない場合、フォームのボタンをクリックしたときに警告を表示します。

<form action="#" method="post">

  <input type="email" name="mail">
  <input type="submit" value="Save">
  
</form>

テキストフィールドを電話番号入力用としたい場合は、type 属性に tel を指定します。type 属性に tel を指定することで、スマートフォンでは電話番号の入力に適したテンキー型のキーボードが表示されるようになります。ただし、メールアドレス入力用の場合と異なり、電話番号でない形式が入力されていても警告は表示されません。

<form action="#" method="post">

  <input type="tel" name="phone">
  <input type="submit" value="Save">
  
</form>

テキストフィールドをパスワード入力用としたい場合は、type 属性に password を指定します。type 属性に password を指定することで、どの文字を入力しても「●」が表示されるようになります。

<form action="#" method="post">

  <input type="password" name="pw">
  <input type="submit" value="Save">
  
</form>

テキストフィールドに入力のヒントを表示したい場合は、placeholder 属性にヒントとなる文字列を指定します。placeholder 属性は、テキストフィールドに初期値として入力されているように見えますが、ユーザが入力を開始すると消えます。つまり、ユーザに何を入力すれば良いのか説明するためのヒントを表示させることができます。

<form action="#" method="post">

  <input type="password" name="pw" placeholder="パスワードを入力してください。">
  <input type="submit" value="Save">
  
</form>