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!

Advertisements

From → Programming, The Web

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: