HTML/CSS/Form Style/select — различия между версиями

Версия 09:21, 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 &lt;optgroup&gt; 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>

HTML/CSS/Form Style/select — различия между версиями

Версия 09:21, 26 мая 2010

Содержание

Creating groups of options with a disabled option

Drop down select boxes

fieldset to wrap "select" control

input:focus, textarea:focus, select:focus

multiple select

optgroup

Option groups

option tag

Property selector for option

Scolling select boxes

Select boxes with the multiple attribute

Select boxes with the optgroup element

Select control Jump Menu

select tag

select tag presents a drop-down list with choices indicated by the option tags

Set form select event option color and background color

Set form select font size

Set form select option font size

Style for select option

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 08:17, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Версия 09:21, 26 мая 2010 (просмотреть исходный код) (обсуждение) Следующая правка →
(нет различий)