Skip to content

How not to do HTML forms?

Wed 27th June 2012

I had to post this, as to me it looks utterly bonkers. I imagine it is some horrid web framework underneath, which generates this nonsense. I won’t name the system, though I’m sure someone can figure it out.

This is a login form. Here is the HTML:

<form name="userid" onSubmit="xferFocus(this); return false;">
 <tr>
  <td align="right" width="40%"><span class="text10"><b><label for="user" accesskey="u">User Name</label>:</b></span></td>
  <td align="left" width="60%">
   <span class="text10">
    <script language="JavaScript1.2">
                      document.writeln("<input class=\"textform\" type=\"text\" id=\"user\" name=\"user\" size=\"" + size + "\" tabindex=1 onFocus=\"hadFocus(true)\">");
    </script>
   </span>
  </td>
 </tr>
</form>
<form name="cplogin" action="https://www.example.com/cp/home/login" onSubmit="login(); return false;" method="post">
 <tr>
  <td align="right"><span class="text10"><b><label for="pass" accesskey="p">Password</label>:</b></span></td>
  <td align="left">
   <span class="text10">
    <script language="JavaScript1.2">
                      document.writeln("<input class=\"textform\" type=\"password\" id=\"pass\" name=\"pass\" size=\"" + size + "\" tabindex=2 onFocus=\"hadFocus(true);\">");
    </script>
    <input type="hidden" name="user" value="">
   </span>
  </td>
 </tr>
</form>
<tr>
 <td align="center" colspan="2" class="btn">
  <input type="button" class="btn" accesskey="l" name="login_btn" value="&nbsp;&nbsp;Login&nbsp;&nbsp;" onClick="login();" tabindex="3"/>
  <input type="button" class="btn" accesskey="c" name="cancel_btn" value="Cancel" onClick="doCancel();" tabindex="4"/>
 </td>
</tr>

And here is the relevant JavaScript:

function login()
{
    deleteCookie();
    setQueryAsCookie();
    document.cplogin.user.value=document.userid.user.value;
    document.cplogin.submit();
}

What is going on here? Well, the login is made up of two fields (username and password) and each of those fields is in a separate <form>! Then when the user submits (either the password form or clicking the Login button) the login() JavaScript function is called. This copies the username value from the username form, into the password form, then submits password form.

I really do not understand why there isn’t just one form!

From → Programming, The Web

Leave a Comment

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.