コメントフォームの入力必須を指定する required属性

コメントフォームの入力必須を指定する required属性

カスタマイズ
2019/03/27 7
vanillaice (Akira)
vanillaice (Akira)
初心者向け HTML5 Instruction

html5新要素なので利用するにはテンプレートのDTD(ドキュメントタイプ宣言)をチェックしてください。html4.0などでは使えません。

コメントをもらう際に入力を必須にしておきたいものがいくつかあると思います。その方法です(簡単ですよ)

required属性追加の仕方

必須にしたいinput要素 に required (読み方: りくわぃあーど)を追加するだけです。例えばFC2ブログのコメント欄「URL」

元の内容

<input id="url" type="text" name="comment[url]" value="<%cookie_url>">

required属性追加

<input id="url" type="text" name="comment[url]" value="<%cookie_url>" required>

元の内容はテンプレートによって若干違いはありますが、概ねこんな感じです。id名が違ったりclass属性やplaceholder属性が付いていることもあります。
comment[url] というのはFC2ブログだけで使える特殊な変数です。

必須項目を入力せずに送信ボタン(サンプルではsend)を押すとアラートが表示されます。アラートの文言はブラウザによって異なります。サンプルはGoogle Chromeの例です。

FC2ブログテンプレートで行う場合には「コメント投稿」用フォームと「コメント修正」用フォームの 2つ がありますので、双方を変更するようにします。各input要素につき2度つづの修正が必要です。

少し前までSafariがrequired属性非対応でしたが現在では対応済み。実装状況はブラウザ依存で、ほとんどのブラウザが実装済みになりました。

利用上のヒント

投稿者に対して予め「必須」であることを伝えたい場合は placeholder属性も追加しましょう。

<input id="url" type="text" name="comment[url]" value="<%cookie_url>" placeholder="入力必須" required>

placeholerで表示されるテキストの色や大きさはCSSプロパティの -webkit-input-placeholder-moz-input-placeholder で行います。今のところplaceholderのカスタマイズに対応しているのはwebkit(safari), chromium系列(Google Chrome, Ironなど)ブラウザとFirefoxのみです。

#xxx::-webkit-input-placeholder {
  color: rgb(150,150,150);
  font-size: 1.2em;
}

#xxx::-moz-input-placeholder {
  color: rgb(150,150,150);
  font-size: 1.2em;
}

まとめ

「この項目は必ず記入してください」と明記しても無視されてしまうことがありますので、管理者側で事前の対策を取っておくと良いですね。

----- 追記 2019.3.31

認証ページの件を完全に失念しておりました。
認証ページ(コメントの確認設定)を利用している場合requiredの効力はありません。
注意点として追記致します。
コメント設定「コメントの確認の設定」

ご報告頂いた そふぃあ さん にお礼申し上げます。

 7

There are no comments yet.
そふぃあ
ありがとうございます!

Yahoo!ブログは管理者が自動的にリンクされる仕様だったので、Yahoo!ブログ時代からのお友達の中に無記名のままコメントしてくれる人がいて困っていました。(;^ω^)
簡単に設定できたので、とても助かりました。いつも貴重な情報をありがとうございます。

私は名前とリンクの両方に要素を加えてみましたが、中にリンク無しで投稿してくれるお友達がいて「???」でした。
気が付けば私のミスでしたが、コメントを投稿する際に確認画面を「表示しない」に設定しておかないと、確認画面で消されてしまうのですね。

2019/03/30 (Sat) 10:34
vanillaice (Akira)
Akira
To そふぃあさん

お返事遅くなりました (*_ _)

ホントですね。あぅ ( ̄∀ ̄;)
これはそふぃあさんのミスではありません。私自身が認証ページを使っていないので完全に失念しておりました。すみません ( ̄∀ ̄;)
記事の方にも追記しておきますね。ありがとうございます。助かりました ^^;

2019/03/31 (Sun) 17:10
そふぃあ
お返事ありがとうございます

おはようございます。
追記作業、お疲れ様でした。

私、大変そそっかしいので、コメントしておきながら書いた事に確証が持てなくて心配しておりました。(;^ω^)
今朝、再び同一人物のブログ友さんからコメントいただきまして、またURL記入スルーされておりました。
ブログ友承認済みのお友達には、認証画面でスルーする以外にも掻い潜れるというFC2の仕様かも知れませんね。

2019/04/01 (Mon) 09:17
vanillaice (Akira)
Akira
To そふぃあさん

こんにちは ('0')/

これね、相手方の環境にも依存するんですよね。OSやブラウザのアップデート・アップグレードを全然やってない、という方もいらっしゃるでしょうし。
あとは「入力しなければボタンを押せないようにする」という方法もあります。こちらはJS実装です。
また記事にしてみようかとは思いますが、あまりおすすめできる方法ではない ^^;
それからFC2は「ブロとも」と「足跡(訪問履歴)」の関連性がクッキー情報やログイン情報に影響するんですよ。ここどうにかならんのか、と思ってるんですけどねぇ (´・ェ・`)

名前書いてくれないと困りますよね (´・ω・`)
あとリンクも、訪問してほしいならお願いだから書いて?って思います(笑)

2019/04/01 (Mon) 14:52
そふぃあ
To Akiraさん

こんにちは!
何度もお返事ありがとうございます。

> FC2は「ブロとも」と「足跡(訪問履歴)」の関連性がクッキー情報やログイン情報に影響するんですよ。
そうなんですね!ちょっとビックリです。

URL問題は必要があればリンクや足跡をたどるとして、設定したアラートのお陰で、問題だった「名無し対策」は大丈夫そうです。
いつもありがとうございます。(これ以上のお返事は不要ですよ。お忙しいのに何度も失礼しました。)

2019/04/01 (Mon) 16:43
★藤堂(Newsider Tokyo)
助かります。

大変勉強になる、ありがたいブログです。
早速導入。ウチはコメント数が多いので、HN入力の是非は議論化してました。
今後も勉強させてください。

2019/10/20 (Sun) 11:29
vanillaice (Akira)
Akira
To ★藤堂(Newsider Tokyo)さん

こんばんは。

匿名が良いという方も少なくはないですね。
でももうwebであっても何か発言するならばそれなりの責任は背負った方が(背負わせた方が)良いと思うんです (∵`)
といってもどのみちハンドルネームですからアレでソレだけど ^^;

-----
あと、★藤堂さんのテンプレートはhtml5ではありませんので本来はrequiredの使用に準拠していません。一応ブラウザが上手くやってくれてますが、本来はNGです、という点を念の為お伝えしておきますね。

2019/10/20 (Sun) 17:18

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ