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
- Generate email💌 field
- Generate password field
- Generate Search🔎 field
- Generate URL🔗 field
- Generate Number🔢 field
- Color picker🌈
- File uploader📁
- Login form Generation➡️
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.
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)
OMG, you have great knowledge about emmet. I haven't know that we can also create forms with emmet
Great pleasure while seeing your feedback✨