Untitled

<!DOCTYPE html>
<head>
	<script>
		function check() {
			var value = document.forms['form']['y'].value;
			if (isNaN(value) || value < -5 || value > 5)
			{
				highlight();
				return false;
			}
			return true;
		}
		function highlight() {
			var inputbox = document.getElementById('yInput');
			var alertText = document.getElementById('alertText');
			inputbox.className = "alerted";
			alertText.className = "alertText";
		}
		function unhighlight() {
			var inputbox = document.getElementById('yInput');
			var alertText = document.getElementById('alertText');
			inputbox.className = "";
			alertText.className = "invisible";
		}
	</script>
	<style>
		.signature {
			text-align: right;
			padding: 10px;
			color: #222;
			font: monospace;
			font-size: 12px;
		}
		p {
			font: sans-serif;
			font-size: 14px;
			font-weight: 500;
		}
		select {
			width: 100%;
			height: 100%;
			border-color: rgb(51, 153, 255);
			border-width: 3px;
			border-radius: 4px;
		}
		input[type="text"].alerted {
			border-width: 3px !important;
			border-color: red !important;
			padding: 0px;
		}
		input[type="text"] {
			border-width: 2px;
			border-color: rgb(51, 153, 255);
			border-radius: 4px;
		}
		.invisible {
			display: none !important;
		}
		p.alertText {
			color: red !important;
		}
		input[type="radio"] {
			display: none;
		}
		label {
			height: 100%;
		}
		label > p {
			height: 100%;
			width: 100%;
			text-align: center;
		}
		label:hover > p {
			background-color: #eee;
		}
		input:checked ~ p {
			color: white;
			background-color: rgb(51, 153, 255);
		}
		input[type="submit"] {
			border: none;
			width: 100%;
			color: white;
			background-color: rgb(60, 170, 255);
		}
		input[type="submit"]:hover {
			background-color: rgb(51, 153, 255);
		}
	</style>
</head>
<body>
<table width="100%">
	<tr valign="center">
		<td>
			<h1>Попадание точки в область</h1>
		</td>
		<td class="signature">
			Лабутина Ксения<br>
			P3213<br>
			213008 вариант
	</tr>
	<tr><td><form name="form" action="script.php" method="post" onsubmit="return check()">
		<table>
			<tr><td colspan="2"><img src="areas1.png"></td></tr>
		<tr>
			<td valign="center"><p> x: </p></td>
			<td valign="center"><select name="x">
			<option selected value="-4">-4</option>
			<option value="-3">-3</option>
			<option value="-2">-2</option>
			<option value="-1">-1</option>
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">-4</option>
			</select></td>
		</tr>
		<tr>
		<td valign="center"><p> y: </p></td><td><input id="yInput" type="text" name="y" onfocus="unhighlight()"></td><td><p id="alertText" class="invisible">y должно быть числом от -5 до 5</div>
		</tr>
		<tr><td><p> r: </p></td><td>
			<table width="100%" cellpadding="0" cellspacing="0" class = "select"><tr>
		<td width="20%"><label><input type="radio" name="r" value="1" checked><p>1</p></label></td>
		<td width="20%"><label><input type="radio" name="r" value="1.5"><p>1.5</p></label></td>
		<td width="20%"><label><input type="radio" name="r" value="2"><p>2</p></label></td>
		<td width="20%"><label><input type="radio" name="r" value="2.5"><p>2.5</p></label></td>
		<td width="20%"><label><input type="radio" name="r" value="3"><p>3</p></label></td>
		</tr></table></td></tr>
		<tr><td colspan="2">
		<input type="submit" name="submit" value="тык"></td></tr>
		</table>

	</form></td></tr>
</table>
</body>