Form layout : form : Form Style HTML CSS TUTORIALS


HTML CSS TUTORIALS » Form Style » form »

 

Form layout


 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

table {
  border-collapse: collapse;
  color: black;
  border: 1px solid black;
}

th {
  width: 200px;
  text-align: right;
  padding-right: 12px;
  padding-top: .75em;
  padding-bottom: .75em;
  vertical-align: top;
  border-top: 1px solid black;
  font-family: Verdana;
  font-size: .7em;

}

td {
  vertical-align: middle;
  background-color: pink;
  border-bottom: 1px solid white;
  color: white;
  border-left: 4px solid grey;
  padding: 4px;
  font-family: Verdana;
  font-size: .7em;
}

.required {
  color: red;
}

.header th {
  text-align: left;
  text-transform: uppercase;
  font-size: .9em;
  padding-left: 220px;

  border-bottom: 2px solid grey;
  border-top: 2px solid black;
}

#buttonSubmit {
  margin-left: 220px;
  margin-top: 4px;
}
  </style>
</head>
<body>
<form action="" method="post">
  <table cellspacing="0">
    <tr class="header">
      <th colspan="2">Account Information</th>
    </tr>
    <tr class="required">
      <th scope="row">Login Name*</th>
      <td> <input name="uname" type="text" size="12" maxlength="12" /> </td>
    </tr>
    <tr class="required">
      <th scope="row">Password*</th>
      <td><input name="pword" type="text" size="12" maxlength="12" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Confirm Password* </th>
      <td><input name="pword2" type="text" size="12" maxlength="12" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Email Address*</th>
      <td><input name="email" type="text" /></td>
    </tr>
    <tr class="header">
      <th colspan="2">Contact Information</th>
    </tr>
    <tr class="required">
      <th scope="row">First Name* </th>
      <td><input name="fname" type="text" size="11" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Last Name* </th>
      <td><input name="lname" type="text" size="11" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Address 1*</th>
      <td><input name="address1" type="text" size="11" /></td>
    </tr>
    <tr>
      <th scope="row">Address </th>
      <td><input type="text" name="address2" /></td>
    </tr>
    <tr class="required">
      <th scope="row">City* </th>
      <td><input type="text" name="city" /></td>
    </tr>
    <tr class="required">
      <th scope="row">State or Province*</th>
      <td><select name="state">
          <option selected="selected" disabled="disabled">Select...</option>
          <option value="alabama">Alabama</option>
        </select></td>
    </tr>
    <tr class="required">
      <th scope="row">Zip*</th>
      <td><input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Country*</th>
      <td><input type="text" name="country" id="country" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Gender*</th>
      <td> <input type="radio" name="sex" value="female" />
        Female
        <input type="radio" name="sex" value="male" />
        Male </td>
    </tr>
    <tr class="header">
      <th colspan="2">Misc. </th>
    </tr>
    <tr>
      <th scope="row"> Income </th>
      <td>
       <select name="income" size="1" >
         <option selected="selected" disabled="disabled">Select...</option>
          <option value="notsay">no</option>
        </select> </td>
    </tr>
    <tr>
      <th scope="row">Interests</th>
      <td><input name="interests" type="checkbox" value="shopping-fashion" />
        Shopping/fashion
        <input name="interests" type="checkbox" value="sports" />
        Sports
        <input name="interests" type="checkbox" value="travel" />
        Travel</td>
    </tr>
    <tr>
      <th scope="row">Eye Color</th>
      <td><input name="eye" type="checkbox" value="red" />
        Red
        <input name="eye" type="checkbox" value="green" />
        Green
        <input name="eye" type="checkbox" value="brown" />
        Brown
        <input name="eye" type="checkbox" value="blue" />
        Blue Gold</td>
    </tr>
  </table>
  <input type="submit" name="Submit" value="Submit" id="buttonSubmit" />
  <input type="reset" name="Submit2" value="Reset" id="buttonReset" />
</form>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Form Style
» form