iMacros Tags & HTML Demo Page

This page shows the relationship between html code and the iMacros' TAG command.

In the first line you see the live html code, in the second line the source code of this html element and the third line shows the resulting TAG command. You can create this command yourself by recording a click on the HTML element (first line). As you see TYPE refers the type of the HTML element while ATTR describes one or more specific attributes of the element. You can use * to tell iMacros to ignore either TYPE or ATTR.

The structure of each example is:
1. Embedded HTML for testing
2. HTML element source
3. Possible TAG commands to define this element. The best possible choice depends on your intended application (e. g. do you want to click this element, verify certain attributes or extract its data). For more details please see the Tags & HTML wiki page.

Typical Website Link

<a href="http://www.iopus.com">Typical Website Link</a>

TAG POS=1 TYPE=A ATTR=HREF:http://www.iopus.com/

Nice Link with ID and Name

<A id=myLinkID href="../success/index.htm" name=myLinkName>Nice Link...</A>

TAG POS=1 TYPE=A ATTR=ID:myLinkID (Default, this is generated during recording)
TAG POS=1 TYPE=A ATTR=NAME:myLinkName (this is another possible attribute that will work)

Bold Text

<strong>Bold Text</strong>

TAG POS=1 TYPE=STRONG ATTR=TXT:Bold<SP>Text

iMacros User Forum

<a href="http://forum.iopus.com"><strong> iMacros User Forum</strong></a>

TAG POS=1 TYPE=STRONG ATTR=TXT:<SP>iMacros<SP>User<SP>Forum

Actimel

<font size="2" color="red" face="Verdana,Arial">Actimel</font>

TAG POS=1 TYPE=FONT ATTR=TXT:Actimel (Default, created automatically during recording)
TAG POS=1 TYPE=FONT ATTR=FACE:Verdana,Arial EXTRACT=TXT (Useful for extracting the word "Actimel")
TAG POS=1 TYPE=FONT ATTR=SIZE:2 EXTRACT=TXT (Useful for extracting the word "Actimel")
TAG POS=1 TYPE=FONT ATTR=SIZE:2&&FACE:Verdana,Arial EXTRACT=TXT (Useful if one attribute alone does not define the element uniquely)

Actimel 2

<font size=" 2" color=" red " face="Verdana ,Arial ">Actimel 2</font> Note that it is "Actimel + SPACE+2"

TAG POS=1 TYPE=FONT ATTR=TXT:Actimel<SP>2 (Default, created automatically during recording)
TAG POS=2 TYPE=FONT ATTR=FACE:Verdana,Arial EXTRACT=TXT (POS=2, because it is the second occurance of this attribute on the page)
TAG POS=2 TYPE=FONT ATTR=SIZE:2 EXTRACT=TXT

<table width="200" border="1">
<tr>
<td>1</td>
<td valign="top" bgcolor="#33CC00" width="160" height="18">2 some attributes</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

TAG POS=1 TYPE=TD ATTR=BGCOLOR:#33cc00 EXTRACT=TXT
TAG POS=1 TYPE=TD ATTR=HEIGHT:18 EXTRACT=TXT
TAG POS=1 TYPE=TD ATTR=VALIGN:top EXTRACT=TXT

<div align="left">div test</div>

TAG POS=1 TYPE=DIV ATTR=ALIGN:left EXTRACT=TXT

my class

<span class="my class">iMacros</span>

TAG POS=1 TYPE=SPAN ATTR=CLASS:my<SP>class EXTRACT=TXT

Henk Mobile: 0651153233

<firstname>Henk</firstname> <phonetype>Mobile</phonetype>: <number>0651153233</number>

These are actually XML commands inside a HTML page.

TAG POS=1 TYPE=FIRSTNAME ATTR=* EXTRACT=TXT
TAG POS=1 TYPE=PHONETYPE ATTR=* EXTRACT=TXT
TAG POS=1 TYPE=NUMBER ATTR=* EXTRACT=TXT

<form name="F1" method="post" action="sample.aspx">
<input type="text" name="tf1">
<input name="cb1" type="checkbox" id="cb1" value="myvalue">
<input name="rb1" type="radio" value="myradio1" id="r1" >
</form>

TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:F1 ATTR=NAME:TF1 CONTENT=Hello<SP>World / EXTRACT=TXT
TAG POS=1 TYPE=INPUT:CHECKBOX FORM=NAME:F1 ATTR=NAME:CB1&&ID:CB1 CONTENT=YES (Note: Using both, ID and NAME is only done for demonstration purposes. In this case one attribute would be sufficient.)
TAG POS=1 TYPE=INPUT:RADIO FORM=NAME:F1 ATTR=ID:R1 CONTENT=YES

Is there a specific example that you would like to see here? Please let us know.