Function Follows Form

by Jos Claerbout
Web Engineer, WebTV Networks, Inc.
July 9, 1999

In my time at WebTV, I have frequently been asked to figure out why the HTML forms on a certain site weren't working properly on a WebTV browser. Initially, I approached these tasks with dread, knowing that some developers manage to tie a two-field form to a 19,000 line SQL backend and that troubleshooting such a program would be impossible. Fortunately, after troubleshooting a few sites, I discovered the problem was always in the code on the page, and thus, easy to fix.

If you're using a form on your site and WebTV users are reporting problems, there are two likely culprits. The first possibility is a JavaScript conflict. If you're using complicated JavaScript to validate your form before sending it along to the server, you may want to check out our JavaScript Guide, which may help you get to the root of the problem.

If you know JavaScript is not the problem, however, the next step is to really analyze the HTML you're using to build the form. For every intractable forms problem I've seen, there was some unwelcome gremlin lurking in the HTML. The WebTV browser tends to be stricter than either NN or IE when parsing forms, so mistakes that slide by other browsers can still get you into trouble on a WebTV-based system.

Know Thy Attributes

Some solutions are so obvious they just leave you shaking your head. One site was complaining that WebTV users were unable to write more than a few sentences in their form textareas before being cut off. As I experimented, I found that data entry in the textarea was always limited to the exact same number of characters. A peek at the HTML revealed why - the author had included an attribute to the textarea called "maxlength". "Maxlength" was a spurious attribute, ignored by IE and NN, but implemented (at the time) by the WebTV browser. The moral of the story is to know what your HTML is supposed to do, and don't be surprised when it does just that.

Write Proper Code

A more insidious case surfaced when WebTV browsers were choking on a form on an auction site. A moment looking at the code, though, revealed that many of the input elements on the form shared the same name attribute. IE and NN let this pass by, but the WebTV browser had difficulty parsing such bizarre HTML, and blocked submission. Giving each form element a unique name fixed the problem. 

Although it may not have diagnosed this problem, sending your code through an HTML validator, such as Dr. Watson, is never a bad idea. Validators will remind you the importance of quoting your attributes, a practice which has fixed many a fumbling form. 

Spring Cleaning

Speaking of validators, they're an excellent way to catch another common problem with forms - unreadable garbage added by some WYSIWYG editors. When looking at the code of a HTML form that wouldn't work on the WebTV browser, I found this:

<form method="POST" <!--webbot bot="SaveResults" startspan u-file="_formdata/subscriber.txt" s-format="TEXT/TSV" s-label-fields="TRUE" b-reverse-chronology="FALSE" s-email-format="TEXT/PRE" s-email-address="" b-email-label-fields="FALSE" b-email-replyto-from-field="TRUE" s-email-replyto="Reply to" b-email-subject-from-field="FALSE" s-email-subject="HCTR Subscription" s-builtin-fields="Date Time REMOTE_NAME REMOTE_USER HTTP_USER_AGENT" action="_vti_bin/shtml.exe/subscribe.htm" onsubmit="return FrontPage_Form2_Validator(this)" name="FrontPage_Form2" webbot-action="--WEBBOT-SELF--">

Yeah, I didn't quite know what to do with it either. An HTML validator rightly complained of an "unexpected < in <form method=POST", and if you read on, you'll find the "action" attribute buried in the midst of that endless tag-within-a-tag comment. It also appears that a closing bracket has fallen off into the ether. After removing all of the markup before action (bolded here for readability), the site worked like a charm.

The good news is that there aren't any tips or strange workarounds necessary for making your forms work well with the WebTV browser. Write proper code and your forms will function flawlessly.