Listing the Forms and Fields on a page in Internet Explorer or Maxthon

This post is an introduction to what I’ve been researching in my spare time over the last few weeks. It will be the first in a series of posts about form submission. It will lead you basically along the path that I took in discovering this information, and will hopefully allow you to skip over some of the trouble spots along the way. I’ll note each of the trouble spots in the comments in the doc (for instance in this one I include a note about the value of a button also being submitted with the form).

This HTML file builds on top of the work that I did on with the Copy as Text Link tool referenced elsewhere on this site. However, this routine processes the currently active webpage/frame and generates a report of the Forms and fields on that page. For each form it shows its name, action and then list the inputs on that form. For each input, it shows its name and value. From this information, you can see what is being tracked between pages on a website. You could also use this information to debug an entry form you are creating. It could also be used to generate the form submission information that will be generated by a certain action so that it can be repeated programmatically in the future.

This routine will only work in IE right now and older releases of Maxthon. It could easily be transposed to other browsers and tools. The process should be relatively easy to follow thanks to Microsoft’s Document Object Module (DOM) technology. DOM allows HTML code to be accessed as if it were Object Oriented. In other words, this routine doesn’t work with the HTML source code. Instead it asks IE for specific parts of the webpage one at a time. This allows each of the various parts/divisions of any web page to have its own particular properties and methods. This routine asks asks the document object for the list of forms it contains. It then asks each form for a list of fields. It displays each in its turn.

To install this file in IE, right click on the following link and choose Save Target As. Then in the destination window type %WINDIR%\web\formlist.htm and press enter.

RIGHT CLICK THIS LINK

%windir% is an environment variable that represents your Windows directory. So you can put C:\Windows\Web\formlist.htm if you know you have a c:\Windows directory.

Then choose Start->Run and put in this text and then press enter:

reg ADD "HKCU\\Software\\Microsoft\\Internet Explorer\\MenuExt\\F&orms and Fields" /ve /t REG_SZ /d "%WINDIR%\\web\\formlist.htm" /f

That will update your registry to point to the file. If you have problems, use this batch file instead. It contains the same command but will not be corrupted by windows.

Then close all instances of IE.

Now browse to a web page that has a form, most of them do now-a-days.

Right click anywhere on the text of the form and choose Form and Fields from the menu.

You’ll now be able to see all sorts of information about the page you were on and the fields and hidden fields it contains.

BTW, this routine uses a pop up window. Popup blockers like the Google Toolbar will try to block this form. So, you just might have to hold down the CTRL key as you choose Form and Fields to allow this to work.

Also, FYI it works in Maxthon through at least version 1.5.2 build 21. I think build 23 reworks the context menu stuff, but don’t quote me on that.

Enjoy!

Sample output from FoxNews.com

(Source code follows)
NOTE: There is now a reference to the final location of this file in the source code. If you install this as something other than c:\windows\web\formlist.htm you must now update the source code.

[javascript]

[/javascript]