Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
Tuesday, March 31, 2015

Code hiện thị khung đăng nhập thông tin có ràng buộc điều kiện nhập liệu nhập vào - HTML căn bản

FILE HTML: INDEX.HTML






<!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>Bài tập tự làm</title>
<link rel="stylesheet" href="template.css" />
<script language="javascript">

function Test()
{

user=document.SignIn.user.value;
pass=document.SignIn.pass.value;
repass=document.SignIn.repass.value;
email=document.SignIn.email.value;
name=document.SignIn.name.value;

function ValidateEmail(email){

    var emailReg = /[\w.]*[\w]@[\w][\w.]*\.[\w][\w]*/ig;
    var regex = new RegExp(emailReg);
return regex.test(email); // tra ve TRUE neu so khop
}

var result = ValidateEmail(email);


if(user.length<8)
{
alert(" Tên đăng nhập phải chứa ít nhất 8 ký tự!");
document.SignIn.user.focus();
}
else if(pass.length==0)
{
alert(" Mật khẩu không được bỏ trống!");
document.SignIn.pass.focus();
}
else if(pass!=repass)
{
alert(" Mật khẩu phải trùng khớp nhau!");
document.SignIn.pass.focus();
}
else if(result==false)
{
alert(" Sai định dạng mail!");
document.SignIn.email.focus();
}
else if(name.length==0)
{
alert("Họ tên không được bỏ trống!");
document.SignIn.name.focus();
}

else
{
document.write("Ghi dữ liệu thành công!");
}


}

</script>



</head>
<body>``
<h1 style="text-align:center; color:red">ĐĂNG KÝ THÔNG TIN CÁ NHÂN</h1>
<form name="SignIn" method="post" action="">

<p class="bodyleft">Tài khoản:
<input name="user" class="bodyright" type="text" value="User name" size="20" />
</p>


<p class="bodyleft">Mật khẩu:
<input name="pass" class="bodyright" type="password" value="password" size="20" />
</p>  
   
<p class="bodyleft">Nhập lại mật khẩu:
<input name="repass" class="bodyright" type="password" value="password" size="20" />
</p>  
 

<p class="bodyleft">Email:
<input name="email" class="bodyright" type="text" value="example@gmail.com" size="20" />
</p>

<p class="bodyleft">Họ tên:
<input name="name" class="bodyright" type="text" value="Nguyễn Văn A" size="20" />
</p>
 
<p class="bodyleft">Giới tính:
<input name="sex" style="margin-left: 150px" type="radio" value="1" /> Nam
<input name="sex" style="margin-left: 50px" type="radio" value="2" /> Nữ
</p>

<p class="bodyleft">Quê quán:
<select class="bodyright2" name="address">
<option value="1">Cần Thơ</option>
    <option value="2">Vĩnh Long</option>
    <option value="3">Trà Vinh</option>
    <option value="4">Bến Tre</option>
    </select>
    </p>

<p class="bodyleft">Sở thích:
<input style="margin-left:150px" name="dienanh" type="checkbox" value="1" />Điện ảnh
<input style="margin-left:50px" name="amnhac" type="checkbox" value="1" />Âm nhạc
<input style="margin-left:50px" name="thethao" type="checkbox" value="1" />Thể thao
</p>

<p class="bodyleft">Ghi chú cá nhân:
<textarea class="bodyright" name="pnnote" cols="50" rows="5">Cá nhân tôi...</textarea></p>


<p>
<input style=" margin-top:60px; margin-left:265px; font-weight:bold; color:red; font-size:16px;" name="action" type="button" value="Lưu" onclick="Test()" />

<input style="margin-left: 20px; margin-top:60px;font-weight:bold; color:violet; font-size:16px;" name="reset" type="reset" value="Nhập lại dữ liệu" />

</p>
</form>




</body>
</html>





FILE CSS: template.css




@charset "utf-8";
/* CSS Document */
.bodyleft
{
left: 150px;
margin-left:50px;
color: blue;
font-weight:bold;


}

.bodyright
{
position:absolute;
left:275px;
font-style:italic;
color:#00F;
}

.bodyright2
{
position:absolute;
left:275px;
font-weight:bold;
color: #00F;
}
ae

Lưu ý: phải đặt đúng tên file và cùng thư mục nhé.




0 comments:

Post a Comment

Popular Posts