หน้า Login HTML สวยๆ ด้วย Sign-in Bootstrap

หน้า Login HTML สวยๆ ด้วย Sign-in Bootstrap บทความนี้แนะนำ template สำหรับหน้า Login ของ Bootstrap ที่เรียกว่า Sign-in template เป็นหน้า Login ที่สร้างด้วย HTML ร่วมกับ style Bootstrap มีรายละเอียดดังนี้

ตัวอย่าง หน้า Login HTML สวยๆ ด้วย Sign-in Bootstrap

1. โหลดไฟล์ CSS 2 ไฟล์คือ Bootstrap และ Sign-in template

<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/5.2/examples/sign-in/signin.css" />

2. เขียนโค้ดสร้างหน้า Login HTML

<div class="form-signin w-100 m-auto">
  <form>
    <h1 class="h3 mb-3 fw-normal"><center>หน้า Login HTML</center></h1>
    <div class="form-floating">
      <input type="text" class="form-control" placeholder="ชื่อผู้เข้าใช้งาน">
      <label>ชื่อผู้เข้าใช้งาน</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" placeholder="รหัสผ่าน">
      <label>รหัสผ่าน</label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit">เข้าสู่ระบบ</button>
  </form>
</div>

หน้า Login HTML สวยๆ ด้วย Sign-in Bootstrap เริ่มจากการโหลดไฟล์ style CSS 2 ไฟล์ของ Bootstrap จากนั้นเขียนโค้ดสร้างหน้า Login HTML ประกอบด้วย TextBox 2 ช่องสำหรับกรอก ชื่อผู้เข้าใช้งาน และรหัสผ่าน พร้อมปุ่ม “เข้าสู่ระบบ” โดยจัดรูปแบบการแสดงผล สี และตำแหน่งด้วย CSS ของ Bootstrap Framework