Решения на задачите от лекция “Forms and frames”
Задача 1
<!DOCTYPE html>
<html>
<head>
<title>Web Form</title>
<meta charset="UTF-8">
<style>
td.leftcolumn
{
text-align:right;
}
td.center
{
text-align:center;
background-color:#99FFFF;
}
table,td
{
border:1px solid;
}
#gender
{
width:70px;
}
#country
{
width:150px;
}
#firstColumn
{
width:100px;
}
</style>
</head>
<body>
<section>
<form action="#" method="POST">
<table cellpadding="3" cellspacing="0">
<colgroup>
<col span="1" id="firstColumn">
<col span="3">
</colgroup>
<tfoot>
<tr>
<td colspan="4" class="center">
<input type="submit" name="Email" value="Submit"/>
<input type="reset" name="Reset" value="Clear this form"/>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="leftcolumn">
<strong>
Last name
</strong>
</td>
<td colspan="3">
<input type="text" name="Last name" value="Nakov" size="45"/>
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
First name
</strong>
</td>
<td colspan="3">
<input type="text" name="First name" value="Svetlin" size="45"/>
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
Address
</strong>
</td>
<td colspan="3">
<textarea name="Address" rows="4" cols="30">17 Hristo Botev Str. Floor 3, Ap. 12</textarea>
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
City
</strong>
</td>
<td>
<input type="text" name="City" value="Kaspichan" size="30"/>
</td>
<td>
<strong>
State
</strong>
</td>
<td>
<input type="text" name="State" size="4"/>
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
Zip/Postal Code
</strong>
</td>
<td colspan="3">
<input type="text" name="Zip/Postal code" value="9325" size="10"/>
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
Country
</strong>
</td>
<td colspan="3">
<select name="Country" id="country">
<option value="Value 1" selected="selected">Bulgaria</option>
<option value="Value 2">Greece</option>
<option value="Value 3">Romania</option>
</select>
</td>
</tr>
<tr>
<td id="Phone" class="leftcolumn">
<strong>
Phone(country code, area code, number)
</strong>
</td>
<td colspan="3">
(+
<input type="text" name="Country code" value="359" size="4"/>
)
<input type="text" name="Area code" value="88" size="4"/>
-
<input type="text" name="Number" value="8334343" size="12"/>
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
Email
</strong>
</td>
<td colspan="3">
<input type="text" name="Email" value="nakov@kaspichan.org" size="45"/>
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
Birth date
</strong>
</td>
<td colspan="3">
Month
<input type="text" name="Month" value="06" size="1"/>
Day
<input type="text" name="Day" value="14" size="1"/>
Year (4 digit)
<input type="text" name="Year" value="1980" size="2"/>
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
Gender
</strong>
</td>
<td colspan="3">
<select name="Gender" id="gender">
<option value="Value 1" selected="selected">Male</option>
<option value="Value 2">Female</option>
</select>
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
Starting date
</strong>
</td>
<td colspan="3">
<input type="radio" name="Starting date" value="1"/>
Spring 2006
<input type="radio" name="Starting date" value="2"/>
Summer 2006
</td>
</tr>
<tr>
<td class="leftcolumn">
<strong>
Comments/Questions
</strong>
</td>
<td colspan="3">
<textarea name="Questions" rows="4" cols="30">Please send me more information about the lodging.</textarea>
</td>
</tr>
</tbody>
</table>
</form>
</section>
</body>
</html>
Задача 2
<!DOCTYPE html>
<html>
<head>
<title>Student table</title>
<meta charset="UTF-8">
<style>
td.total
{
text-align:center;
font-weight:bold;
}
input
{
-webkit-border-radius: 5px;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="0" border="1">
<thead>
<tr>
<th rowspan="2">
Order
</th>
<th colspan="3">
Pesonal Info
</th>
<th colspan="5">
University marks
</th>
</tr>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Faculty Number
</th>
<th>
English
</th>
<th>
Math
</th>
<th>
Biology
</th>
<th>
Physics
</th>
<th>
Total
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="9">
<form action="#" method="POST">
<input type="button" name="Previous" value="Previous"/>
<a href="#">1</a>
,
<a href="#">2</a>
,
<a href="#">3</a>
,
<a href="#">4</a>
,...,
<a href="#">10</a>
<input type="button" name="Next" value="Next"/>
</form>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Pesho
</td>
<td>
Yordanov
</td>
<td>
123456
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td class="total">
3.50
</td>
</tr>
</tbody>
</table>
</body>
</html>
Задача 3
<!DOCTYPE html>
<html>
<head>
<title>Grid component</title>
<meta charset="UTF-8">
<style>
a
{
text-decoration : none;
color : #000000;
letter-spacing:3px;
}
th
{
font-weight:normal;
text-align:left;
}
input.upperTextInput
{
vertical-align:top;
}
#lowerForm
{
border-right:#ffffff;
}
#10
{
letter-spacing:0px; !important
}
thead
{
background-color:#E0E0E0;
}
tfoot
{
background-color:#E0E0E0;
}
#select
{
width:50px;
vertical-align:top;
}
</style>
<script>
function GetFocus(x)
{
document.getElementById(x).focus();
}
function LoseFocus(x)
{
document.getElementById(x).blur();
}
</script>
</head>
<body>
<table cellpadding="5" cellspacing="0" border="1">
<colgroup>
<col>
<col style="width:20em">
<col style="width:10em">
<col style="width:10em">
<col style="width:12em">
<col>
</colgroup>
<thead>
<tr>
<th colspan="6">
Drag a column header and drop it here to group by the column
</th>
</tr>
<tr>
<th>
ProductID
</th>
<th>
Product name
</th>
<th>
Unit price
</th>
<th>
Quantity per unit
</th>
<th>
Units in stock
</th>
<th>
Discontinued
</th>
</tr>
<tr>
<th>
<form action="#" method="POST">
<input type="text" name="Product ID" size="4"/>
</form>
</th>
<th>
<form action="#" method="POST">
<input type="text" name="Product name" size="20"/>
</form>
</th>
<th>
<form action="#" method="POST">
<input type="text" name="Unit price" size="10" class="upperTextInput"/>
<input type="image" src="Filter.png" name="Filter unit price" alt="Filter"/>
</form>
</th>
<th>
<form action="#" method="POST">
<input type="text" name="Quantity per unit" size="15"/>
</form>
</th>
<th>
<form action="#" method="POST">
<input type="text" name="Units in stock" size="10" class="upperTextInput"/>
<input type="image" src="Filter.png" name="Filter units in stock" alt="Filter"/>
</form>
</th>
<th>
<form action="#" method="POST">
<input type="checkbox" name="Discontinued"/>
<input type="image" src="Filter.png" name="Filter discontinued" alt="Filter"/>
</form>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2" id="lowerForm">
<form action="#" method="POST">
<input type="image" src="backward.png" name="backward" alt="backward"/>
<input type="image" src="back.png" name="back" alt="back"/>
<a href="#" id="1" onmouseover="GetFocus(1)" onmouseout="LoseFocus(1)">1</a>
<a href="#" id="2" onmouseover="GetFocus(2)" onmouseout="LoseFocus(2)">2</a>
<a href="#" id="3" onmouseover="GetFocus(3)" onmouseout="LoseFocus(3)">3</a>
<a href="#" id="4" onmouseover="GetFocus(4)" onmouseout="LoseFocus(4)">4</a>
<a href="#" id="5" onmouseover="GetFocus(5)" onmouseout="LoseFocus(5)">5</a>
<a href="#" id="6" onmouseover="GetFocus(6)" onmouseout="LoseFocus(6)">6</a>
<a href="#" id="7" onmouseover="GetFocus(7)" onmouseout="LoseFocus(7)">7</a>
<a href="#" id="8" onmouseover="GetFocus(8)" onmouseout="LoseFocus(8)">8</a>
<a href="#" id="9" onmouseover="GetFocus(9)" onmouseout="LoseFocus(9)">9</a>
<a href="#" id="10" onmouseover="GetFocus(10)" onmouseout="LoseFocus(10)" style="letter-spacing:0px; !important">10</a>
...
<input type="image" src="front.png" name="front" alt="front"/>
<input type="image" src="forward.png" name="forward" alt="forward"/>
</form>
</td>
<td style="text-align:left; border-right:#ffffff ; border-left:#ffffff">
<form action="#" method="POST">
Page size:
<select name="Page size" id="select">
<option value="Value 10" selected="selected">10</option>
<option value="Value 20">20</option>
<option value="Value 50">50</option>
</select>
</form>
</td>
<td colspan="3" style="text-align:right; border-left:#ffffff">
335104 items in 33511 pages
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
1
</td>
<td>
Chai
</td>
<td>
$18.00
</td>
<td>
10 boxes x 10 bags
</td>
<td>
39
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 1"/>
</form>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Chang
</td>
<td>
$19.00
</td>
<td>
24-12 oz bottles
</td>
<td>
17
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 2"/>
</form>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Aniseed Syrup
</td>
<td>
$10.00
</td>
<td>
12 - 550 ml bottles
</td>
<td>
13
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 3"/>
</form>
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Chef Anton's Cajun Seasoning
</td>
<td>
$22.00
</td>
<td>
48 - 6 oz jars
</td>
<td>
53
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 4"/>
</form>
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Chef Anton's Gumbo Mix
</td>
<td>
$21.53
</td>
<td>
36 boxes
</td>
<td>
0
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 5"/>
</form>
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Grandma's Boysendberry Spread
</td>
<td>
$25.00
</td>
<td>
12 - 8 oz jars
</td>
<td>
120
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 6"/>
</form>
</td>
</tr>
<tr>
<td>
7
</td>
<td>
Uncle Bob's Organic Dried Pears
</td>
<td>
$30.00
</td>
<td>
12 - 1 lb pcgs.
</td>
<td>
15
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 7"/>
</form>
</td>
</tr>
<tr>
<td>
8
</td>
<td>
Northwoods Cranberry Sauce
</td>
<td>
$40.00
</td>
<td>
12 - 12 oz jars
</td>
<td>
6
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 8"/>
</form>
</td>
</tr>
<tr>
<td>
9
</td>
<td>
Mishi Cobe Niku
</td>
<td>
$97.00
</td>
<td>
18 - 500 g pcgs.
</td>
<td>
29
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 9"/>
</form>
</td>
</tr>
<tr>
<td>
10
</td>
<td>
Ikura
</td>
<td>
$31.00
</td>
<td>
12 - 200 ml jars
</td>
<td>
31
</td>
<td>
<form action="#" method="POST">
<input type="checkbox" name="position 10"/>
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Задача 4
<!DOCTYPE html>
<html>
<head>
<title>Laptop store</title>
<meta charset="UTF-8">
<style>
body
{
font-family:sans-serif;
}
section
{
font-size:150%
}
aside
{
font-size:150%
}
a
{
color:#0099FF;
}
#MainTable
{
border-style:solid;
border-left-width:2px;
border-top-width:2px;
border-bottom-width:2px;
border-right-width:2px;
}
#rangeform
{
position:absolute;
left:800px;
top:250px;
}
input
{
width: 300px;
}
nav
{
font-size:200%;
text-align:center;
}
td.HDD
{
height:5em;
vertical-align:bottom;
}
td.RAM
{
height:2em;
}
td.Prise
{
text-align:center;
}
</style>
</head>
<body>
<nav>
<a href="#">Apple</a>
<a href="#">Toshiba</a>
<a href="#">Lenovo</a>
<a href="#">Dell</a>
<a href="#">Asus</a>
<a href="#">Haser</a>
<a href="#">HP</a>
<hr/>
</nav>
<section>
<table cellpadding="4" cellspacing="0" id="MainTable">
<tbody>
<tr>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="2">
<img src="laptop.jpg" alt="MacBook"/>
</td>
<td class="HDD">
64GB SSD
</td>
</tr>
<tr>
<td class="RAM">
2GB DDR
</td>
</tr>
<tr>
<td class="Price">
1300 USD
</td>
<td>
IntelCore I5
</td>
</tr>
</tbody>
</table>
</fieldset>
</td>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="2">
<img src="laptop.jpg" alt="MacBook"/>
</td>
<td class="HDD">
64GB SSD
</td>
</tr>
<tr>
<td class="RAM">
2GB DDR
</td>
</tr>
<tr>
<td class="Price">
1300 USD
</td>
<td>
IntelCore I5
</td>
</tr>
</tbody>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="2">
<img src="laptop.jpg" alt="MacBook"/>
</td>
<td class="HDD">
64GB SSD
</td>
</tr>
<tr>
<td class="RAM">
2GB DDR
</td>
</tr>
<tr>
<td class="Price">
1300 USD
</td>
<td>
IntelCore I5
</td>
</tr>
</tbody>
</table>
</fieldset>
</td>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="2">
<img src="laptop.jpg" alt="MacBook"/>
</td>
<td class="HDD">
64GB SSD
</td>
</tr>
<tr>
<td class="RAM">
2GB DDR
</td>
</tr>
<tr>
<td class="Price">
1300 USD
</td>
<td>
IntelCore I5
</td>
</tr>
</tbody>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="2">
<img src="laptop.jpg" alt="MacBook"/>
</td>
<td class="HDD">
64GB SSD
</td>
</tr>
<tr>
<td class="RAM">
2GB DDR
</td>
</tr>
<tr>
<td class="Price">
1300 USD
</td>
<td>
IntelCore I5
</td>
</tr>
</tbody>
</table>
</fieldset>
</td>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="2">
<img src="laptop.jpg" alt="MacBook"/>
</td>
<td class="HDD">
64GB SSD
</td>
</tr>
<tr>
<td class="RAM">
2GB DDR
</td>
</tr>
<tr>
<td class="Price">
1300 USD
</td>
<td>
IntelCore I5
</td>
</tr>
</tbody>
</table>
</fieldset>
</td>
</tr>
</tbody>
</table>
</section>
<aside>
<form action="#" method="POST">
<table cellpadding="10" id="rangeform">
<tbody>
<tr>
<td>
Min price:
</td>
<td>
500 USD
</td>
</tr>
<tr>
<td colspan="2">
<input type="range" name="MinPrice"/>
</td>
</tr>
<tr>
<td>
Max price:
</td>
<td>
1500 USD
</td>
</tr>
<tr>
<td colspan="2">
<input type="range" name="MaxPrice"/>
</td>
</tr>
<tr>
<td>
Min RAM:
</td>
<td>
4 GB
</td>
</tr>
<tr>
<td colspan="2">
<input type="range" name="MinRAM"/>
</td>
</tr>
<tr>
<td>
Max RAM:
</td>
<td>
16 GB
</td>
</tr>
<tr>
<td colspan="2">
<input type="range" name="MaxRAM"/>
</td>
</tr>
</tbody>
</table>
</form>
</aside>
</body>
</html>