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の効力はありません。
注意点として追記致します。
コメント設定「コメントの確認の設定」
ご報告頂いた そふぃあ さん にお礼申し上げます。
There are no comments yet.