HTML/CSS/Form Style/radio

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

Creates a radio button

 
<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<BODY>
<H2>Feedback Form</H2>
<FORM METHOD = "POST" ACTION = "">
<P><STRONG>How did you get to our site?:</STRONG><BR>
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">
</P>
<INPUT TYPE = "submit" VALUE = "Submit Your Entries"> 
<INPUT TYPE = "reset" VALUE = "Clear Your Entries">
</FORM>
</BODY>
</HTML>



input type = "radio" creates a radio button

 
<?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">
         <p>
            <strong>How did you get to our site?:</strong><br />
            <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>
       
         </p>

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



Labelling Radio Buttons

 
<?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><br />
  <input type="radio" id="referrer2" name="radReferrer" value="G" />
     <label for="referrer2" >G</label><br />
  <input type="radio" id="referrer3" name="radReferrer" value="M" />
     <label for="referrer3" >M</label><br />
  <input type="radio" id="referrer4" name="radReferrer" value="Other" />
     <label for="referrer4" >Other</label>&nbsp;&nbsp;
  <input type="text" name="txtOther" size="12" /><br />
<input type="submit" value="Submit" />
</fieldset>
</form>
</body>
</html>



radio button

 
<!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="">
    <p>Choose the size of your pizza:</p> 
    <ul> 
      <li> 
        <label for="small"> 
          <input type="radio" name="size" id="small" value="small" /> Small 
        </label> 
      </li> 
      <li> 
        <label for="medium"> 
          <input type="radio" name="size" id="medium" value="medium" /> Medium 
        </label> 
      </li> 
      <li> 
        <label for="large"> 
          <input type="radio" name="size" id="large" value="large" /> Large 
        </label> 
      </li> 
    </ul>
  </form>

</body>
</html>



Set input radio button 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">
.radioinput {
 color: green;
 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>
   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
   </p>
  </form>
  
</body>
</html>



Use table to layout the radio buttons

 

<?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">
  <table>
    <tr>
      <td><label for="q37">Strongly agree</label></td>
      <td></td>
      <td></td>
      <td><label for="q34">Neutral</label></td>
      <td></td>
      <td></td>
      <td><label for="q31">Strongly disagree</label></td>
    </tr>
    <tr>
     <td><input type="radio" name="radQ3" value="7" id="q7" 
                 title="strongly agree" /></td>
      <td><input type="radio" name="radQ3" value="6" id="q6" 
                 title="agree" /></td>
      <td><input type="radio" name="radQ3" value="5" id="q5" 
                 title="somewhat agree" /></td>
      <td><input type="radio" name="radQ3" value="4" id="q4"
                 title="neutral" /></td>
      <td><input type="radio" name="radQ3" value="3" id="q3"
                 title="somewhat disagree" /></td>
      <td><input type="radio" name="radQ3" value="2" id="q2"
                 title="disagree" /></td>
      <td><input type="radio" name="radQ3" value="1" id="q1"
                 title="strongly disagree" /></td>
    </tr>
  </table>
</form>
</body>
</html>