Emmetメモ：フォームパーツを一括量産

Emmet記法

form#form1>ul.radioList>li*5>label[for=r-$]>input[type=radio name=r id=r-$]+{内容$}

HTML展開結果

<form id="form1" action="">
 <ul class="radioList">
 <li><label for="r-1"><input name="r" id="r-1" type="radio"/>内容1</label></li>
 <li><label for="r-2"><input name="r" id="r-2" type="radio"/>内容2</label></li>
 <li><label for="r-3"><input name="r" id="r-3" type="radio"/>内容3</label></li>
 <li><label for="r-4"><input name="r" id="r-4" type="radio"/>内容4</label></li>
 <li><label for="r-5"><input name="r" id="r-5" type="radio"/>内容5</label></li>
 </ul>
</form>

解説

label[for=r-$]

「[]」で囲んだ内容はタグの属性値としてそのまま反映されます。
「$」は連番を出力します。「$@3」のように書くと、3から開始します。

input[type=radio name=r id=r-$]+{内容$}

「+」で同じ階層の兄弟要素として出力します。
「{}」で囲むとタグでなくテキストとして出力されます。
※{}を付けないと<内容1>なんてタグとして出力されます。

応用

チェックボックスなら下記のようになります。radioと違ってnameは全部別になりますね。

form#form2>ul.checkList>li*5>label[for=c-$]>input[type=checkbox name=c-$ id=c-$]+{内容$}