HTML/CSS/Form Style/radio

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

Creates a radio button

   <source lang="html4strict">

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

Feedback Form

<FORM METHOD = "POST" ACTION = "">

How did you get to our site?:
Search engine <INPUT NAME = "how get to site" TYPE = "radio" VALUE = "search engine" CHECKED> Links from another site <INPUT NAME = "how get to site" TYPE = "radio" VALUE = "link"> Deitel.ru Web site <INPUT NAME = "how get to site" TYPE = "radio" VALUE = "deitel.ru"> Reference in a book <INPUT NAME = "how get to site" TYPE = "radio" VALUE = "book"> Other <INPUT NAME = "how get to site" TYPE = "radio" VALUE = "other">

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

</source>


input type = "radio" creates a radio button

   <source lang="html4strict">

<?xml version = "1.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"> 

  <body>
     <form method = "post" action = "/cgi-bin/formmail">

How did you get to our site?:
<label>Search engine <input name = "howtosite" type = "radio" value = "search engine" checked = "checked" /> </label> <label>Links from another site <input name = "howtosite" type = "radio" value = "link" /></label> <label>Deitel.ru Web site <input name = "howtosite" type = "radio" value = "deitel.ru" /></label> <label>Reference in a book <input name = "howtosite" type = "radio" value = "book" /></label> <label>Other <input name = "howtosite" type = "radio" value = "other" /></label> 

     </form>
  </body>

</html> 

</source>


Labelling Radio Buttons

   <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>Labelling Radio Buttons</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;

} label:hover { 

 cursor: hand;

} </style> 

 </head>
 <body>

<form name="frmExample" action="" method="post"> <fieldset> <legend>How did you hear about us?</legend> 

 <input type="radio" id="referrer1" name="radReferrer" value="M" />
    <label for="referrer1" >W</label>

 <input type="radio" id="referrer2" name="radReferrer" value="G" />
    <label for="referrer2" >G</label>

 <input type="radio" id="referrer3" name="radReferrer" value="M" />
    <label for="referrer3" >M</label>

 <input type="radio" id="referrer4" name="radReferrer" value="Other" />
    <label for="referrer4" >Other</label>  
 <input type="text" name="txtOther" size="12" />

<input type="submit" value="Submit" /> </fieldset> </form> </body> </html> 

</source>


radio button

   <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>Radio buttons</title>

</head> <body> 

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

Choose the size of your pizza:

  • <label for="small"> <input type="radio" name="size" id="small" value="small" /> Small </label>
  • <label for="medium"> <input type="radio" name="size" id="medium" value="medium" /> Medium </label>
  • <label for="large"> <input type="radio" name="size" id="large" value="large" /> Large </label> 
 </form>

</body> </html> 

</source>


Set input radio button 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"> .radioinput { 

color: green;
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?

This is a test? <input type="checkbox" name="" value="l" class="checkbxinput">P <input type="checkbox" name="" value="mushrooms" class="checkbxinput">M <input type="checkbox" name="" value="pineapple" class="checkbxinput">A 

 </form>

</body> </html> 

</source>


Use table to layout the radio buttons

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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> <title>Form Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> td { 

 width: 130px;

}</style> </head> <body> <form action="" method="post" name="frmSurvey">

<label for="q37">Strongly agree</label> <label for="q34">Neutral</label> <label for="q31">Strongly disagree</label>
<input type="radio" name="radQ3" value="7" id="q7" title="strongly agree" /> <input type="radio" name="radQ3" value="6" id="q6" title="agree" /> <input type="radio" name="radQ3" value="5" id="q5" title="somewhat agree" /> <input type="radio" name="radQ3" value="4" id="q4" title="neutral" /> <input type="radio" name="radQ3" value="3" id="q3" title="somewhat disagree" /> <input type="radio" name="radQ3" value="2" id="q2" title="disagree" /> <input type="radio" name="radQ3" value="1" id="q1" title="strongly disagree" />

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

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