Emmet for forms - drive too fast 🚀
Tags: html, css, productivity, webdev
Published: 2022-01-19 08:41:59

Well hello there👋🏻👋🏻, Emmet syntax's produce 2X coding speed. Often usage of forms in websites for <b>login, signup, surveys and the like</b>. 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](#chapter-1)
* [Generate email💌 field](#chapter-2)
* [Generate password field](#chapter-3)
* [Generate Search🔎 field](#chapter-4)
* [Generate URL🔗 field](#chapter-5)
* [Generate Number🔢 field](#chapter-6)
* [Color picker🌈](#chapter-7)
* [File uploader📁](#chapter-8)
* [Login form Generation➡️](#chapter-9)

### Generate Text box<a name="chapter-1"></a>
Just type <code>input</code> and hit <code>enter</code> or <code>Tab</code> which auto generate,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta7b0y21ml76vtp1hgte.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3z3fzld5et5yu2muoco.png)
### Generate email💌 field<a name="chapter-2"></a>
Type <code>input:email</code> and hit <code>enter</code> or <code>Tab</code> which auto generate like below,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z96skhki0upw729sy5xr.png)

### Generate password field<a name="chapter-3"></a>
Type <code>input:password</code> or <code>input:p</code> and hit <code>enter</code> or <code>Tab</code> which auto generate like below👇🏻,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80n0fg2i5tcuanc6l9x1.png)

### Generate Search🔎 field<a name="chapter-4"></a>
Type <code>input:search</code> and hit <code>enter</code> or <code>Tab</code> which auto generate like below,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg877mhttb6ycvph0tjn.png)

### Generate URL🔗 field<a name="chapter-5"></a>
Type <code>input:url</code> and hit <code>enter</code> or <code>Tab</code> which auto generate like below,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7ctgbun20dmd7rnsk88.png)

### Generate Number🔢 field<a name="chapter-6"></a>
Type <code>input:number</code> and hit <code>enter</code> or <code>Tab</code> which auto generate like below,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/005ekhe40ueg71gt8r09.png)

### Color picker🌈<a name="chapter-7"></a>
Type <code>input:color</code> and hit <code>enter</code> or <code>Tab</code>. See the magic👇🏻,


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhea57ckqe3gdg7yljft.png)

### File uploader📁<a name="chapter-8"></a>
Type <code>input:file</code> or <code>input:f</code> and hit <code>enter</code> or <code>Tab</code>. See the magic,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjdj8i0fov2aeeq65lnv.png)

> <b><em>In simple words, You just remember like <code>input:text_field_type</code>. Make sense right😉</em></b>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwnnkbr5d2uk9090zr7s.gif)
 
### Login form Generation➡️<a name="chapter-9"></a>
Hope you grasped the idea behind the text field generation. Start to generate login form which completely Derived from learned concepts. 

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

```html
<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>
```
> <b>Note: </b><em>use <code>[]</code> for custom attributes like <code>[name="username"]</code>. If more than one custom attribute give <b>space</b> between two attribute within bracket like <code>[placeholder="enter name.." name="username"]</code></em>

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gp0dtdylsczvmsq3rijk.png)

<b>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.</b>

><em>Hope we will meet on upcoming series😊 and If you not experiment with <b><a href="https://dev.to/preethi_dev/understanding-of-css-bem-26gg">CSS BEM Naming Convention</a></b>, Start to explore now.</em>

Thanks for Reading!!
<a href="https://dev.to/preethi_dev"><b>Preethi</b></a>
<em>- Make your CSS life easier</em>