HTML/CSS/Form Style/select — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 08:17, 26 мая 2010
Содержание
- 1 Creating groups of options with a disabled option
- 2 Drop down select boxes
- 3 fieldset to wrap "select" control
- 4 input:focus, textarea:focus, select:focus
- 5 multiple select
- 6 optgroup
- 7 Option groups
- 8 option tag
- 9 Property selector for option
- 10 Scolling select boxes
- 11 Select boxes with the multiple attribute
- 12 Select boxes with the optgroup element
- 13 Select control Jump Menu
- 14 select tag
- 15 select tag presents a drop-down list with choices indicated by the option tags
- 16 Set form select event option color and background color
- 17 Set form select font size
- 18 Set form select option font size
- 19 Style for select option
Creating groups of options with a disabled option
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>Creating groups of options with a disabled option</title>
</head>
<body>
<form action="" method="get" name="frmInfo">
Please select the product you are interested in:<br />
<select name="selInformation">
<option disabled="disabled" value=""> -- Hardware -- </option>
<option value="Desktop">Desktop computers</option>
<option value="Laptop">Laptop computers</option>
<option disabled="disabled" value=""> -- Software -- </option>
<option value="OfficeSoftware">Office software</option>
<option value="Games">Games</option>
<option disabled="disabled" value=""> -- Peripherals -- </option>
<option value="Monitors">Monitors</option>
<option value="InputDevices">Input Devices</option>
<option value="Storage">Storage</option>
</select>
<br /><br /><input type="submit" value="Submit" />
</form>
</body>
</html>
Drop down select boxes
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>Drop down select boxes</title>
</head>
<body>
<form action="http://www.e.ru" method="get" name="frmColors">
<select name="selColor">
<option selected="selected" value="">Select color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</form>
</body>
</html>
fieldset to wrap "select" control
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form style="width: 200px;">
<fieldset><legend>Cheeses of the world</legend>
<p>
<select name="cheesemenu">
<option>Cheddar</option>
<option>Stilton</option>
<option>Brie</option>
</select></p>
<p>
<input type="submit" value="submit" /></p>
</fieldset>
</form>
</body>
</html>
input:focus, textarea:focus, select:focus
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css">
input:focus, textarea:focus, select:focus {
background: white;
}
</style>
<title>Feedback Form - Widgets and What"s-its</title>
</head>
<body>
<h2>Tell us what"s on your mind..</h2>
<div>
<h3>Name:</h3>
<input type="text" size="25" id="name" name="feedback[name]" />
</div>
<div>
<h3>Email:</h3>
<input type="text" size="25" id="email" name="feedback[email]" />
</div>
<div class="spanform">
<h3 class="spanform">Address:</h3>
<textarea name="feedback[address]" id="address" cols="40" rows="3" wrap="virtual"></textarea>
</div>
<div class="spanform">
<h3 class="spanform">Comments:</h3>
<textarea name="feedback[message]" id="message" cols="40" rows="6" wrap="virtual"></textarea>
</div>
</form>
</body>
</html>
multiple select
<!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>A multiline select</title>
</head>
<body>
<form method="post" action="">
<select name="size" multiple="multiple">
<option>E</option>
<option>M</option>
<option>O</option>
</select>
</form>
</body>
</html>
optgroup
<?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">
body {font-family:arial, verdana, sans-serif;}
</style>
</head>
<body>
<form action="" method="post" name="frmSelectStaff">
<select name="selStaff">
<optgroup label="Sales">
<option value="E">E</option>
<option value="S">S</option>
<option value="A">A</option>
<option value="J">J</option>
<option value="V">V</option>
<option value="S">S</option>
</optgroup>
<optgroup label="Marketing">
<option value="B">D</option>
<option value="L">K</option>
<option value="M">M</option>
</optgroup>
<optgroup label="IT">
<option value="A">A</option>
<option value="T">T</option>
</optgroup>
<option lable="Support">
<option value="B">B</option>
<option value="A">A</option>
</option>
</select>
<input type="submit" />
</form>
</body>
</html>
Option groups
<!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>Option groups</title>
</head>
<body>
<form method="post" action="/cgi-bin/formhandler.cgi">
<select name="extra">
<option value="" selected="selected">Choose one extra topping</option>
<optgroup label="Meat">
<option>Pepperoni</option>
<option>Sausage</option>
<option>Canadian Bacon</option>
<option>Anchovies</option>
</optgroup>
<optgroup label="Fruits/Veggies/Fungi">
<option>Onions</option>
<option>Peppers</option>
<option>Olives</option>
<option>Mushrooms</option>
<option>Pineapple</option>
</optgroup>
<optgroup label="Other">
<option>Extra cheese</option>
</optgroup>
</select>
</form>
</body>
</html>
option tag
<!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>The option element</title>
</head>
<body>
<form method="post" action="/formhandler.cgi">
<select name="size">
<option value="" selected="selected">pick a size...</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>
</select>
</form>
</body>
</html>
Property selector for option
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
option[value] {
letter-spacing: 2px;
}
option[value="newspaper"] {
background: orange;
}
option[value="magazine"] {
background: red;
}
option[value="television"] {
background: black;
}
option[value="radio"] {
background: green;
}
option[value="other"] {
background: blue;
}
input[name$="[name]"] {
color: darkred;
}
input[name$="[email]"] {
color: darkblue;
}
textarea[name$="[address]"] {
color: purple;
}
textarea[name$="[message]"] {
color: black;
}
select[name$="[heard]"] {
color: darkgreen;
}
input[name^="feedback"], select[name^="feedback"], textarea[name^="feedback"] {
font-weight: bold;
}
</style>
<title>Feedback Form - Widgets and What"s-its</title>
</head>
<body>
<form>
<div>
<label for="feedback[heard]">How"d you hear about us?</label>
<select name="feedback[heard]">
<option value="">Choose...</option>
<option value="newspaper">Newspaper</option>
<option value="magazine">Magazine</option>
<option value="television">Television</option>
<option value="radio">Radio</option>
<option value="other">Other</option>
</select>
</div>
</form>
</body>
</html>
Scolling select boxes
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>Scolling select boxes</title>
</head>
<body>
<form action="" name="frmDays" method="get">
<select size="4" name="selDay">
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
<option value="Sat">Saturday</option>
<option value="Sun">Sunday</option>
</select>
<br /><br /><input type="submit" value="Submit" />
</form>
</body>
</html>
Select boxes with the multiple attribute
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>Select boxes with the multiple attribute</title>
</head>
<body>
<form action="" method="get" name="frmDays">
Please select more than one day of the week:<br />
<select name="selDays" multiple="multiple">
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
<option value="Sat">Saturday</option>
<option value="Sun">Sunday</option>
</select>
<br /><br /><input type="submit" value="Submit" />
</form>
</body>
</html>
Select boxes with the optgroup element
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>Select boxes with the <optgroup> element</title>
</head>
<body>
<form action="" method="get" name="frmInfo">
Please select the product you are interested in:<br />
<select name="selInformation">
<optgroup label="Hardware">
<option value="Desktop">Desktop computers</option>
<option value="Laptop">Laptop computers</option>
</optgroup>
<optgroup label="Software">
<option value="OfficeSoftware">Office software</option>
<option value="Games">Games</option>
</optgroup>
<optgroup label="Peripherals">
<option value="Monitors">Monitors</option>
<option value="InputDevices">Input Devices</option>
<option value="Storage">Storage</option>
</optgroup>
</select>
<br /><br /><input type="submit" value="Submit" />
</form>
</body>
</html>
Select control Jump Menu
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>unstyled form</title>
<script type="text/JavaScript">
<!--
function myF(targ,selObj,restore){
eval(targ+".location=""+selObj.options[selObj.selectedIndex].value+""");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>
<body>
<form id="form1">
<select name="menu1" onchange="myF("parent",this,0)">
<option>Return to home page</option>
<option>Contact</option>
<option>unnamed1</option>
</select>
</form>
</body>
</html>
select tag
<!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>The select element</title>
</head>
<body>
<form method="post" action="">
<select name="size">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</form>
</body>
</html>
select tag presents a drop-down list with choices indicated by the option tags
<?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>
<label>Rate our site:
<select name = "rating">
<option selected = "selected">Amazing</option>
<option>10</option>
<option>9</option>
<option>8</option>
<option>7</option>
<option>6</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
<option>Awful</option>
</select>
</label>
</p>
<p>
<input type = "submit" value =
"Submit Your Entries" />
<input type = "reset" value = "Clear Your Entries" />
</p>
</form>
</body>
</html>
Set form select event option color and background 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">
option.even {
color: blue;
background-color: red;
}
</style>
</head>
<body>
<select name="Topping_ID" size="6" multiple>
<option value="1">Pepperoni</option>
<option value="2" class="even">Sausage</option>
<option value="3">Green Peppers</option>
<option value="4" class="even">Pineapple</option>
<option value="5">Chicken</option>
<option value="6" class="even">Ham</option>
<option value="7">Olives</option>
<option value="8" class="even">Onions</option>
<option value="9">Red Peppers</option>
</select>
</body>
</html>
Set form select font size
<!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">
select {
font-size: 0.9em;
}
</style>
</head>
<body>
<select name="Topping_ID" size="6" multiple>
<option value="1">Pepperoni</option>
<option value="2" class="even">Sausage</option>
<option value="3">Green Peppers</option>
<option value="4" class="even">Pineapple</option>
<option value="5">Chicken</option>
<option value="6" class="even">Ham</option>
<option value="7">Olives</option>
<option value="8" class="even">Onions</option>
<option value="9">Red Peppers</option>
</select>
</body>
</html>
Set form select option font size
<!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">
option {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<select name="Topping_ID" size="6" multiple>
<option value="1">Pepperoni</option>
<option value="2" class="even">Sausage</option>
<option value="3">Green Peppers</option>
<option value="4" class="even">Pineapple</option>
<option value="5">Chicken</option>
<option value="6" class="even">Ham</option>
<option value="7">Olives</option>
<option value="8" class="even">Onions</option>
<option value="9">Red Peppers</option>
</select>
</body>
</html>
Style for select option
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
option {
color: white;
background-color: blue;
}
.even {
background-color: red;
color: blue;
}
</style>
</head>
<body>
<form action="" method="post" name="myform">
<table>
<tr>
<td>Toppings</td>
<td><select name="Topping_ID" size="6" multiple>
<option value="1">Option 1</option>
<option value="2" class="even">Option 2</option>
<option value="3">Option 3</option>
<option value="4" class="even">Option 4</option>
<option value="5">Option </option>
<option value="6" class="even">Option 5</option>
<option value="7">Olives</option>
<option value="8" class="even">Option 6</option>
<option value="9">Option 9</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>