HTML/CSS/Form Style/radio — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:17, 26 мая 2010
Содержание
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>
<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>