HTMLページにテキストボックスを表示するコードを紹介します。
概要
HTMLページにテキストボックスを表示する場合は、
input タグを記述し、inputタグのtype属性にtextを指定します。
補足
複数行のテキストボックスを表示する場合の記述方法は
こちらの記事を参照してください。
書式
<input type="text" value="(テキストボックスに入力されている初期値)"/>
例
コード
下記の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ブラウザで表示します。下図のページが表示され、ページ内にテキストボックスが表示されることが
確認できます。
文字の入力もできます。
例:テキストボックスに初期値を設定する場合
テキストボックスに初期値が入力された状態で表示する場合は
value属性に初期値を設定します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
テストページ<br />
<input type="text" value="初期値です"/>
</body>
</html>
表示結果
上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。テキストボックスが表示され、初期値が入力された状態で表示されていることが
確認できます。
入力されている文字列の編集もできます。
補足
テキストボックスに文字列が入力されていない場合に、背景にテキストボックスの説明の文字列を表示する方法は、
こちらの記事を参照してください。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2021-08-31
作成日: 2020-08-19
