WEBページにフォームを設置する方法1

WEBページにフォームを設置する方法1

様々なWEBサイトでお問い合わせフォームは見たことがあるかと思います。WEBサイトの利用者にとって、お問い合わせフォームがあるとわからないことを聞くことができるので、助かりますよね。

そんなフォームの設置方法について説明いたします。長くなりそうなので、2回に分けて書きたいと思います。

フォームは、全体をformタグで囲って、中にフォームを配置していきます。

<form action="form.php" method="POST">
<p>お名前:<input type="text" name="name"></p>
<p>メッセージ:<textarea name="body"></textarea></p>
</form>

・form
formタグはそこにフォームを設置する際に記述します。オプションにある”action”は、フォームの内容を送信する時の動作について記述したPHPやCGIを指定します。今回はPHPやCGIの詳細については割愛させていただきます。それから、”method”オプションは、POSTとGETのどちらの形式でフォームを送信するか指定します。こちらも今回はあまり気にしなくていいです。

お気づきの方もいらっしゃるかもしれませんが、フォームを送信するには送信用のプログラムを作成する必要があります。ただ、送信用プログラムは、インターネット上で無料で入手することもできますのでご安心ください。送信用プログラムは、簡単にカスタマイズして利用することができるように設計されているものが多いので、PHPやCGIの知識がなくても使えるようになっています。

・input
inputタグでは、フォームの種類や名前を指定します。”type”オプションでフォーム(ボックス)の種類を指定します。上記ではtextとなっていますので、テキストボックスが表示されます。”name”オプションでは、フォームが送信された時にどのデータがどの名前になっているか、といったことを指定できます。typeがtextの部分ではname=”name”となっていますので、nameという名前でデータが送信されます。

・textarea
textareaは、長い文章等を入力するためのフォームになります。textareaを設置すると複数行に亘って文字を入力することができます。

上記のフォームをブラウザで表示すると以下のようになります。

お名前:
メッセージ:

テキストとテキストエリア

inputタグのtypeがtextになっている場合は、1行だけデータを入力させるボックスが設置できます。このタグにさらにオプションを追加したいと思います。

<input type="text" name="name" size="20" maxlength="10" value="初期値">

sizeオプションでは、ボックスの長さを指定します。値は20になっているので、20文字分の長さになります。maxlengthは、受け付ける最大文字数になります。10が指定されている場合、10文字までしか入力できません。valueは、初期値です。最初に入れておく内容を指定することができます。

続いてtextareaですが、こちらもボックスのサイズを指定することができます。以下のようにrowsとcols、初期値を追記してみてください。

<textarea name="body" rows="5" cols="30">初期値</textarea>

rowsは行数(縦幅)を、colsは文字数(横幅)を指定します。初期値を指定するには、直接タグの中に書き込みます。

このようにサイズや初期値も指定することができますので、色々試してみてください。

パスワード

よく登録制のWEBサービスにログインする際にパスワードを入力するフォームを見かけると思います。入力内容が※や●に変換されるアレです。
パスワード用フォームの設置方法はいたって簡単で、inputタグのtypeオプションにpasswordを指定するだけです。

パスワード:<input type="password" name="password" size="10" maxlength="10" value="12345">

パスワード用のフォームでも、テキスト用のフォームと同じようにサイズや最大文字数のオプションが使えます。ただ、パスワード用のフォームには半角英数字しか入力できないので、初期値を設定するとしたら半角英数字にしてください。まぁ、あまりパスワードに初期値は設定されていないですね。

パスワード用のフォームは、入力している内容が何かわからないようになっています。上記の例だと、初期値に設定した12345が入っていますが、5文字入っていることしかわかりません。

このようにパスワード用のフォームを設置するのは難しくないので、自分のWEBサイト内でパスワードを入力してフォームを送信するような場面があったら使ってみましょう。

WEBページにフォームを設置する方法2を読む

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です