何かを問い合わせたり、ユーザー登録したり、また資料請求をしたりする時に使うウェブサイトのフォーム。
そんなウェブサイトのフォームですが、誰もが使ったことがあるような身近なもののはず。
だからこそ、ウェブサイトを制作する上で、フォームはなくてはならない存在でしょう。
今回の記事はいろいろな種類あるフォームの部品の一つ、テキストボックスの作成方法について、解説していきます。
inputタグ
テキストボックスを作成するためには、inputタグを使用します。
そして、inputタグのtype属性をtextにすると、テキストボックスが出来上がります。
「type属性をtextにする」、これだけでテキストボックスを作成することができるんですから、とても簡単ですね。
下のHTMLを書くだけで、必要最低限のテキストボックスが作成できます。
<form>
<input type="text">
</form>実際に上のHTMLで作成したテキストボックスを下に表示します。
フォームを作成する時は、構成要素である部品をformタグで囲ってやればいいだけです。
詳しくは下の記事も参照してください。
次からinputタグのtype属性を「text」にした場合に、組み合わせて使う属性について説明していきます。
name属性
作成したテキストボックスに名前を付けます。
POST送信などでデータを受け取った時に、そのデータを参照する時に使います。
フォームを作成する時に、基本的に指定しなければならない属性と考えてよいでしょう。
value属性
作成したテキストボックスに最初に表示させたい値を指定する時に使います。
ウェブサイトを表示させた時に、初期値として文字列を表示させる必要がある時に使いましょう。
<form>
<input type="text" value="初期値を表示">
</form>実際に上のHTMLで作成したテキストボックスを下に表示します。
size属性
作成したテキストボックスのサイズを指定する時に使います。
当たり前ですが、1以上の正の整数を指定します。
ただし、size属性はブラウザによってイメージが異なってしまうことがあるようです。
したがって、CSSのwidthプロパティで指定した方が現実的かもしれません。
maxlength属性
作成したテキストボックスに入力できる文字数を指定する時に使います。
maxlengthの文字通り、「入力できる最大文字数」のことです。
こちらも当たり前ですが、1以上の正の整数を指定します。
データベースの文字列長が決まっていたりする時に、使うとよいでしょう。
<form>
<input type="text" maxlength=10>
</form>上の例だと10文字以上、入力することができなくなります。
実際に上のHTMLで作成したテキストボックスを下に表示します。
実際に入力して、確認してみてください。
ウェブサイト制作例
実際にフォームを作成してみることにします。
下のようなファイルをsample.phpという名前をつけて保存しておきます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<form action="result.php" method="post">
<input type="text" name="sample" maxlength=10 value="10文字以内で入力">
<input type="submit" value="送信">
</form>
</body>
</html>テキストボックスで入力されたデータを受け取るためのページも作成します。
データを受け取るページとして、下のファイルに「result.php」と名前をつけました。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<p><?php echo htmlspecialchars(@$_POST['sample'], ENT_QUOTES, 'UTF-8'); ?></p>
</body>
</html>各ファイルを保存したら、早速ブラウザで確認してみましょう。
このテキストボックスは、value属性を指定していますので、初期値として「10文字以内で入力」と表示されていることがわかります。
このままでも構いませんし、何か文字を入力しても構いません。
テキストボックスに何か入力された状態で、送信ボタンをクリックしてみましょう。
するとresult.phpにページ遷移し、下のように表示されます。
今回のPHPファイルは、xamppで実行していますので、ぜひ参考にしてみてください。
フォームを作成する上で欠かせないテキストボックスについて、解説しました。
