フォームもデザインしたい
ホームページ作成では、フォームを利用する機会もたくさんあります。「メッセージ送信フォーム」や「掲示板・ブログなどの投稿フォーム」が代表的ですが、他にも「アンケートフォーム」など、様々な入力フォームがあります。
これらのフォームは 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」はフォームの高さ（行数）です。どちらも数値で指定します。
背景を装飾
まず、白色の背景を変えてみましょう。背景には、色を指定することもできますし、画像を指定することもできます。 「背景画像の表示方法を自在に指定」でご紹介したページ背景の装飾方法がほぼそのまま活用できます。
ここでは、名前とメールアドレスの入力欄には背景色を加え、 メッセージの入力欄には背景画像を加える場合を例にご説明致します。
背景色としては淡い黄色を、背景画像には次のような画像を用意しました。
これらを用いてみたフォームは次のようになります。
背景色と背景画像が加わったのがお分かりいただけると思います。 まずは、これらの実現方法をご紹介致しましょう。
