HOME
HTML と CSS を始められる方を対象とした HTML/CSS 入門です。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>