Form layout : form « Form « HTML / CSS






  1. HTML / CSS
  2. Form
  3. 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 2 </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>








Related examples in the same category

1.Introducing Form Design
2.form starts the form, gives the method of sending information and the location of form scripts
3.Add form controls to paragraph
4.Use DL, DT to layout the form controls
5.A login form with submit button
6.simple form with label, text field and submit button
7.Set margin, padding and border for form
8.Use DIV to wrap form control
9.Wrap form controls in a DIV and set style to float left and padding
10.Use table to layout form controls
11.styleless order form
12.Use UL and LI to layout form controls
13.Define style based on form id
14.Styling text in form controls
15.Disable a form control
16.Align the form controls
17.Registration Form
18.Layout form controls with table
19.Layout form with CSS
20.Wizard form
21.Form for registration
22.form width: 75%
23.form margin: 3em auto
24.Add BR to table cell to layout the form controls
25.Use table to align the form controls
26.Table and Form Example
27.form margin:10px;
28.form padding: 0 5px;
29.form background: #F5F5F5;
30.form background: #F8F8F8;
31.form padding-right: 15px;
32.form padding-left: 15px;
33.form margin: 15px;
34.form padding: 15px 5px;
35.form border: 1px solid #EFEFEF;
36.Adding border to form
37.Error Fields
38.Error Fields 3
39.Error Fields 2
40.CSS Forms: Focus and Required Fields
41.CSS styled form elements
42.Spreadsheet form
43.A simple search form
44.Register with us form
45.Form with border
46.Submit form
47.Reset and Submit Example