Form Explanation:
What's different?

Item HTML

Each form should contain a note at the top of each page after the description <p> tag. The note will contain the asterisk key.

 <div class="note"><strong>Note: </strong>(<img src="../images/icon-formfield-required.gif" alt="Required Field" width="7" height="8" hspace="0" vspace="0" border="0">) = <em>Required </em>and   (<img src="../images/icon-formfield-error.gif" alt="Required Field" width="7" height="8" hspace="0" vspace="0" border="0">) = <em> Something Went Wrong</em>. </div>

Each table will require a <fieldset> and <legend tag>

<fieldset> lets you bind a group of form controls together visually. In theory, screen readers should also be able to identify this fact, but for the moment, support for fieldset is very limited. <legend> is simply a tag that you use alongside (or rather inside) the <fieldset> tag - to give the group of form controls a heading.

<fieldset>
<legend>Edit User Name & Password</legend> …(the entire table)… </fieldset>

Each table will have a class

 <table class="form">

The first TD tag in each table should will have a class

 <td class="fixedwidth">

Labels:
  • Non Required
 <label for="description">Description:</label>
  • Required

<label for="firstname" class="required">First Name</label>

Input fields

<input type="text" name="firstname" id="firstname" value="bngtest7" size="20">

All Submit buttons will now be removed from the table and are now placed inside a <DIV> tag. The action button should now be placed first.

<div class="button-container">
<input class="button-submit" type="submit" name="Submit" value="Update Now">          
<input class="button-cancel" name="mod_Q_Q_cancel" value="Cancel and Go Back" type="submit"></div>

Forms with Steps should have the <h2> outside of the table tag

 <h2 class="step">Step 1: Enter User Name</h2>

Form guidelines (used within the same td and not be placed in another row)

  • Only 1 Guideline
 <td >
<input name="lname" type="text" size="10"><ul class="form-guidelines">
<br><li >5 characters</li>
</ul></td>
  • List of Guidelines
 <td ><input name="hphone" value="312-416-03kj00040" type="text" class="form-value-error"><br>
<ul class="form-guidelines-list">
<li class="error"> ex) xxx-xxx-xxxx</li>
<li>Not more than 14 character</li>
<li class="error">5 characters</li>
</ul> </td>

Errors will have the following items:

  • Message atop of each page
<div class="message message-error">
<p><strong>Something Went Wrong.</strong></p>
<p>Please correct the below field marked in red. We either had trouble understanding those fields, or need more information.</p>
</div>
  • Label class will change to "error"
<td ><label for="lname" class="error">Last Name:</label></td>
  • Label class for a non-requried field will change to "error-nonrequired"
<label for="zip" class="error-nonrequired">User Name:</label></td>
  • Inputs class will change to "form-value-error"
 <td >
<input name="lname" class="form-value-error" type="text"> </td>
  • Drop Downs

<label for="favcity">Which is your favorite city?</label>
<select id="favcity" name="favcity" class="form-value-error">
<option value="1">Amsterdam</option>
<option value="3">Interlaken</option>
<option value="4">Moscow</option>
</select>
  • Text Areas

<textarea id="message" name="textfield" cols="30" rows="10" class="form-value-error">Message</textarea>
  • Radio buttons

<input class="form-value-error" id="mail_html" name="email_format" value="html" type="radio">
<label for="mail_html">Enabler</label>
<br>
<input class="form-value-error" id="mail_text" name="email_format" value="text" checked="checked" type="radio">
<label for="mail_text">Distable</label>
  • Checkbox

<input id="newsletter"type="checkbox" name="accepted" value="checkbox"> <label for="blue">Blue</label><br>
  • Form Guidelines Errors
 <td ><input name="hphone" value="312-416-03kj00040" type="text" class="form-value-error"><br>
<ul class="form-guidelines-list">
<li class="error"> ex) xxx-xxx-xxxx</li>
<li>Not more than 14 character</li>
<li class="error">5 characters</li>
</ul>
</td>
  • w/ 1 guideline

<td >
<input name="hphone" value="312-416-03kj00040" type="text" class="form-value-error"><br>
<ul class="form-guidelines">
<li class="error"> ex) xxx-xxx-xxxx</li>
</ul>
</td>
  • w//multiple guidelines and only 1 error
 <td ><input name="hphone" value="312-416-03kj00040" type="text" class="form-value-error"><br>
<ul class="form-guidelines-list">
<li class="error"> ex) xxx-xxx-xxxx</li>
<li>Not more than 14 character</li>
<li >5 characters</li>
</ul>
</td>
  • w//multiple guidelines and multiple errors
<td ><input name="hphone" value="312-416-03kj00040" type="text" class="form-value-error"><br>
<ul class="form-guidelines-list">
<li class="error"> ex) xxx-xxx-xxxx</li>
<li>Not more than 14 character</li>
<li class="error">5 characters</li>
</ul>
</td>
  • w//multiple guidelines and all errors
<td ><input name="hphone" value="312-416-03kj00040" type="text" class="form-value-error"><br>
<ul class="form-guidelines-list">
<li class="error"> ex) xxx-xxx-xxxx</li>
<li class="error">No more than 14 character</li>
<li class="error">5 characters</li>
</ul>
</td>
  • Other Error
    ex) user name already selected by another user

<tr>
<td ><label for="zip" class="error">User Name:</label></td>
<td ><input name="hphone" value="312-416-03kj00040" type="text" class="form-value-error">
<ul class="form-guidelines">
<li class="error">The user name you have chosen has already been chosen. Please select another username.</li>
</ul>
</td>
</tr>

 

Examples

Item HTML

Site Control Account Information

<div>
<form action="/Branch-CP/com/hostway/plugins/commons/myaccount/authInfoEdit.tile" method="post"><input name="ngtsrc" value="-1955560660" type="hidden">
       <input name="security_namespace" value="sitecontrol_hostway_us" type="hidden">
              <h1>SiteControl Account Information</h1>
              <p>Your SiteControl Account Information is  is used to login to SiteControl.Be sure to click &quot;Update Now&quot; when you're done. </p>
        <div class="note"><strong>Note: </strong>   (<img src="../images/icon-formfield-required.gif" alt="Required Field" width="7" height="8" hspace="0" vspace="0" border="0">) = <em>Required </em>and   (<img src="../images/icon-formfield-error.gif" alt="Required Field" width="7" height="8" hspace="0" vspace="0" border="0">) = <em> Something Went Wrong</em>. </div>
        </p>
              <fieldset>  
              <legend>Edit User Name & Password</legend>
              <table class="form">
                     <tbody><tr>
                       <td class="fixedwidth" >
                                   <label class="required">Username:</label></td>
                            <td ><input name="userId" type="text" value="bngtest7" size="19" maxlength="19">
                            <br><ul class="form-guidelines">
                            <li>- 4-19 characters</li>
                            <li>- All lowercase letters</li>
                            <li>- Dashes, "-", "_", ".", are allowed; </li>
                            <li>- no other special characters are allowed.</li>
                                          </ul>                    </td>        
                       </tr>
                       <tr>
                         <td ><label for="product"> Existing Password:</label></td>
<td class="form-guidelines"><input name="userId" value="bngtest7" type="text"></td>
                         </tr>
                       <tr>
                         <td ><label for="product" > New Password:</label></td>
                         <td class="form-guidelines"><input name="userId" type="text"></td>
                         </tr>
                       <tr>
                         <td ><label for="product" > Retype New Password:</label> </td>
                         <td class="form-guidelines"><input name="userId" type="text"></td>
                         </tr>
              </tbody></table>
       </fieldset></form>
</div>

<div class="button-container">...</div>  
Create Streaming Media FTP Account

<fieldset>
<legend>Create Account</legend>
<h2 class="step">Step 1: Enter User Name</h2>
   <table class="form">
     <tr>
       <td class="fixedwidth"><label class="required">Username:</label></td>
        <td ><input name="userId" type="text" value="bngtest7" size="19"><br>
                    <ul class="form-guidelines">
                      <li>4-19 characters</li>
                      <li>All lowercase letters</li>
                      <li>Dashes, "-", "_", ".", are allowed; </li>
                      <li>no other special characters are allowed.</li>
                    </ul></td>
                </tr>
            </table>
             <h2 class="step">Step   2: Enter Password   </h2>
              <table class="form">
                <tr>
                 <td class="fixedwidth" ><label class="required">Password:</label></td>
                  <td ><input name="password" value="" type="password"></td>
              </tr>
                <tr>
                 <td ><label class="required">Retype Password:</label></td>
                  <td ><input name="passwordVerify" value="" type="password"><br>

                     <ul class="form-guidelines">
                       <li>6 to 20 characters long.</li>
                       <li>Must start with a letter.</li>
                       <li>Must contain at least one digit or punctuation symbol.</li>
                       <li>e.g. Yc-vj4dfw</li>
                     </ul></td>
              </tr>
             
              <tbody>
              </tbody>
              </table></fieldset> 
<div class="button-container">...</div>  
Create Trouble Ticket: Technical

<fieldset>
   <legend>Technical Trouble Ticket</legend>
   <table class="form">
         
   <tbody><tr>
   <td class="fixedwidth">
                <label for="product" class="required">Product:</label> </td>
                       <td >
<select name="productName">
<option value="SiteBlog">SiteBlog</option>
<option value="chicken4.hwng">chicken4.hwng</option>
<option value="Cgi Scripts you installed">Cgi Scripts you installed</option>
<option value="Password and Username">Password and Username</option>
<option value="Other">Other</option></select></td>
                </tr>
   <tr>
       <td ><label for="product" >Page URL:</label>  </td>
       <td><input name="email" type="text"  size="35">
                       <br>
<ul class="form-guidelines">
                <li>e.g. mydomain.com/order.htm</li>
                          </ul>                    </td>
                        </tr>
<tr>
                       <td ><label for="product" class="required">Email Address:</label> </td>
                       <td><input name="email" type="text"  size="30">                 </td>
                </tr>
                   
<tr>                      <td >
                          <label for="ticketconfirmation" class="required">Message</label></td>
                       <td >
                          <textarea name="ticketbody" cols="40" rows="12" wrap="virtual"></textarea></td>
                </tr>                               
             </tbody></table>
             </fieldset>            
<div class="button-container">...</div>  

Personal Contact Information

<fieldset>   
      <legend>Name and Address</legend>
      <table class="form">
             <tbody><tr>
               <td class="fixedwidth" ><label class="required">First Name:</label></td>
                <td ><input name="password" type="password" value="" size="30"></td>
             </tr>
             <tr>
                <td >
                       <label for="mname">Middle Name:</label>             </td>
                <td >
                       <input name="mname" type="text" value="" size="30">   </td>
                </tr>
             <tr>
               <td ><label class="required">Last Name:</label></td>
                <td ><input name="password" type="password" value="" size="30"></td>
             </tr>
             <tr>
               <td ><label class="required">Organization:</label></td>
                <td ><input name="password" type="password" value="" size="30"></td>
             </tr>
             <tr>
               <td ><label class="required">Address Line 1:</label></td>
                 <td ><input name="password" type="password" value="" size="30"></td>
             </tr>
             <tr>
               <td ><label for="ticketconfirmation" class="required">Zip Code:</label></td>
               <td >
                <input name="lname" type="text" size="10"><br>

                       <ul class="form-guidelines">
                <li>5 charcters</li>
                          </ul>                    </td>
                </tr>
             <tr>
                <td ><label for="ticketconfirmation" class="required">Country</label></td>
                <td >
                       <select name="country" >
                           <option selected>select----</option>
                         <option value="US">United States</option>
                         <option value="CA">Canada   </option>
            
                       </select></td>
                </tr>
      </tbody></table>
   </fieldset>

<fieldset>
            <legend>Phone and Email</legend>
         
      <table class="form">
          <tbody>
            <tr>
              <td ><label class="required">Address Line 1:</label></td>
              <td ><input name="street1" type="text" value="1 N. State" size="30">              </td>
            </tr>
            <tr>
              <td class="form-label"><label for="newsletter">Recieve EasyHost newsletter.</label></td>
              <td ><input id="newsletter" name="newsletter" value="yes" type="checkbox"></td>
            </tr>
            <tr>
              <td ><label class="required">Comments:</label></td>
              <td >
                <textarea name="textarea" cols="40" rows="10" ></textarea>
             </td>
            </tr>
            <tr>
              <td ><label class="required">Home Phone:</label></td>
              <td ><input name="hphone" value="312-416-0304" type="text" > <br>
<ul class="form-guidelines">
                <li>e.g. xxx-xxx-xxxx</li>
                          </ul>                    </td>
            </tr>
            <tr>
                <td ><label class="required">Email:</label></td>
                <td class="form-value"><input name="email" type="text" >
                <br>
                <input id="mail_html" name="email_format" value="html" type="radio">
                  <label for="mail_html">HTML</label>
                  <br>
                  <input id="mail_text" name="email_format" value="text" checked="checked" type="radio">
                  <label for="mail_text">Text</label>              </td>
            </tr>
            <tr>
               <td ><label class="required">Status:</label></td>
               <td ><input c id="mail_html" name="email_format" value="html" type="radio">
                  <label  for="mail_html">Enable</label>
                  <br>
                  <input id="mail_text"  name="email_format" value="text" checked="checked" type="radio">
                  <label for="mail_text">Disable</label></td>
            </tr>
            <tr>
              <td ><label class="required">Country:</label></td>
              <td ><select name="country" >
                  <option selected>select----</option>
                  <option value="US">United States</option>
                 <option value="ZW">Zimbabwe </option>
              </select></td>
            </tr>
          </tbody>
            </table>
         
   </fieldset>    

  <div class="button-container">...</div>  
Edit Whois Proctector: A.com{1}

<fieldset >
<legend>Edit Status</legend>
<table class="form">
<tbody>
<tr>
<td class="fixedwidth"><label for="fname" class="required">Status:</label></td>
<td ><input c id="mail_html" name="email_format" value="html" type="radio">
<label class="radio" for="mail_html">Enable</label>
<br>
<input id="mail_text" name="email_format" value="text" checked="checked" type="radio">
<label class="radio" for="mail_text">Disable</label></td>
</tr>
<tr>
<td class="form-label topalign"><label for="newsletter">Use for all domains and plans:</label>

</td>
<td class="topalign" ><input id="newsletter" name="newsletter" value="yes" type="checkbox"></td>
</tr>
</tbody>
</table>
</td>
</fieldset>
<fieldset>
<legend>Edit Email Settings</legend>
<table class="form">
<tbody>
<tr>
<td class="fixedwidth"><label for="fname" class="required">Email Options:</label></td>
<td ><select name="Emailoptions" >

<option value="US">none</option>
<option value="CA">forward to </option>
<option value="AF">bounce </option>

</select></td>
</tr>
<tr>
<td ><label for="fname" class="required">Forward to:</label></td>
<td ><input name="street1" type="text" size="30"> </td>
</tr>
<tr>
<td class="form-label"><label for="newsletter"><span class="form-label topalign">Use for all domains and plans:</span></label></td>
<td ><input id="newsletter" name="newsletter" value="yes" type="checkbox"></td>
</tr>
</tbody>
</table>


</fieldset>

<div class="button-container">...</div>  
Form with Errors

<div id="com-hostway-plugins-commons-contactinfo-customer">
<h1>Personal Contact Information</h1>

<div class="message message-error">
<p><strong>Something Went Wrong.</strong></p>
<p>Please correct the below field marked in red. We either had trouble understanding those fields, or need more information.</p>
</div>

<div class="note"><strong>Note: </strong> (<img src="/static/com/hostway/plugins/commons/images/icon-formfield-required.gif" alt="Required Field" width="7" height="8" hspace="0" vspace="0" border="0">) = <em>Required </em>and (<img src="/static/com/hostway/plugins/commons/images/icon-formfield-error.gif" alt="Required Field" width="7" height="8" hspace="0" vspace="0" border="0">) = <em> Something Went Wrong</em>. </div>
<form action="/Branch-CP/com/hostway/plugins/commons/contactinfo/editcustomercontact.tile" method="post" name="form1" id="form1"><input name="ngtsrc" value="-2080982310" type="hidden">

<fieldset>
<legend>Name and Address</legend>
<table class="form">

<tbody><tr>
<td class="fixedwidth"><label for="fname" class="required">First Name:</label></td>
<td><input name="fname" type="text" id="fname" value="John" size="30"></td>
</tr>
<tr>
<td >
<label for="mname">Middle Name:</label> </td>
<td >
<input name="mname" type="text" value="" size="30"> </td>
</tr>
<tr>

<td ><label for="lname" class="error">Last Name:</label></td>
<td >
<input name="lname" class="form-value-error" type="text"> </td>
</tr>
<tr>
<td> <label for ="organization">Organization:</label></td>
<td > <input name="company" type="text" value="Hostway Corporation" size="30"> </td>
</tr>
<tr>
<td ><label for="address">Address - Line 1:</label> </td>
<td ><input name="street1" type="text" value="1 N. State" size="30"> </td>
</tr>
<tr>
<td ><label for="zip" class="error">Zip/Postal Code:</label></td>
<td ><input name="lname" type="text" size="10"><ul class="form-guidelines">
<br><li >5 characters</li>
</ul></td>
</tr>
<tr>
<td ><label class="form-label error">Country:</label> </td>
<td >
<select name="country" class="form-value-error">
<option selected>select----</option>
<option value="US">United States</option>
<option value="ZW">Zimbabwe</option>
</select> </td>
</tr>
</tbody></table>
</fieldset>

<fieldset>
<legend>Choose Domain Forwarding Type </legend>
<table class="form">
<tbody>
<tr>
<td class="fixedwidth"><label class="required">Forward to: </label></td>
<td ><input id="mail_html" name="email_format" value="html" type="radio">
<label class="radio" for="mail_html">Location (Visitor sees forwarded address)</label> <br>
<input id="mail_text" name="email_format" value="text" checked="checked" type="radio">
<label class="radio" for="mail_text">Frame (Visitor only sees original domain name)</label> </td>
</tr>
</tbody>
</table>
</fieldset>


<fieldset>
<legend>Phone and Email</legend>
<table class="form">
<tbody>
<tr>
<td class="fixedwidth"><label >Address - Line 1:</label> </td>
<td ><input name="street1" type="text" value="1 N. State" size="30"> </td>
</tr>
<tr>
<td class="form-label"><label for="newsletter">Recieve EasyHost newsletter.</label></td>
<td>
<input type="checkbox" name="accepted" id="newsletter"> </td>
</tr>
<tr>
<td> <label class="form-label error">Comments:</label> </td>
<td >
<textarea name="textarea" cols="30" rows="10" class="form-value-error"></textarea> </td>
</tr>
<tr>
<td> <label class="form-label error">Home Phone:</label> </td>
<td ><input name="hphone" value="312-416-03kj00040" type="text" class="form-value-error">
<ul class="form-guidelines">
<li class="form-guidelines">ex) xxx-xxx-xxxx</li>
</ul> </td>
</tr>
<tr>
<td ><label class="form-label error">Email:</label> </td>
<td ><input name="email" type="text" class="form-value-error">
<br>
<input id="mail_html" name="email_format" value="html" type="radio">
<label for="mail_html">HTML</label>
<br>
<input id="mail_text" name="email_format" value="text" checked="checked" type="radio">
<label for="mail_text">Text</label> </td>
</tr>
<tr>
<td ><label class="form-label error">Status:</label> </td>
<td ><input class="form-value-error" id="mail_html" name="email_format" value="html" type="radio">
<label for="mail_html">Enabler</label>
<br>
<input id="mail_text" class="form-value-error" name="email_format" value="text" checked="checked" type="radio">
<label for="mail_text">Distable</label>
</td>
</tr>
</tbody>
</table>
</fieldset>
<div class="button-container">...</div>