コメント投稿フォーム

コメント投稿フォームを設置します。名前・タイトル・メールアドレス・ＵＲＬ・コメント・パスワード・秘密コメントを表示します。

スタイルシート部分

h4#comformtitle {
        font-size: 100%;
	font-weight: bold;
	margin: 5px 0px 5px 0px;
	padding: 6px 0 6px 25px;
	background: #ffffff;
        border: 1px solid #999999;
	color: #000;
}
.comform ul {
	width: 100%;
	margin: 0;
	padding: 0;
        
}
.comform li {
	font-size: 90%;
	margin: 0;
	padding: 0px 0px 10px 0px;
        list-style: none;
}

HTML部分

          </div>
      </div>
    <!--/comment-->
    <h4 id="comformtitle">コメントの投稿</h4>
    <form method="post" action="./">
      <input type="hidden" name="mode" value="regist">
      <input type="hidden" name="comment[no]" value="<%pno>">
      <div class="content">
        <ul class = "comform">
          <li><label for="name">お名前</label></li>
          <li><input type="text" name="comment[name]" size="30" value="<%cookie_name>"></li>
          <li><label for="subject">タイトル</label></li>
          <li><input type="text" value = "" name="comment[title]" size="30"></li>
          <li><label for="mail">メール</label></li>
          <li><input type="text" name="comment[mail]" size="30" value="<%cookie_mail>"></li>
          <li>URL</li>
          <li><input type="text" name="comment[url]" size="30" value="<%cookie_url>"></li>
          <li>コメント</li>
          <li><textarea cols="40" rows="8" name="comment[body]"></textarea></li>
          <li>パスワード</li>
          <li><input type="password" name="comment[pass]" size="20"></li>
          <li>秘密</li>
          <li><input type="checkbox" name="comment[himitu]">
  管理者にだけ表示を許可する</li>
          <li><input type="submit" value="投稿"></li>
        </ul>
      </div>
    </form>
    <!--/comment_area-->
  </div>

スタイルシート部分

h4#comformtitle

「コメントの投稿」というタイトル部分です。ここで設定するスタイルはコメントリスト部分で設定したh4#comheader, h4#tbheaderと同じです。

.comform ul

コメントフォーム内はリストでそれぞれ配置しています。コメントのラベル（お名前、タイトル、メール・・・）とインプット部分をそれぞれリストで交互に並べています。ここでは幅を100%にしています。ulは、囲まれた部分がリストである事を示しています。リストには<li>と</li>に囲って記述します。

.comform li

リストは一般的には黒丸（・）がつきますが、ここでは黒丸は不必要ですので、list-style: none;でリストを非表示にしています。

HTML部分

HTMLのフォームについての記述法は少し長くなる為、省略します。コメントフォーム部分の全体の構造を下に画像で表します。

コメント投稿フォーム画像

h4に「コメントの投稿」という見出しを表示させています。文字サイズや枠線のスタイル等はスタイルシート部分のh4#comformtitleにて宣言しています。そして全体をcontentで囲い（これはコメントリストの本文と同じスタイルを適用）、リストにcomformを適用しています。ラベル部分と入力部分を<li>でリスト表示しています。

今回使用するＦＣ２変数

<%pno>・・記事のNoを表示し、コメント投稿フォームには必須の変数です。
<%cookie_name>・・クッキーで保存されている投稿者名を表示
<%cookie_mail>・・クッキーで保存されている投稿者のメールアドレスを表示
<%cookie_url>・・クッキーで保存されている投稿者のサイトＵＲＬを表示

クッキーというのは、訪問者のコンピューター内に一時的に保存しておくデータの事で、コメント投稿の場合、一度コメントを投稿した事がある場合、再訪問時にクッキーで保存されている部分を再度記述する必要なく、自動的に表示される事です。他にもアフィリエイト・リンクにはこのクッキーというシステムが使用されている場合が多く、リンクからの訪問履歴を保存しています。

スポンサーサイト

前後の記事

最近の記事

コメント投稿フォーム

前後の記事

最近の記事

Search

ＦＣ２blogビギナーズガイド

コラム

作成したツール

月別アーカイブ

Links