Search This Blog

Wednesday, June 13, 2012

HTML Form

Day 4 - 

  1. <form>, <input> with attribute type of "text", "password", "radio", "checkbox", "reset", "submit"
  2. <select>  -> <option>, <textarea> with attributes cols, rows
  3. name: sex: email: new password:Birthday:
  4. add on attribute such as: name, maxlength, value, checked, readonly, disabled
  5. <label> with attribute for, and refer to form's elements according to its attribute id
  6. arrange your form elements in a table so that label and input can be aligned nicely
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>Insert title here</title>
 </head>
 <body>
  <form>
   <table border="1">
    <tr>
     <td><label for="username">Name:</label></td>
     <td colspan="6"><input type="text" value="your name here" id="username"/></td>
    </tr>
    <tr>
     <td><label for="userpwd">Password:</label></td>
     <td colspan="6"><input type="password" value="" id="userpwd"/></td>
    </tr>
    <tr>
     <td><label for="male">Gender:</label></td>
     <td colspan="3"><input type="radio" name="gender" value="M" id="male" checked/><label for="male">Male</label></td>
     <td colspan="3"><input type="radio" name="gender" value="F" id="female" /><label for="female">Female</label></td>
    </tr>
    <tr>
     <td><label for="twitter">Account:</label></td>
     <td colspan="2"><input type="checkbox" name="account" value="T" id="twitter"/><label for="twitter">Twitter</label></td>
     <td colspan="2"><input type="checkbox" name="account" value="Y" id="yahoo"/><label for="yahoo">Yahoo</label></td>
     <td colspan="2"><input type="checkbox" name="account" value="Hot" id="hotmail"/><label for="hotmail">Hotmail</label></td>
    </tr>
    <tr>
     <td><label for="day">BirthDate:</label></td>
     <td colspan="2">
      <select multiple="multiple" id="day">
       <option value="0">Select a few Days</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5"  selected="selected">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
      </select>
     </td>
     <td colspan="2">
      <select id="month">
       <option value="0">Select a month</option>
       <option value="1">Jan</option>
       <option value="2">Feb</option>
       <option value="3">Mar</option>
       <option value="4">Apr</option>
       <option value="5">May</option>
       <option value="6">Jun</option>
       <option value="7">Jul</option>
       <option value="8">Aug</option>
      </select>
     </td>
     <td colspan="2"><input type="text" value="1988" maxlength="4" id="year" readonly="readonly"/></td>
    </tr>
    <tr>
     <td><label for="findUs">How you find us?</label></td>
     <td colspan="6"><textarea rows="3" cols="50" id="findUs"></textarea></td>
    </tr>
    <tr>
     <td colspan="7" align="right"><input type="submit" value="Submit!" id=SubmitBtn" />
      &nbsp;&nbsp;
      <input type="reset" value="Reset" id="resetBtn"/>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html>

No comments:

Post a Comment