-3
아래 코드는 내 레이블이 현재 내 필드의 동작과 일치하는 위치로 이동해야합니다. 아무것도 입력하지 않으면 필드가 빨간색 배경으로 변경됩니다. 초점이 맞으면 흰색으로 돌아갑니다. 필드의 색상과 일치하고 동일한 동작을 일치시키기 위해 레이블의 글꼴 색상이 필요합니다.레이블 동작 일치 입력 필드
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab06 - Form Validation</title>
<script type="text/javascript" charset="utf-8">
function passcheck(){
var pw1 = document.forms[ 0 ].password.value;
var pw2 = document.forms[ 0 ].passcomf.value;
if (pw1 != pw2) {
alert ("You did not enter the same new password twice. Please re-enter your password.");
return false;
}else{
return true;
}
}
function validate() {
var errors = new Array();
for(var i = 0; i < document.forms[ 0 ].elements.length ; i++){
if(document.forms[ 0 ].elements[ i ].type == "text") {
if(document.forms[ 0 ].elements[ i ].value == ""){
errors.push("The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n");
document.forms[ 0 ].elements[ i ].className = "in_error";
}
}
if(document.forms[ 0 ].elements[ i ].type == "select-one") {
if(document.forms[ 0 ].elements[ i ].selectedIndex == 0) {
errors.push("The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
document.forms[ 0 ].elements[ i ].className = "in_error";
}
}
if(document.forms[ 0 ].elements[ i ].type == "select-one") {
if(document.forms[ 0 ].elements[ i ].selectedIndex == 2) {
errors.push("The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
document.forms[ 0 ].elements[ i ].className = "in_error";
}
}
}
if(errors.length == 0) {
return true;
} else {
clear_errors();
show_errors(errors);
return false;
}
}
function clear_errors(){
var div = document.getElementById("errors");
while(div.hasChildNodes()){
div.removeChild(div.firstChild);
}
}
function show_errors (errors) {
var div = document.getElementById("errors");
for(var i = 0; i < errors.length; i++){
var error = document.createTextNode(errors[ i ]);
var p = document.createElement("p");
p.appendChild(error);
div.appendChild(p);
}
}
window.onload = function() {
document.forms[ 0 ].onsubmit = validate;
}
</script>
<style type="text/css" media="screen">
#errors {
color: #F00;
}
.in_error {
background-color: #F00;
}
input:focus {
background-color: #FFF;
}
select:focus {
background-color: #FFF;
}
</style>
</head>
<body>
<h1>Form Validation</h1>
<div id="errors"></div>
<form action="" method="post" onsubmit="return passcheck()">
<p>
<label for="firstname" id="labelfirstname">First name:</label>
<input type="text" name="First name" value="" id="firstname" />
</p>
<p>
<label for="lastname" id="labellastname">Last name:</label>
<input type="text" name="Last name" value="" id="lastname"/>
</p>
<p>
<label for="middlei" id="labelmiddlei">Middle initial:</label>
<input type="text" name="Middle initial" value="" id="middlei"/>
</p>
<p>
<label for="address" id="labeladdress">Street address:</label>
<input type="text" name="Street address" value="" id="address"/>
</p>
<p>
<label for="city" id="labelcity">City:</label>
<input type="text" name="City" value="" id="city"/>
</p>
<p>
<label for="State" id="labelstate">State:</label>
<input type="text" name="State" value="" id="state"/>
</p>
<p>
<label for="zipcode" id="idzipcode">Zipcode:</label>
<input type="text" name="Zipcode" value="" id="zipcode"/>
</p>
<p>
<label for="username" id="labelusername">Username:</label>
<input type="text" name="Username" value="" id="username"/>
</p>
<p>
<label for="password" id="labelpassword">Password:</label>
<input type="text" name="Password" value="" id="password"/>
</p>
<p>
<label for="passcomf" id="labelpasscomf">Password comfirmation:</label>
<input type="text" name="Password comfirmation" value="" id="passcomf"/>
</p>
<p>
<label for="agreement" id="labelagreement">User Agreement</label>
<select name="User Agreement" id="agreement">
<option></option>
<option>Yes, I agree!</option>
<option>No, I do not agree!</option>
</select>
</p>
<p><input type="submit" value="Register →" onclick="return passcheck(); return true;"/></p>
</form>
</body>
</html>