ต้วอย่างหน้า LOGIN สวยๆจ้า
ต้วอย่างหน้า LOGIN สวยๆจ้า
วันนี้ โปรแกรมเมอร์กากกาก จะมาแสดงตัวอย่างหน้า LOGING ด้วย CSS แบบสวยๆกัน ก่อนอื่นต้องไปไปโหลด CSS ที่เรียกว่า bootstrap ก่อนนะครับ โดยเข้าไปที่ Google แล้วพิมพ์ว่า bootstrap ก็จะมีให้ดาวน์โหลดเลยนะครับ เราลองมาดู โค้ดกันเลยดีกว่าครับ
<!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" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />//CSS ที่เราไปโหลดมานะครับ การเรียกใช้
<title>LOGIN</title>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="container">
<div class="row">
<div class="span4 offset4 well">
<legend align="center" > <b> Please Sign In</b></legend>
<div class="alert alert-info" align="center">
ตัวอย่างหน้า LOGIN</div>
<form name="form1" method="post" action="" accept-charset="UTF-8" onsubmit="javascript:return checkNull();">
<input type="text" id="username" class="span4" name="username" placeholder="Username">
<input type="password" id="password" class="span4" name="password" placeholder="Password">
<button type="submit" name="lgin" class="btn btn-info btn-block" value="Sign in" >Sign in</button>
</form>
</div>
</div>
</div>
</body>
</html>
เมือลงโค้ดดังกล่าวเสร็จก็จะได้ผมการรันดังรูปข้างบ้านนะครับ หวังว่าคงพอทำกันได้นะครับ วันนี้ โปรแกรมเมอร์กากกากก็ขอจบไว้เพียงเท่านี้ครับ สำหรับ หน้า LOGIN สวยๆ
