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

文字情報を入力することのできる、長方形のテキストボックスが表示されました。