Form Shortcut Menggunakan Emmet

Form adalah salah komponen html yang cukup sering digunakan. Dengan bantuan shortcut emmet, kita bisa membuat form dengan lebih cepat.

Berikut beberapa contoh shortcut yang umum digunakan.

<!-- form:get -->
<form action="" method="get"></form>

<!-- form:post -->
<form action="" method="post"></form>

<!-- label -->
<label for=""></label>

<!-- input:hidden -->
<input type="hidden" name="">

<!-- input:text -->
<input type="text" name="" id="">

<!-- input:email -->
<input type="email" name="" id="">

<!-- input:checkbox  -->
<input type="checkbox" name="" id="" />

<!-- input:radio  -->
<input type="radio" name="" id="" />

<!-- select -->
<select name="" id=""></select>

<!-- select:disabled -->
<select name="" id="" disabled="disabled"></select>

<!-- option -->
<option value=""></option>

<!-- textarea -->
<textarea name="" id="" cols="30" rows="10"></textarea>

<!-- input:submit -->
<input type="submit" value="" />

<!-- input:reset -->
<input type="reset" value="" />

Dengan shortcut diatas, kita bisa membuat form lengkap dalam 1 baris perintah saja. Contoh:

<!-- 
form:post[action=post.php]>label[for=usrid]{User Name}+input:text#usrid[name=usrid]+label[for=emailaddr]{Email}+input:email#emailaddr[name=emailaddr]+input:submit[value=Submit]+input:reset[value=Reset]
-->
<form action="post.php" method="post">
    <label for="usrid">User Name</label>
    <input type="text" name="usrid" id="usrid">
    <label for="emailaddr">Email</label>
    <input type="email" name="emailaddr" id="emailaddr">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

Kesimpulan

Dengan menguasai Emmet shortcut, web design akan sangat cepat. Sangat cocok bagi para web designer dan theme developer.

Dengan berakhirnya modul ini, maka tutorial Menggunakan Emmet untuk Web Development sudah selesai. Semoga bermanfaat.