4.3 テキストボックス
【ここで学ぶ内容】
- テキストボックス
<input type="text" name="名前">
4.3 テキストボックス
テキストボックスは、1行のテキストを入力するフォームです。
図 4.3.1 テキストボックス
早速、テキストボックスを作っていきます。
1. 準備
まず、HTMLファイルを保存するためのフォルダを新しく作成します。1章で作成した［webpage］フォルダのなかに、［ch04］フォルダを作成してください。フォルダができたら、新しくテキストエディタを開いて、［form.html］という名前で、［ch04］フォルダに保存してください。文字コードは、これまでと同様に、UTF-8としましょう。
2. HTMLファイルにソースコードを記述
［form.html］に以下のソースコードを記述してください。
①ソース・フォルダー ：webpage/ch04
②ファイル名 ：form.html
➢ form.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームの作成</title>
</head>
<body>
<form action="" method="POST">
<p>名前：<input type="text" name="name"></p>
</form>
</body>
</html>
テキストボックスは、<input>タグのtype 属性に、「text」を指定します。
また、記入内容を送信したときに、相手側のプログラムが、どの入力欄に記入されたデータなのかを判断できるようにname属性に名前を指定します。今回のテキストボックスは、「名前」の記入を行うものですので、name属性に「name」という名前を指定しました。ここは任意ですが、わかりやすい名前をつけておきましょう。ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示しましょう。
3. ブラウザで確認
図 4.3.2
文字情報を入力することのできる、長方形のテキストボックスが表示されました。