HTML/CSS/Form Style/input

Содержание

1 Access Keys
2 Attribute Value Selectors for input controls
3 input border: 1px solid black;
4 input border-bottom: 2px solid black;
5 input border-right: 2px solid black;
6 input class id selector and property selector
7 input display: block;
8 input margin: 0 0 .5em 0;
9 input margin-bottom: 1.25em;
10 input width: 12em
11 input width: 150px;
12 input with class name
13 Login form
14 Register for our e-mail
15 Required field
16 Set all input control for margin, left float, width and display style
17 Set background color, font and border for form control
18 Set border width, border style and border color for all input controls
19 Set input background color and color
20 Set input control with focus to have yellow background
21 Set margin for input control
22 Set required label field to have bold font and highlight color
23 Set width and display style for input
24 Set width and margin for all input controls
25 Set width of input control
26 Tabbing Order with tabindex

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>

HTML/CSS/Form Style/input

Содержание

Access Keys

Attribute Value Selectors for input controls

input border: 1px solid black;

input border-bottom: 2px solid black;

input border-right: 2px solid black;

input class id selector and property selector

input display: block;

input margin: 0 0 .5em 0;

input margin-bottom: 1.25em;

input width: 12em

input width: 150px;

input with class name

Login form

Register for our e-mail

Required field

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

Set background color, font and border for form control

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

Set input background color and color

Set input control with focus to have yellow background

Set margin for input control

Set required label field to have bold font and highlight color

Set width and display style for input

Set width and margin for all input controls

Set width of input control

Tabbing Order with tabindex

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты