DEV Community

Cover image for Emmet for forms - drive too fast 🚀
Preethi⚡
Preethi⚡

Posted on

Emmet for forms - drive too fast 🚀

Well hello there👋🏻👋🏻, Emmet syntax's produce 2X coding speed. Often usage of forms in websites for login, signup, surveys and the like. So, Try to adapt for maximum possible form fields by Emmet short syntax.

I will make it as series since care about keep you away from overwhelmed and make a way to slurred your brain. Let's get this ride on the road🎉.

Generate Common text fields

Generate Text box

Just type input and hit enter or Tab which auto generate,

Image description

Type inp or input:text or input:t and hit enter or Tab which auto generate like below,

Image description

Generate email💌 field

Type input:email and hit enter or Tab which auto generate like below,

Image description

Generate password field

Type input:password or input:p and hit enter or Tab which auto generate like below👇🏻,

Image description

Generate Search🔎 field

Type input:search and hit enter or Tab which auto generate like below,

Image description

Generate URL🔗 field

Type input:url and hit enter or Tab which auto generate like below,

Image description

Generate Number🔢 field

Type input:number and hit enter or Tab which auto generate like below,

Image description

Color picker🌈

Type input:color and hit enter or Tab. See the magic👇🏻,

Image description

File uploader📁

Type input:file or input:f and hit enter or Tab. See the magic,

Image description

In simple words, You just remember like input:text_field_type. Make sense right😉
Image description

Login form Generation➡️

Hope you grasped the idea behind the text field generation. Start to generate login form which completely Derived from learned concepts.

Recommended to generate login form(like below) on your own pace by Emmet syntax. If can't generate similarly, completely fine😉 which means expect more practice on Emmet syntax.



<form action="" class="login">
    <input type="text" placeholder="enter name.." name="username">
    <input type="text" placeholder="enter password" name="password">
    <input type="submit" value="submit">
</form>


Enter fullscreen mode Exit fullscreen mode

Note: use [] for custom attributes like [name="username"]. If more than one custom attribute give space between two attribute within bracket like [placeholder="enter name.." name="username"]

Below Emmet syntax generate login form in a seconds⏱️. Seems interesting right💖.

Image description

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

Hope we will meet on upcoming series😊 and If you not experiment with CSS BEM Naming Convention, Start to explore now.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Top comments (2)

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

OMG, you have great knowledge about emmet. I haven't know that we can also create forms with emmet

Collapse
 
preethi_dev profile image
Preethi⚡

Great pleasure while seeing your feedback✨