HTML/CSS/Form Style/checkbox

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

checkbox Demo

 
<HTML>
<HEAD>
<TITLE> - Forms</TITLE>
</HEAD>
<BODY>
<H2>Feedback Form</H2>
<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail">
<INPUT TYPE = "hidden" NAME = "recipient" VALUE = "d@d.ru">
<INPUT TYPE = "hidden" NAME = "subject"   VALUE = "Feedback Form">
<INPUT TYPE = "hidden" NAME = "redirect"  VALUE = "main.html"> 
<P><STRONG>Name: </STRONG>
<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P>
<P><STRONG>Comments:</STRONG> 
<TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA>
</P>
<P><STRONG>Email Address:</STRONG> 
<INPUT NAME = "email" TYPE = "password" SIZE = "25"></P>
<P><STRONG>Things you liked:</STRONG><BR>
Site design 
<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Design">
Links 
<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Links">
Ease of use 
<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Ease">
Images 
<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Images">
Source code 
<INPUT NAME = "things" TYPE = "checkbox" VALUE = "Code">
</P>
<INPUT TYPE = "submit" VALUE = "Submit Your Entries">
<INPUT TYPE = "reset" VALUE = "Clear Your Entries">
</FORM>
</BODY>
</HTML>



checkbox input

 
<!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>Checkboxes</title>
</head>
<body>
  <form method="post" action="">
    <p>Choose your toppings:</p> 
    <ul> 
      <li> 
        <label for="top1"><input type="checkbox" id="top1" name="top1" value="pepperoni" checked="checked" /> Pepperoni</label> 
      </li> 
      <li> 
        <label for="top2"><input type="checkbox" id="top2" name="top2" value="xcheese" /> Extra cheese</label> 
      </li> 
      <li> 
        <label for="top3"><input type="checkbox" id="top3" name="top3" value="onions" /> Onions</label> 
      </li> 
      <li> 
        <label for="top4"><input type="checkbox" id="top4" name="top4" value="mushrooms" /> Mushrooms</label> 
      </li> 
      <li> 
        <label for="top5"><input type="checkbox" id="top5" name="top5" value="olives" /> Olives</label> 
      </li> 
    </ul>
  </form>
</body>
</html>



Set check box width

 
<!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">
.checkbox {
   width: 1em;
}
</style>
</head>
<body>
   <form action="login.php" 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 input check box 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">
.checkbxinput {
  color: green;
  background-color: green;
}
</style>
</head>
<body>
  <h2>Simple Quiz</h2>
   <form action="" method="post">
  <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>
   <input name="reset" type="reset" id="reset" value="Reset" />
   <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
  
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Form_Style/checkbox&oldid=5587»