HTML – Forms

Решения на задачите от лекция “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>

Оставете коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *