Home
HTML căn bản

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

March 07, 2023
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


target="_blank">



<!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



target="_blank">

@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é.




Post a Comment