フォームもデザインしたい

ホームページ作成では、フォームを利用する機会もたくさんあります。「メッセージ送信フォーム」や「掲示板・ブログなどの投稿フォーム」が代表的ですが、他にも「アンケートフォーム」など、様々な入力フォームがあります。

これらのフォームは form要素とそれに関連する要素を用いて手軽に作成できます。 しかし、これらのフォームは入力欄の背景が必ず白色であるなど、デフォルトのままではページのデザインに合わない可能性があります。

そこで今回は、フォームの背景を自由自在に装飾する方法をご紹介致します。

メッセージ送信フォーム

例として、次のような「メッセージ送信フォーム」のデザインを考えてみます。

お名前:
メールアドレス:
メッセージ:

よくある構成ですね。このフォームを実現するHTMLソースは以下の通りです。

<form action="***">
   お名前:<input type="text" name="name" size="30"><br>
   メールアドレス:<input type="text" name="email" size="30"><br>
   メッセージ:<br>
   <textarea name="msg" cols="40" rows="5"></textarea><br>
   <input type="submit" value="メッセージ送信">
</form>
※1行目の「action="***"」の「***」部分には、メッセージ送信に使用するCGIのファイル名などが入ります。
※「name」・「email」・「msg」(=name属性値)は、使用するCGIによって書き換える必要のある部分です。何を書くかはCGIによって異なります。
※size属性値やcols属性値の「30」は、フォームのサイズ(横幅文字数)です。rows属性値「5」はフォームの高さ(行数)です。どちらも数値で指定します。

背景を装飾

まず、白色の背景を変えてみましょう。背景には、色を指定することもできますし、画像を指定することもできます。 「背景画像の表示方法を自在に指定」でご紹介したページ背景の装飾方法がほぼそのまま活用できます。

ここでは、名前とメールアドレスの入力欄には背景色を加え、 メッセージの入力欄には背景画像を加える場合を例にご説明致します。

背景色としては淡い黄色を、背景画像には次のような画像を用意しました。

メッセージ入力欄用の背景画像

これらを用いてみたフォームは次のようになります。

お名前:
メールアドレス:
メッセージ:

背景色と背景画像が加わったのがお分かりいただけると思います。 まずは、これらの実現方法をご紹介致しましょう。

装飾方法は、次のページへ →