HTML/CSS/Form Style/input

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

Access Keys

   <source lang="html4strict">

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

<legend accesskey="c">Contact Information (ALT + C)</legend> 

  <legend>Competition Question</legend>
  <legend accesskey="t">Tiebreaker Question (ALT + T)</legend>
  <legend>Enter competition</legend>
  
  
</source>


Attribute Value Selectors for input controls

   <source lang="html4strict">

<!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>
<tbody> </tbody> 
                               <label for="first-name">First Name:</label>

                               <input type="text"
                                      name="first_name"
                                      id="first-name"
                                      value=""
                                      size="25" />

                               <label for="last-name">Last Name:</label>

                               <input type="text"
                                      name="last_name"
                                      id="last-name"
                                      value=""
                                      size="25" />

                               <label for="account-password">Password:</label>

                               <input type="password"
                                      name="password"
                                      id="account-password"
                                      size="25"
                                      value="" />

           </fieldset>
       </form>
   </body>

</html> 

</source>


input border: 1px solid black;

   <source lang="html4strict">

<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="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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

</source>


input border-bottom: 2px solid black;

   <source lang="html4strict">

<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="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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

</source>


input border-right: 2px solid black;

   <source lang="html4strict">

<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="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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

</source>


input class id selector and property selector

   <source lang="html4strict">

<!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>
       

     </fieldset>
     <fieldset id="address">
       <legend>Address</legend>
       <label>Street
         <input id="street" name="street" type="text" />
       </label>
       

       <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>
       

       <label>Country
         <input id="country" name="country" type="text" />
       </label>
       

     </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>
           

         </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>
       

       <input class="submit" type="submit" value="Submit" />
       

     </fieldset>
     
   </form>
 </body>

</html> 

</source>


input display: block;

   <source lang="html4strict">

<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="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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

</source>


input margin: 0 0 .5em 0;

   <source lang="html4strict">

<!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>
       

     </fieldset>
     <fieldset id="address">
       <legend>Address</legend>
       <label>Street
         <input id="street" name="street" type="text" />
       </label>
       

       <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>
       

       <label>Country
         <input id="country" name="country" type="text" />
       </label>
       

     </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>
           

         </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>
       

       <input class="submit" type="submit" value="Submit" />
       

     </fieldset>
     
   </form>
 </body>

</html> 

</source>


input margin-bottom: 1.25em;

   <source lang="html4strict">

<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="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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

</source>


input width: 12em

   <source lang="html4strict">

<!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>
       

     </fieldset>
     <fieldset id="address">
       <legend>Address</legend>
       <label>Street
         <input id="street" name="street" type="text" />
       </label>
       

       <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>
       

       <label>Country
         <input id="country" name="country" type="text" />
       </label>
       

     </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>
           

         </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>
       

       <input class="submit" type="submit" value="Submit" />
       

     </fieldset>
     
   </form>
 </body>

</html> 

</source>


input width: 150px;

   <source lang="html4strict">

<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="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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

</source>


input with class name

   <source lang="html4strict">

<!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>

Simple Quiz

  <form action="" method="post">

Are you <input type="radio" value="male" name="sex" class="radioinput"> Male or <input type="radio" value="female" name="sex" class="radioinput"> Female?

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 

  <label for="question1">Who is buried in Grant"s tomb?</label>
  <input type="text" name="question1" id="question1" class="textinput" value="Type answer here" />
  

  <label for="question2">Great Wall of China Located?</label>
  <input type="text" name="question2" id="question2" class="textinput" value="Type answer here" />
  

  <label for="password">What is your password?</label>
  <input type="password" name="password" id="password" class="pwordinput" value="" />
  

  <input name="reset" type="reset" id="reset" value="Reset" />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html> 

</source>


Login form

   <source lang="html4strict">

<?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" />
Password: <input type="password" size="12" name="txtPassword" />
Confirm password: <input type="password" size="12" name="txtPasswordConfirmed" />
<input type="submit" value="Log in" /> </fieldset> </form> </body> </html> 

</source>


Register for our e-mail

   <source lang="html4strict">

<?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>

First name: <input type="text" name="txtFirstName" size="12" />
Last name: <input type="text" name="txtLastName" size="12" />
E-mail address: <input type="text" name="txtEmail" size="12" />

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

</source>


Required field

   <source lang="html4strict">

<?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>

Phone number * Area code: <input type="text" name="txtTelAreaCode" size="5" /> Number: <input type="text" name="txtTelNo" size="10" />

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

</source>


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

   <source lang="html4strict">

<!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="" />

  <label for="pname">Password</label>
  <input type="text" name="pname" id="pname" value="" />

  <label for="recall">Remember you?</label> 
  <input type="checkbox" name="recall" id="recall"  class="checkbox" />

  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html> 

</source>


Set background color, font and border for form control

   <source lang="html4strict">

<!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>

<label for="realname">Name</label>
<input class="formField" type="text" id="realname" name="realname" size="30" />

<label for="email">Email address</label>
<input class="formField" type="text" id="email" name="email" size="30" />

<label for="phone">Telephone</label>
<input class="formField" type="text" id="phone" name="phone" size="30" />

       </fieldset>
   </form>

</body> </html> 

</source>


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

   <source lang="html4strict">

<!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="" />

  <label for="pword">Password</label>
  <input type="text" name="pword" id="pword" value="" /> 
 
    <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html> 

</source>


Set input background color and color

   <source lang="html4strict">

<!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>

Simple Quiz

  <form action="" method="post">

Are you <input type="radio" value="male" name="sex" class="radioinput"> Male or <input type="radio" value="female" name="sex" class="radioinput"> Female?

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 

  <label for="question1">Who is buried in Grant"s tomb?</label>
  <input type="text" name="question1" id="question1" class="textinput" value="Type answer here" />
  

  <label for="question2">Great Wall of China Located?</label>
  <input type="text" name="question2" id="question2" class="textinput" value="Type answer here" />
  

  <label for="password">What is your password?</label>
  <input type="password" name="password" id="password" class="pwordinput" value="" />
  

  <input name="reset" type="reset" id="reset" value="Reset" />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html> 

</source>


Set input control with focus to have yellow background

   <source lang="html4strict">

<!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>

Contact Form

     <form id="regform" name="regform" method="post" action="/regform.php">

Register

         <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" />

Contact Information

         <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" />

     </form>

</body> </html> 

</source>


Set margin for input control

   <source lang="html4strict">

<!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>

<form action="" method="post">

Name: <input type="text" name="name" />
Email: <input type="text" name="email" />
  <input type="submit" value="submit" />

</form>

</body> </html> 

</source>


Set required label field to have bold font and highlight color

   <source lang="html4strict">

<!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">Title</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">Name</label>
   <input type="text" name="fmname" id="fmname" />
   <label for="fmemail" accesskey="e" class="required">
 Email <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">Message 
 <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> 

</source>


Set width and display style for input

   <source lang="html4strict">

<!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>

Contact Form

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</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">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

quid pro quo

</body> </html> 

</source>


Set width and margin for all input controls

   <source lang="html4strict">

<!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="" />

  <label for="pword">Password</label>
  <input type="text" name="pword" id="pword" value="" /> 
 
    <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html> 

</source>


Set width of input control

   <source lang="html4strict">

<!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>

<form action="" id="thisform" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name" />

<label for="email">Email:</label>
<input type="text" id="email" name="email" />

<input type="checkbox" id="remember" name="remember" /> <label for="remember">Remember this info?</label>

<input type="submit" value="submit" />

</form>

</body> </html> 

</source>


Tabbing Order with tabindex

   <source lang="html4strict">

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

 <input type="checkbox" name="chkNumber" value="2" tabindex="7" /> Two

 <input type="checkbox" name="chkNumber" value="3" tabindex="4" /> Three

 <input type="checkbox" name="chkNumber" value="4" tabindex="1" /> Four

 <input type="checkbox" name="chkNumber" value="5" tabindex="9" /> Five

 <input type="checkbox" name="chkNumber" value="6" tabindex="6" /> Six

 <input type="checkbox" name="chkNumber" value="7" tabindex="10" /> Seven 

 <input type="checkbox" name="chkNumber" value="8" tabindex="2" /> Eight

 <input type="checkbox" name="chkNumber" value="9" tabindex="8" /> Nine

 <input type="checkbox" name="chkNumber" value="10" tabindex="5" /> Ten

<input type="submit" value="Submit" /> </form> 

</source>
Источник — «http://www.wbex.ru/index.php?title=HTML/CSS/Form_Style/input&oldid=5597»