How to add attributes to HTML tags when I use Emmet?

Question

I use Sublime Text and Emmet plug-in. Various tags do not include all the attributes automatically when I use Emmet, so I have to put them manually. For example the input tags have only "type" attribute when I enter "input" and press "Tab".

<input type="text">

but I want this for example

<input type="text" name="" id="">

How can I edit whichever attributes I want to see in a tag? I tried to find a solution on YouTube and through Google search but was not successful.

Answer 1

The Emmet syntax is modelled after CSS selectors, so in order to add attributes (or properties), you need pass them in square brackets.

Example

Input:

input#first_name[type=text][name=first_name]

Output:

<input type="text" id="first_name" name="first_name">

As for your example, you would need to type this:

input[type=text][name]#

This breaks down as follows:

1. input - name of the tag
2. type attribute with the value of text
3. name attribute without value
4. empty id attribute

Edit:

The type attribute stands for :, so you could write this as:

input:text[name]#