iPentec.com / Document / カテゴリ: HTML / タグ: HTML HTMLタグ HTML テキストボックス

HTMLページにテキストボックスを表示する

概要

HTMLページにテキストボックスを表示する場合は、input タグを記述し、inputタグのtype属性にtextを指定します。

補足

複数行のテキストボックスを表示する場合の記述方法はこちらの記事を参照してください。

書式

例

コード

下記のHTMLページを作成します。

TextBox.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  テストページ<br/>
  <input type="text" />
</body>
</html>

解説

下記のinputタグがテキストボックスを表現する記述になります。

  <input type="text" />

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示され、ページ内にテキストボックスが表示されることが確認できます。
HTMLページにテキストボックスを表示する:画像1

文字の入力もできます。
HTMLページにテキストボックスを表示する:画像2

例:テキストボックスに初期値を設定する場合

テキストボックスに初期値が入力された状態で表示する場合はvalue属性に初期値を設定します。

コード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  テストページ<br />
  <input type="text" value="初期値です"/>
</body>
</html>

表示結果

上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。テキストボックスが表示され、初期値が入力された状態で表示されていることが確認できます。
HTMLページにテキストボックスを表示する:画像3

入力されている文字列の編集もできます。
HTMLページにテキストボックスを表示する:画像4