HTML forms'n frames домашни

В този пост ще публикувам моите решения на задачите от лекцията за HTML формите.
Задача 1. Web Form:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>01. WebForm</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<form action="" method="post">
			<table border="1">
				<tr>
					<td><label for="lname">Last Name</label></td>
					<td colspan="3">
					<input type="text" id="lname" placeholder="Kurtev"/>
					</td>
				</tr>
				<tr>
					<td><label for="fname">First Name</label></td>
					<td colspan="3">
					<input type="text" id="fname" placeholder="Teodor"/>
					</td>
				</tr>
				<tr>
					<td><label for="addres">Addres</label></td>
					<td colspan="3">					<textarea id="addres" cols="30" rows="5" placeholder="Some addres here"></textarea></td>
				</tr>
				<tr>
					<td><label for="city">City</label></td>
					<td>
					<input type="text" id="city" placeholder="Sofia"/>
					</td>
					<td><label for="state">State</label></td>
					<td>
					<input type="text" id="state" size="3"/>
					</td>
				</tr>
				<tr>
					<td><label for="zipCode">Zip/Postal Code</label></td>
					<td colspan="3">
					<input type="text" id="zipCode" placeholder="123456"/>
					</td>
				</tr>
				<tr>
					<td><label for="country">Country</label></td>
					<td colspan="3">
					<select name="country" id="country">
						<option value="Bulgaria" selected="selected">Bulgaira</option>
						<option value="Macedonia">Macedonia</option>
						<option value="USA">USA</option>
					</select></td>
				</tr>
				<tr>
					<td><label for="phone">Phone (country code, area code, number)</label></td>
					<td colspan="3">
					<p>
						(+
						<input type="text" id="phone" size="3" placeholder="359"/>
						)
						<input type="text" placeholder="88" size="3"/>
						-
						<input type="number" placeholder="8334343"/>
					</p></td>
				</tr>
				<tr>
					<td><label for="mail">E-mail</label></td>
					<td colspan="3">
					<input type="email" id="mail" placeholder="mymail@somethin.com"/>
					</td>
				</tr>
				<tr>
					<td align="right"><label for="month">Birth date</label></td>
					<td colspan="3"><label for="month">Month</label>
					<input type="text" id="month" placeholder="06" size="2"/>
					<label for="day">Day</label>
					<input type="text" id="day" placeholder="14" size="2"/>
					<label for="year">Year (4 digit)</label>
					<input type="text" id="year" placeholder="1980" size="4">
					</td>
				</tr>
				<td align="right"><label for="gender">Gender</label></td>
				<td colspan="3">
				<select name="gender" id="gender">
					<option value="male" selected="selected">Male</option>
					<option value="female">Female</option>
				</select></td>
				<tr>
					<td><label for="opt1">Starting date</label></td>
					<td colspan="3">
					<input id="opt1" type="radio" value="spr06" name="opt1"/>
					<label for="opt1">Spring 2006</label>
					<input id="opt2" type="radio" value="sum06" name="opt2"/>
					<label for="opt2">Summer 2006</label></td>
				</tr>
				<tr>
					<td><label for="info">Comments/Questions</label></td>
					<td colspan="3"><textarea name="" id="info" cols="30" rows="10" placeholder="Please send me more information about the loding."></textarea></td>
				</tr>
				<tr>
					<td colspan="4">
					<input type="submit" value="Submit" name="submit"/>
					<input type="reset" value="Clear This Form" name="reset"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

Задача 2. Grade Sheet:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>02. GradeSheet</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<table border="1">
			<thead>
				<tr>
					<th rowspan="2">Order</th>
					<th colspan="3">Personal Info</th>
					<th colspan="5">Uni 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>
			<tbody>
				<tr>
					<td>1</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>4</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>5</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>6</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>7</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>8</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>9</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>10</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td colspan="9">
						<form action="" method="post">
							<input type="button" value="Pervious" />
							<a href="">1</a>,
							<a href="">2</a>,
							<a href="">3</a>,
							<a href="">4</a>,
							.....,
							<a href="">10</a>,
							<input type="button" value="Next" />
						</form>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Задача 3. Inventory Table:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>03. ShipingTable</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>
	<body>
		<form action="" method="post">
			<table border="1">
				<thead>
					<tr>
						<th colspan="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna nisi, gravida vitae lacinia ac</th>
					</tr>
					<tr>
						<th><label for="input1">Product ID</label></th>
						<th><label for="input2">Product Name</label></th>
						<th><label for="input3">Unit Price</label>
						<input type="image" src="img/9.png" alt="Test img"/>
						</th>
						<th><label for="input4">Quantity per unit</label></th>
						<th><label for="input5">Unit in stock</label>
						<input type="image" src="img/9.png" alt="Test img"/>
						</th>
						<th><label for="input6">Discontinued</label>
						<input type="image" src="img/9.png" alt="Test img"/>
						</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td colspan="6">
						<input type="image" src="img/fullleft.png" alt="fullback">
						<input type="image" src="img/left.png" alt="back">
						<a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a>...
						<input type="image" src="img/right.png" alt="forward">
						<input type="image" src="img/fullright.png" alt="fullforward">
						Page size:
						<select name="page">
							<option id="value1" value="10" selected="selected">10</option>
							<option id="value2" value="9" >9</option>
							<option id="value3" value="8" >8</option>
						</select></td>
					</tr>
				</tfoot>
				<tbody>
					<tr>
						<td>
						<input type="text" id="input1" />
						</td>
						<td>
						<input type="text" id="input2" />
						</td>
						<td>
						<input type="text" id="input3" />
						</td>
						<td>
						<input type="text" id="input4" />
						</td>
						<td>
						<input type="text" id="input5" />
						</td>
						<td>
						<input type="checkbox" id="input6" />
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox" checked="checked" disabled="disabled"/>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>6</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>7</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox" checked="checked" disabled="disabled"/>
						</td>
					</tr>
					<tr>
						<td>8</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>9</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>10</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
				</tbody>

			</table>
		</form>
	</body>
</html>

Забележка: Може да използвате каквито си картинки си поискате на определените за това места в кода.
Задача 4. Apple Table:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>04. AppleTable</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<form action="" method="post">
		<table border="1">
			<tr>
				<th><a href="">Apple</a><a href="">Toshiba</a><a href="">Lenovo</a><a href="">Dell</a><a href="">Asus</a><a href="">Hacer</a><a href="">HP</a></th>
			</tr>
			<tr>
				<td>
				<table>
					<!-- 2 half table -->
					<tr>
						<td>
						<table border="1">
							<!-- Notebook warper -->
							<tr>
								<td>
								<table>
									<tr>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
									</tr>
									<tr>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
									</tr>
									<tr>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
									</tr>
								</table></td>
							</tr>
						</table></td>
						<td>
						<label for="minprice">
							Min price: 500 USD
						</label>
						<br/>
						<input id="minprice" type="range" min="0" max="100"/>
						<br/>
						<label for="maxprice">
							Max price: 1500 USD
						</label>
						<br/>
						<input id="maxprice" type="range" min="0" max="100"/>
						<br/>
						<label for="minram">
							Min RAM: 4 GB
						</label>
						<br/>
						<input id="minram" type="range" min="0" max="100"/>
						<br/>
						<label for="maxram">
							Min price: 16 GB
						</label>
						<br/>
						<input id="maxram" type="range" min="0" max="100"/>
						<br/>
						</td>
					</tr>
				</table></td>
			</tr>
		</table>
		</form>
	</body>
</html>

Advertisements

6 thoughts on “HTML forms'n frames домашни

  1. Не знам дали нарочно, или без да искаш, но в третата задача целия ти код е между хеда и бодито, а в бодито няма нищо. Доколкото знам кода трябва да ни е в бодито, ако умишлено си го направил се извинявам, че те занимавам. Иначе браво за блога, а и за старанието в решаването на домашните и участието във телерикския форум.

    • Не е нарочно 🙂 . Забеляах грешката доста отдвна, когато пуснах кода през валидатора, но просто не ми останало време да я оправя тук. След секудна ще го коригирам 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s