Form

ประเภทของ input มีหลายประเภท ดังตัวอย่าง text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, และ color


<form>
<input type="date" class="form-control">
<input type="password" class="form-control">
<input type="datetime" class="form-control">
<input type="datetime-local" class="form-control">
<input type="date" class="form-control">
<input type="month" class="form-control">
<input type="time" class="form-control">
<input type="week" class="form-control">
<input type="number" class="form-control" min="0" max="40">
<input type="email" class="form-control">
<input type="url" class="form-control">
<input type="search" class="form-control">
<input type="tel" class="form-control">
<input type="color" class="form-control">
ผลลัพธ์


การจัดกลุ่มหัวข้อและ input

<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control">
</div>
ผลลัพธ์



  <i class="fas fa-user prefix"></i> <label for="inputIconEx2">ชื่อ-สกุล</label>
  <input type="text" id="inputIconEx2" class="form-control">
ผลลัพธ์


การใส่คำอธิบายใต้ input ใช้ aria-describedby

<input type="email" name="email" class="form-control" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">โปรดระบุ Email เพื่อใช้สำหรับรับข้อมูลข่าวสารจากทางเว็บ</small>
ผลลัพธ์
โปรดระบุ Email เพื่อใช้สำหรับรับข้อมูลข่าวสารจากทางเว็บ

การบังคับกรอก

<input type="email" name="email" class="form-control" required>
ผลลัพธ์


การกำหนด pattern

<input type="email" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="tel" class="form-control" pattern="\d{10}">
ผลลัพธ์


การจัด Column

<div class="row">
<div class="col">
  <input type="text" class="form-control" placeholder="ชื่อ">
</div>
<div class="col">
  <input type="text" class="form-control" placeholder="สกุล">
</div>
</div>
<button type="submit" class="btn btn-primary">ลงทะเบียน</button>
</form>
ผลลัพธ์



<form>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" name="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="passwd">รหัสผ่าน</label>
    <input type="passwd" class="form-control" id="passwd">
  </div>
  <div class="form-group">
    <label for="confirm_passwd">ยืนยันรหัสผ่าน</label>
    <input type="confirm_passwd" class="form-control" id="confirm_passwd">
  </div>
  <div class="form-group">
    <label for="name">ชื่อ-สกุล</label>
    <input type="text" name="name" class="form-control" id="name">
  </div>
  <div class="form-group">
    <label for="address">ที่อยู่</label>
    <input type="text" name="address" class="form-control" id="address">
  </div>
  <button type="submit" class="btn btn-primary">ลงทะเบียน</button>
</form>
ผลลัพธ์