Form Login สวยๆ ง่ายๆ ด้วย Bootstrap

Form Login สวยๆ ง่ายๆ ด้วย Bootstrap บทความนี้สอนสร้าง Form Login ด้วย form Sign-in ของ Bootstrap Framework ประกอบด้วยช่องใส่ username และ password และปุ่ม Login สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง Form Login สวยๆ ง่ายๆ ด้วย Bootstrap

1. เรียกใช์ไฟล์ CSS ของ Bootstrap และ Bootstrap Sign-in วางไว้ภายในแท็ก head ของเว็บไซต์

<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. เขียนโค้ดสร้าง Form Login สวยๆ

<main class="form-signin w-100 m-auto">
  <form>
    <h1 class="h3 mb-3 fw-normal"><center>Form Login</center></h1>
    <div class="form-floating">
      <input type="text" class="form-control" placeholder="Username">
      <label>Username</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" placeholder="Password">
      <label>Password</label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit">Login</button>
  </form>
</main>

Form Login สวยๆ ง่ายๆ ด้วย Bootstrap จากตัวอย่างเรียกใช้ไฟล์ CSS 2 ไฟล์คือ style ของ Bootstrap และไฟล์ตัวอย่างหน้า Sign-in ของ Bootstrap โดย Form Login นี้ประกอบด้วย 2 input คือ input type="text" และ input type="password" และปุ่มกดด้วยแท็ก button type="submit" โดย Form Login นี้จะแสดงที่ตรงกลางของหน้าจอ