並びに決まりがあるよ
こんな感じ
こういうのを作るとして
<input
required
type="text"
autocomplete="name"
maxlength="20"
minlength="10"
name="samplename"
class="sampleclass"
id="sampleid"
readonly
placeholder="sampleplaceholder"
>こうなる。
[text* samplename autocomplete:name minlength:10 maxlength:20 class:sampleclass id:sampleid readonly placeholder "sampleplaceholder"]CF7にreadonlyを設定する項目はないけど大丈夫。
メールタグの中に「readonly」を手打ちすればいいという話。
基本的に設定できないものはない、という認識で大丈夫。
→初期値はplaceholderとニコイチなので、どっちにするか選ぶことになる。
注意点
ちゃんと書き込んだのにメールタグがそのまま出力されていたら「書き方が誤ってる」だけ。
「readonlyは使えない」というわけじゃない。
大体の項目に順番は無いのだけど、placeholderまたはvalueは最後に書く決まりがある。
だからその手前にreadonlyを仕込む。
そうしないと、メールタグが崩壊する。
手打ちの範疇だから、最後に追記しちゃう可能性がある。
気をつけましょう。
隠しフィールド(input:hidden)の作り方
こう。
[hidden samplehidden]required、readonlyは仕込めないことを確認。
適用の是非は入力して出力して、タグに反映されているかどうかで判断する。
ダメなものはタグに反映されないか、メールタグのまま出力される。
公式が書いてくれてるのでそっちを読むのもいいですね。

隠し入力項目
隠し入力項目とは、他の入力項目と同様にフォーム送信時に値が送信されますが、項目それ自体はフロントエンド側に表示…
活用シーン
普通のフォームとして扱う分にはreadonlyもhiddenも使わない。
テクいことをしたいとか、機能を追加したい時くらい。
- CSRFを自作するのにhiddenを使う
- yubinbango.jsを仕込むから都道府県・市区町村をreadonlyにする
- クイズとか質問の計測用にhiddenを使う
- 入力内容を整形してフォームに反映させるためにhiddenを使う
とか。

コメント