HTML/CSS/Form Style/checkbox

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

checkbox Demo

   <source lang="html4strict">

<HTML> <HEAD> <TITLE> - Forms</TITLE> </HEAD> <BODY>

Feedback Form

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

Name: <INPUT NAME = "name" TYPE = "text" SIZE = "25">

Comments: <TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA>

Email Address: <INPUT NAME = "email" TYPE = "password" SIZE = "25">

Things you liked:
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">

<INPUT TYPE = "submit" VALUE = "Submit Your Entries"> <INPUT TYPE = "reset" VALUE = "Clear Your Entries"> </FORM> </BODY> </HTML> 

</source>


checkbox input

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

</head> <body> 

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

Choose your toppings:

  • <label for="top1"><input type="checkbox" id="top1" name="top1" value="pepperoni" checked="checked" /> Pepperoni</label>
  • <label for="top2"><input type="checkbox" id="top2" name="top2" value="xcheese" /> Extra cheese</label>
  • <label for="top3"><input type="checkbox" id="top3" name="top3" value="onions" /> Onions</label>
  • <label for="top4"><input type="checkbox" id="top4" name="top4" value="mushrooms" /> Mushrooms</label>
  • <label for="top5"><input type="checkbox" id="top5" name="top5" value="olives" /> Olives</label> 
 </form>

</body> </html> 

</source>


Set check box width

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

  <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 input check box 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"> .checkbxinput { 

 color: green;
 background-color: green;

} </style> </head> <body>

Simple Quiz

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

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 

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

</body> </html> 

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