title: How can I design an object to represent all HTML form elements?
body: <p><strong>Disclaimer:</strong> This is a personal project that I'm doing for fun. I'm not looking to use existing libraries since it would take some of the joy out of <a href="http://www.codinghorror.com/blog/2009/02/dont-reinvent-the-wheel-unless-you-plan-on-learning-more-about-wheels.html" rel="nofollow noreferrer">learning more about wheels</a>.</p>
  
  <p>That being said, I'm working on a web spider and I've come to the problem of how to represent HTML form elements with a single object.</p>
  
  <p>What I want to do is have an "HTML Document" object, which contains an array of all form elements as one of its properties. The problem is that I can't figure out a way to represent <code>&lt;input /&gt;</code> tags, as well as <code>&lt;select /&gt;</code> tags, since select tags can have multiple child <code>&lt;option /&gt;</code> tags.</p>
  
  <p>Is there any good way to represent both <code>&lt;input /&gt;</code> tags, which store basically only name/value pairs, and <code>&lt;select /&gt;</code> tags which have an array of name/value pairs in the same class?</p>
  
  <p>The best idea I've come up with so far is to treat the <code>&lt;option /&gt;</code> tags of a <code>&lt;select /&gt;</code> tag as individual form fields, similar to how I would represent <code>&lt;input type="radio" /&gt;</code> or <code>&lt;input type="checkbox" /&gt;</code>. </p>
  
  <p>So I would have this:</p>
  
  <pre><code>class FormField {
      public string Name { get; set; }
      public string Value { get; set; }
      public string Type { get; set; }
  }
  </code></pre>
  
  <p>And then a collection class for iterating would:</p>
  
  <ul>
  <li>The collection class would be an "array of arrays". The outer array would have a single inner array for each name in the HTML document.</li>
  <li>Its indexer could get fields by Name. This index would return an array of <code>FormField</code> objects.</li>
  <li>When enumerating over the entire document's form fields, each iteration would have an array of <code>FormField</code> objects, since it would be an array of arrays.</li>
  </ul>
  
  <p>Is this the best solution, or is there a simpler way to represent this?</p>