【ホームページ作成】フォームの背景や文字を装飾する方法

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

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

これらのフォームは 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>

背景を装飾

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

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

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

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

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

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