Emmet for forms - drive too fast 🚀

#html #css #productivity #webdev

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 Text box

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

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

Generate email💌 field

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

Generate password field

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

Generate Search🔎 field

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

Generate URL🔗 field

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

Generate Number🔢 field

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

Color picker🌈

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

File uploader📁

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

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

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>

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💖.

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.