CODEWITHSUNDEEP
html
Arturo
Arturo

Reputation: 3779

How do I create a macro or snippet for a repetitive HTML tag?

I'm writing some HTML code and I'm having trouble on trying to "summarize" if that's the right words multiple lines of code. Basically I have a select tag that I want to put many times in the HTML code but I don't want to re-writ eover and over again. What is the name for this action? Is it a macro? A snippet? An HTML function?

Basically:

<select>
<option value="default">-Select an Attribute-</option>
<option value="animal">animal</option>
<option value="person">person/human</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="open">open space</option>
<option value="closed">closed space </option>
<option value="natural">natural</option>
<option value="artificial">artificial</option>
<option value="explicit">explicit</option>
<option value="sexual">sexual</option>
<option value="innocent">innocent</option>
<option value="fearful">fearful</option>
<option value="religious">religious</option>
</select>

Can I define a shortcut or a macro everytime I want to use that select tag code snippet? What's this process called in the HTML lingo, so I can have it in mind for future references?

Can't I do something like:

<select id="snippet">
</select>

that saves me the lines of code after doing a first definition?

Upvotes: 1

Views: 868

Answers (2)

user764357
user764357

Reputation:

Thats not possible in plain HTML. You'd either need Javascript to do it client side, or a server-side script that did this for you using PHP, Python, Perl, etc...

As an example of how to do this client-side using Javascript check out this code: (See it in action at this JSFiddle: http://jsfiddle.net/TZ2gV/)

options = {
    'default':'Select an Attribute',
    'animal':'animal',
    'person':'person/human'
};
$.each(options, function(key, value) {
    $('#mySelect')
    .append($("<option></option>")
            .attr("value",key)
            .text(value)); 
});

With this HTML:

<form>
    Select: <select id="mySelect">
    </select>
</form>

Alternatively with this server-side PHP code you get the same result (You can see it in action here: http://codepad.org/O5zZ65tZ)

<form>
    Select: <select id="mySelect">
        <?php
            $options = array(
                   'default'=>'Select an Attribute',
                   'animal'=>'animal',
                   'person'=>'person/human'
            );
            foreach ($options as $key => $value) {
                echo "<option value='".$key."'>".$value."</option>\n";
            }
        ?>
    </select>
</form>

But in both cases you aren't saving your self many keystrokes over just making the HTML yourself. You'd be best to ask a new question explaining your actual scenario and what you are trying to do.

Upvotes: 2

sasbury
sasbury

Reputation: 301

As Lego says, you can't do this in pure HTML. If you use JavaScript there are a few template libraries that could help. A couple I would suggest are:

This post may help How to use underscore.js as a template engine?

Upvotes: 1

Related Questions