HTML/CSS/Form Style/input — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Текущая версия на 08:17, 26 мая 2010

Access Keys

 
The following elements can carry an access key attribute:
<a>  <area>  <button>  <input>  <label>  <legend>  <textarea>

<legend accesskey="c"><u>C</u>ontact Information (ALT + C)</legend>
   <legend>Competition Question</legend>
   <legend accesskey="t"><u>T</u>iebreaker Question (ALT + T)</legend>
   <legend>Enter competition</legend>



Attribute Value Selectors for input controls

 
<!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" xml:lang="en">
    <head>
        <title>Attribute Selectors</title>
        <style rel="stylesheet" type="text/css">

input[type="text"] {
    background: blue;
    color: lightblue;
    border: 3px solid lightblue;
}
input[type="text"][name="last_name"] {
    background: forestgreen;
    color: yellowgreen;
    border: 3px solid yellowgreen;
}
input[type="password"][name="password"] {
    background: crimson;
    color: pink;
    border: 3px solid pink;
}
        
        </style>
    </head>
    <body>
        <form method="post" action="">
            <fieldset>
                <legend>Feedback Form</legend>
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <label for="first-name">First Name:</label>
                            </td>
                            <td>
                                <input type="text"
                                       name="first_name"
                                       id="first-name"
                                       value=""
                                       size="25" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="last-name">Last Name:</label>
                            </td>
                            <td>
                                <input type="text"
                                       name="last_name"
                                       id="last-name"
                                       value=""
                                       size="25" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="account-password">Password:</label>
                            </td>
                            <td>
                                <input type="password"
                                       name="password"
                                       id="account-password"
                                       size="25"
                                       value="" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </fieldset>
        </form>
    </body>
</html>



input border: 1px solid black;

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
label:after {
  content: ": ";
}
input {
  display: block;
  margin-bottom: 1.25em;
  width: 150px;
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}
  </style>
</head>
<body>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form>
</body>
</html>



input border-bottom: 2px solid black;

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
label:after {
  content: ": ";
}
input {
  display: block;
  margin-bottom: 1.25em;
  width: 150px;
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}
  </style>
</head>
<body>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form>
</body>
</html>



input border-right: 2px solid black;

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
label:after {
  content: ": ";
}
input {
  display: block;
  margin-bottom: 1.25em;
  width: 150px;
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}
  </style>
</head>
<body>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form>
</body>
</html>



input class id selector and property selector

 

<!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" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Example form</title>
    <style rel="stylesheet" type="text/css" media="screen">
input#state { width:  2em; }
input#zip { width: 5em; }
input#card_number { width:  16em; }
input#expiration { width:  4em; }
input[type=radio],
input[type=submit],
input[type=checkbox] {
    width:  auto;
}
    </style>
  </head>
  
  <body>
    <form id="" action="" method="post">
      
      <fieldset id="name">
        <legend>Name</legend>
        <label>Title
          <select id="title1" name="title1">
            <option selected="selected">Mr.</option>
            <option>Mrs.</option>
            <option>Ms.</option>
          </select>
        </label>
        <label>First name
          <input id="first-name" name="first-name" type="text" />
        </label>
        <label>Last name
          <input id="las-name" name="last-name" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="address">
        <legend>Address</legend>
        <label>Street
          <input id="street" name="street" type="text" />
        </label>
        <br />
        <label>City
          <input id="city" name="city" type="text" />
        </label>
        <label>State
          <input id="state" name="state" type="text" />
        </label>
        <label>Zip code
          <input id="zip" name="zip" type="text" />
        </label>
        <br />
        <label>Country
          <input id="country" name="country" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="payment">
        <legend>Payment option</legend>
          <fieldset id="credit_card">
            <legend>Credit card</legend>
            <label><input id="visa" name="visa" type="radio" /> Visa</label>
            <label><input id="mastercard" name="mastercard" type="radio" /> Mastercard</label>
            <label><input id="discover" name="discover" type="radio" /> Discover</label>
            <br />
          </fieldset>
        <label>Card number
          <input id="card_number" name="card_number" type="text" />
        </label>
        <label>Expiration date
          <input id="expiration" name="expiration" type="text" />
        </label>
        <br />
        <input class="submit" type="submit" value="Submit" />
        <br />
      </fieldset>
      
    </form>
  </body>
  
</html>



input display: block;

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
label:after {
  content: ": ";
}
input {
  display: block;
  margin-bottom: 1.25em;
  width: 150px;
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}
  </style>
</head>
<body>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form>
</body>
</html>



input margin: 0 0 .5em 0;

 

<!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" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Example form</title>
    <style rel="stylesheet" type="text/css" media="screen">
input {
    margin:  0 0 .5em 0;
}

    </style>
  </head>
  
  <body>
    <form id="" action="" method="post">
      
      <fieldset id="name">
        <legend>Name</legend>
        <label>Title
          <select id="title1" name="title1">
            <option selected="selected">Mr.</option>
            <option>Mrs.</option>
            <option>Ms.</option>
          </select>
        </label>
        <label>First name
          <input id="first-name" name="first-name" type="text" />
        </label>
        <label>Last name
          <input id="las-name" name="last-name" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="address">
        <legend>Address</legend>
        <label>Street
          <input id="street" name="street" type="text" />
        </label>
        <br />
        <label>City
          <input id="city" name="city" type="text" />
        </label>
        <label>State
          <input id="state" name="state" type="text" />
        </label>
        <label>Zip code
          <input id="zip" name="zip" type="text" />
        </label>
        <br />
        <label>Country
          <input id="country" name="country" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="payment">
        <legend>Payment option</legend>
          <fieldset id="credit_card">
            <legend>Credit card</legend>
            <label><input id="visa" name="visa" type="radio" /> Visa</label>
            <label><input id="mastercard" name="mastercard" type="radio" /> Mastercard</label>
            <label><input id="discover" name="discover" type="radio" /> Discover</label>
            <br />
          </fieldset>
        <label>Card number
          <input id="card_number" name="card_number" type="text" />
        </label>
        <label>Expiration date
          <input id="expiration" name="expiration" type="text" />
        </label>
        <br />
        <input class="submit" type="submit" value="Submit" />
        <br />
      </fieldset>
      
    </form>
  </body>
  
</html>



input margin-bottom: 1.25em;

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
label:after {
  content: ": ";
}
input {
  display: block;
  margin-bottom: 1.25em;
  width: 150px;
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}
  </style>
</head>
<body>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form>
</body>
</html>



input width: 12em

 

<!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" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Example form</title>
    <style rel="stylesheet" type="text/css" media="screen">
input {
    width:  12em;
}
    </style>
  </head>
  
  <body>
    <form id="" action="" method="post">
      
      <fieldset id="name">
        <legend>Name</legend>
        <label>Title
          <select id="title1" name="title1">
            <option selected="selected">Mr.</option>
            <option>Mrs.</option>
            <option>Ms.</option>
          </select>
        </label>
        <label>First name
          <input id="first-name" name="first-name" type="text" />
        </label>
        <label>Last name
          <input id="las-name" name="last-name" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="address">
        <legend>Address</legend>
        <label>Street
          <input id="street" name="street" type="text" />
        </label>
        <br />
        <label>City
          <input id="city" name="city" type="text" />
        </label>
        <label>State
          <input id="state" name="state" type="text" />
        </label>
        <label>Zip code
          <input id="zip" name="zip" type="text" />
        </label>
        <br />
        <label>Country
          <input id="country" name="country" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="payment">
        <legend>Payment option</legend>
          <fieldset id="credit_card">
            <legend>Credit card</legend>
            <label><input id="visa" name="visa" type="radio" /> Visa</label>
            <label><input id="mastercard" name="mastercard" type="radio" /> Mastercard</label>
            <label><input id="discover" name="discover" type="radio" /> Discover</label>
            <br />
          </fieldset>
        <label>Card number
          <input id="card_number" name="card_number" type="text" />
        </label>
        <label>Expiration date
          <input id="expiration" name="expiration" type="text" />
        </label>
        <br />
        <input class="submit" type="submit" value="Submit" />
        <br />
      </fieldset>
      
    </form>
  </body>
  
</html>



input width: 150px;

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
label:after {
  content: ": ";
}
input {
  display: block;
  margin-bottom: 1.25em;
  width: 150px;
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}
  </style>
</head>
<body>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form>
</body>
</html>



input with class name

 
<!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>
<title></title>
<style type="text/css">
.textinput {
 margin-bottom: 1.5em;
 width: 50%;
 color: #666;
 background-color: #ccc;        
}
</style>
</head>
<body>
  <h2>Simple Quiz</h2>
   <form action="" method="post">
   <p>
    Are you 
     <input type="radio" value="male" name="sex" class="radioinput">
    Male or 
     <input type="radio" value="female" name="sex" class="radioinput"> 
    Female?
   </p>
  <p>
   What pizza toppings do you like? 
   <input type="checkbox" name="" value="l" class="checkbxinput"> Pepperoni 
   <input type="checkbox" name="" value="mushrooms" class="checkbxinput"> Mushrooms 
   <input type="checkbox" name="" value="pineapple" class="checkbxinput"> Pineapple
   </p>
   <label for="question1">Who is buried in Grant"s tomb?</label>
   <input type="text" name="question1" id="question1" class="textinput" value="Type answer here" />
   <br />
   <label for="question2">Great Wall of China Located?</label>
   <input type="text" name="question2" id="question2" class="textinput" value="Type answer here" />
   <br />
   <label for="password">What is your password?</label>
   <input type="password" name="password" id="password" class="pwordinput" value="" />
   <br />
   <input name="reset" type="reset" id="reset" value="Reset" />
   <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
  
</body>
</html>



Login form

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Login form</title>
    <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12pt;
}
fieldset {
  font-size: 12px;
  padding: 10px;
  width: 250px;
  text-align: right;
}
</style>
  </head>
  <body>
<form name="frmExample" action="" method="post">
<fieldset>
<legend>Login details</legend>
User name: <input type="text" size="12" name="txtUserName" /><br />
Password: <input type="password" size="12" name="txtPassword" /><br />
Confirm password: <input type="password" size="12" name="txtPasswordConfirmed" /><br />
<input type="submit" value="Log in" />
</fieldset>
</form>
</body>
</html>



Register for our e-mail

 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Register for E-mail</title>
    <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12pt;
}
fieldset {
  font-size: 12px;
  padding: 10px;
  width: 250px;
}
.formPrompt {
  text-align: right;
}
</style>
  </head>
  <body>
<form name="frmExample" action="" method="post">
<fieldset>
<legend>Register for our e-mail</legend>
<table>
  <tr>
    <td class="formPrompt">First name: </td>
    <td><input type="text" name="txtFirstName" size="12" /></td>
  </tr>
  <tr>
    <td class="formPrompt">Last name: </td>
    <td><input type="text" name="txtLastName" size="12" /></td>
  </tr>
  <tr>
    <td class="formPrompt">E-mail address: </td>
    <td><input type="text" name="txtEmail" size="12" /></td>
  </tr>
</table>
</fieldset>
</form>
</body>
</html>



Required field

 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Positioning labels</title>
    <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12pt;
}
fieldset {
  font-size: 12px;
  padding: 10px;
  width: 500px;
}
span.required {
  font-weight: bold;
  font-size: 20px;
  color: #ff0000;
}
td {
  font-size: 12px;
}
</style>
  </head>
  <body>
<form name="frmExample" action="" method="post">
<fieldset>
<legend>Contact details</legend>
<table>
  <tr>
    <td class="label">Phone number <span class="required">*</span></td>
    <td>Area code:&nbsp;<input type="text" name="txtTelAreaCode" size="5" />
        Number:&nbsp;<input type="text" name="txtTelNo" size="10" /></td>
  </tr>
</table>
</fieldset>
</form>
</body>
</html>



Set all input control for margin, left float, width and display style

 
<!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>
<title></title>
<style type="text/css">
input {
 display: block;
 width: 175px;
 float: left;
 margin-bottom: 10px;
}
</style>
</head>
<body>
   <form action="" method="post">
   <label for="uname">Username</label>
   <input type="text" name="uname" id="uname" value="" /><br />
   <label for="pname">Password</label>
   <input type="text" name="pname" id="pname" value="" /><br />
   <label for="recall">Remember you?</label> 
   <input type="checkbox" name="recall" id="recall"  class="checkbox" /><br />
   <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



Set background color, font and border for form control

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css" media="Screen">
.formField, select {
    border: 1px solid #333333;
    background-color: #cccccc;
    font: 12px Verdana, sans-serif;
}
    </style>
</head>
<body>
    <form action="" enctype="x-www-form-encoded" method="post">
        <fieldset>
            <legend>Personal information</legend>
            <p><strong><label for="realname">Name</label></strong><br />
            <input class="formField" type="text" id="realname" name="realname" size="30" /></p>
            <p><strong><label for="email">Email address</label></strong><br />
            <input class="formField" type="text" id="email" name="email" size="30" /></p>
            <p><strong><label for="phone">Telephone</label></strong><br />
            <input class="formField" type="text" id="phone" name="phone" size="30" /></p>
        </fieldset>
    </form>
</body>
</html>



Set border width, border style and border color for all input controls

 
<!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>
<title></title>
<style type="text/css">

input {
 display: block;
 margin-bottom: 1.25em;
 width: 150px;
 border: solid black;
 border-width: 1px 2px 2px 1px;
}

</style>
</head>
<body>
    <form method="post">
   <label for="uname">Username</label>
   <input type="text" name="uname" id="uname" value="" /><br />
   <label for="pword">Password</label>
   <input type="text" name="pword" id="pword" value="" /> <br /> 
     <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



Set input background color and color

 
<!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>
<title></title>
<style type="text/css">
.pwordinput {
 color: white;
 background-color: white;
}
</style>
</head>
<body>
  <h2>Simple Quiz</h2>
   <form action="" method="post">
   <p>
    Are you 
     <input type="radio" value="male" name="sex" class="radioinput">
    Male or 
     <input type="radio" value="female" name="sex" class="radioinput"> 
    Female?
   </p>
  <p>
   What pizza toppings do you like? 
   <input type="checkbox" name="" value="l" class="checkbxinput"> Pepperoni 
   <input type="checkbox" name="" value="mushrooms" class="checkbxinput"> Mushrooms 
   <input type="checkbox" name="" value="pineapple" class="checkbxinput"> Pineapple
   </p>
   <label for="question1">Who is buried in Grant"s tomb?</label>
   <input type="text" name="question1" id="question1" class="textinput" value="Type answer here" />
   <br />
   <label for="question2">Great Wall of China Located?</label>
   <input type="text" name="question2" id="question2" class="textinput" value="Type answer here" />
   <br />
   <label for="password">What is your password?</label>
   <input type="password" name="password" id="password" class="pwordinput" value="" />
   <br />
   <input name="reset" type="reset" id="reset" value="Reset" />
   <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
  
</body>
</html>



Set input control with focus to have yellow background

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
input:focus {
   background-color: yellow;
}
</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
      <form id="regform" name="regform" method="post" action="/regform.php">
        <div id="register">
          <h4>Register</h4>
          <label for="fmlogin">Login</label>
          <input type="text" name="fmlogin" id="fmlogin" />
          <label for="fmemail">Email Address</label>
          <input type="text"  name="fmemail" id="fmemail" />
          <label for="fmemail2">Confirm Address</label>
          <input type="text"  name="fmemail2" id="fmemail2" />
          <label for="fmpswd">Password</label>
          <input type="password"  name="fmpswd" id="fmpswd" />
          <label for="fmpswd2">Confirm Password</label>
          <input type="password"  name="fmpswd2" id="fmpswd2" />
        </div>
        <div id="contactinfo">
          <h4>Contact Information</h4>
          <label for="fmfname">First Name</label>
          <input type="text" name="fmfname" id="fmfname" />
          <label for="fmlname">Last Name</label>
          <input type="text" name="fmlname" id="fmlname" />
          <label for="fmaddy1">Address 1</label>
          <input type="text" name="fmaddy1" id="fmaddy1" />
          <label for="fmaddy2">Address 2</label>
          <input type="text" name="fmaddy2" id="fmaddy2" />
          <label for="fmcity">City</label>
          <input type="text" name="fmcity" id="fmcity" />
          <label for="fmstate">State or Province</label>
          <input type="text" name="fmstate" id="fmstate" />
          <label for="fmzip">Zip</label>
          <input type="text" name="fmzip" id="fmzip"  size="5" />
          <label for="fmcountry">Country</label>
          <input type="text" name="fmcountry" id="fmcountry" />
          <input type="submit" name="submit" value="send" class="submit" />
        </div>
      </form>
    </div>
  </div>
</div>
</body>
</html>



Set margin for input control

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Forms</title>
  <style type="text/css" media="screen">
  
  div {
    margin-bottom: 30px;
    }  
  
  #divID input {
    margin: 6px 0;
    }
  </style>
</head>
<body>
<div id="divID">
<form action="" method="post">
  <table>
    <tr>
      <td>Name:</td>
      <td><input type="text" name="name" /></td>
    </tr>
    <tr>
      <td>Email:</td> 
      <td><input type="text" name="email" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" value="submit" /></td>
    </tr>
  </table>
</form>
</div>
</body>
</html>



Set required label field to have bold font and highlight color

 
<!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>
<title></title>
<style type="text/css">
label.required {
 color: #c00;
 font-weight: bold;
}
</style>
</head>
<body>
   <form id="msgform" name="msgform" method="post" action="/process.php">
   <fieldset>
    <legend>Contact Information</legend>
    <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
    <select name="fmtitle" id="fmtitle">
     <option value="ms">Ms.</option>
     <option value="mrs">Mrs.</option>
     <option value="miss">Miss</option>
     <option value="mr">Mr.</option>
    </select>
    <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
    <input type="text" name="fmname" id="fmname" />
    <label for="fmemail" accesskey="e" class="required">
  <span class="akey">E</span>mail <img src="alert.gif" /> Required</label>
    <input type="text"  name="fmemail" id="fmemail" class="required" />
   </fieldset>
   <fieldset>
    <legend>Your Message</legend>
    <label for="fmstate" accesskey="y">Subject</label>
    <input type="text" name="fmcountry" id="fmcountry" />
    <label for="fmmsg" class="required"><span class="akey">M</span>essage 
  <img src="alert.gif" /> Required</label>
    <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14" class="required"></textarea>
   </fieldset>
   <input type="submit" name="submit" value="send" class="submit" />
  </form>
</body>
</html>



Set width and display style for input

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

input {
  display: block;
  width: 250px;
}

</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
      <form id="form1" name="form1" method="post" action="/">
    
      <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>

        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <label for="fmmsg"><span class="akey">M</span>essage</label>
        <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
    
        <input type="submit" name="submit" value="send" class="submit" />
      </form>
    </div>
  </div>
  <div id="extra">
    <h2>quid pro quo</h2>
  </div>
  <div id="footer">
    <p>ask.</p>
  </div>
</div>
</body>
</html>



Set width and margin for all input controls

 
<!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>
<title></title>
<style type="text/css">

input {
 display: block;
 margin-bottom: 1.25em;
 width: 150px;
}

</style>
</head>
<body>
    <form method="post">
   <label for="uname">Username</label>
   <input type="text" name="uname" id="uname" value="" /><br />
   <label for="pword">Password</label>
   <input type="text" name="pword" id="pword" value="" /> <br /> 
     <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



Set width of input control

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Forms</title>
  <style type="text/css" media="screen">
  
  div {
    margin-bottom: 30px;
    }  
  
  #divID #thisform input {
    width: 200px;
    }
  </style>
</head>
<body>
<div id="divID">
<form action="" id="thisform" method="post">
  <p><label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" /></p>
  <p><input type="checkbox" id="remember" name="remember" /> 
  <label for="remember">Remember this info?</label></p>
  <p><input type="submit" value="submit" /></p>
</form>
<br /><br />
</div>
</body>
</html>



Tabbing Order with tabindex

 
The following elements can carry a tabindex attribute:
<a>  <area>  <button>  <input>  <object>  <select>  <textarea>
<form action="http://www.example.ru/tabbing.asp" method="get"
       name="frmTabExample">
  <input type="checkbox" name="chkNumber" value="1" tabindex="3" /> One<br />
  <input type="checkbox" name="chkNumber" value="2" tabindex="7" /> Two<br />
  <input type="checkbox" name="chkNumber" value="3" tabindex="4" /> Three<br />
  <input type="checkbox" name="chkNumber" value="4" tabindex="1" /> Four<br />
  <input type="checkbox" name="chkNumber" value="5" tabindex="9" /> Five<br />
  <input type="checkbox" name="chkNumber" value="6" tabindex="6" /> Six<br />
  <input type="checkbox" name="chkNumber" value="7" tabindex="10" /> Seven <br />
  <input type="checkbox" name="chkNumber" value="8" tabindex="2" /> Eight<br />
  <input type="checkbox" name="chkNumber" value="9" tabindex="8" /> Nine<br />
  <input type="checkbox" name="chkNumber" value="10" tabindex="5" /> Ten<br />
<input type="submit" value="Submit" />
</form>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Form_Style/input&oldid=5597»