หน้า 1 จากทั้งหมด 1

การสร้างแบบฟอร์มง่ายๆ ใน Bootstrap

โพสต์แล้ว: 30/07/2016 3:03 pm
โดย m038
การสร้างแบบฟอร์มง่ายๆ ใน #Bootstrap นั้นสามารถทำได้ดังนี้
  • - ประกาศหัวข้อแบบฟอร์มที่เราต้องการ

โค้ด: เลือกทั้งหมด

<h1><center>ตัวอย่างแบบฟอร์ม</center></h1>
  • - ประกาศแบบฟอร์ม

โค้ด: เลือกทั้งหมด

<form>ข้อมูลต่างๆ ที่ต้องใส่ภายในฟอร์ม</form>
  • - สร้างการกรอกข้อมูลที่เราต้องการ เช่นตัวอย่างนี้เป็นการให้กรอก Email

โค้ด: เลือกทั้งหมด

  <form class="form-inline">
    <div class="form-group">
      <label>Email :</label>
      <input type="email" class="form-control" id="email" placeholder="กรอก email ของท่าน">
    </div>
  </form>
* placeholder คือการแสดงข้อความในช่อง input
  • - สร้างการกรอกรหัสผ่านของ Email ที่ต้องการ

โค้ด: เลือกทั้งหมด

  <form class="form-inline">
    <div class="form-group">
      <label>Email :</label>
      <input type="email" class="form-control" id="email" placeholder="กรอก email ของท่าน">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="กรอก password ของท่าน">
    </div>
  </form>
  
  • - สร้างปุ่มเพื่อบันทึกข้อมูลแบบฟอร์ม

โค้ด: เลือกทั้งหมด

<center><button type="submit" class="btn btn-default">บันทึกข้อมูล</button></center>