อินพุตแบบฟอร์ม Bootstrap (เพิ่มเติม)


การควบคุมแบบสถิต

หากคุณต้องการแทรกข้อความธรรมดาถัดจากป้ายกำกับแบบฟอร์มภายในแบบฟอร์มแนวนอน ให้ใช้.form-control-staticคลาสกับ<p>องค์ประกอบ:

ตัวอย่าง

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
</form>

Bootstrap Input Groups

คลาส.input-groupเป็นคอนเทนเนอร์เพื่อเพิ่มประสิทธิภาพการป้อนข้อมูลโดยการเพิ่มไอคอน ข้อความ หรือปุ่มข้างหน้าหรือข้างหลังเป็น "ข้อความช่วยเหลือ"

ชั้น.input-group-addonเรียนแนบไอคอนหรือข้อความช่วยเหลือข้างช่องป้อนข้อมูล


ข้อความ

ตัวอย่าง

<form>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input id="email" type="text" class="form-control" name="email" placeholder="Email">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input id="password" type="password" class="form-control" name="password" placeholder="Password">
  </div>
  <div class="input-group">
    <span class="input-group-addon">Text</span>
    <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
  </div>
</form>

แนบ ปุ่ม.input-group-btnถัดจากอินพุต มักใช้ร่วมกับแถบค้นหา:

ตัวอย่าง

<form>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>


Bootstrap แบบฟอร์มการควบคุมสถานะ

  • INPUT FOCUS - โครงร่างของอินพุตจะถูกลบออกและใช้กล่องเงาบนโฟกัส
  • อินพุต ที่ปิดใช้งาน - เพิ่มdisabledแอตทริบิวต์เพื่อปิดใช้งานฟิลด์อินพุต
  • DISABLED FIELDSETS - เพิ่มdisabledแอตทริบิวต์ให้กับ fieldset เพื่อปิดการใช้งานการควบคุมทั้งหมดภายใน
  • อินพุตแบบอ่านอย่างเดียว - เพิ่มreadonlyแอตทริบิวต์ให้กับอินพุตเพื่อป้องกันการป้อนข้อมูลของผู้ใช้
  • สถานะการตรวจสอบ - Bootstrapมีสไตล์การตรวจสอบสำหรับข้อความแสดงข้อผิดพลาด คำเตือน และข้อความแสดงความสำเร็จ เพื่อใช้ เพิ่ม.has-warning, .has-errorหรือ.has-successองค์ประกอบหลัก
  • ไอคอน - คุณสามารถเพิ่มไอคอนคำติชมด้วย.has-feedbackชั้นเรียนและไอคอน
  • HIDDEN LABELS - เพิ่ม.sr-onlyคลาสบนฉลากที่มองไม่เห็น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสถานะการควบคุมฟอร์มบางส่วนด้านบนในรูปแบบแนวนอน :

ตัวอย่าง

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Focused</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="Click to focus">
    </div>
  </div>
  <div class="form-group">
    <label for="disabledInput" class="col-sm-2 control-label">Disabled</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success has-feedback">
    <label class="col-sm-2 control-label" for="inputSuccess">
    Input with success and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="col-sm-2 control-label" for="inputWarning">
    Input with warning and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="col-sm-2 control-label" for="inputError">
    Input with error and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </div>
</form>

และนี่คือตัวอย่างของสถานะการควบคุมฟอร์มบางส่วนในรูปแบบอินไลน์ :

ตัวอย่าง

<form class="form-inline">
  <div class="form-group">
    <label for="focusedInput">Focused</label>
    <input class="form-control" id="focusedInput" type="text">
  </div>
  <div class="form-group">
    <label for="inputPassword">Disabled</label>
    <input class="form-control" id="disabledInput" type="text" disabled>
  </div>
  <div class="form-group has-success has-feedback">
    <label for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label for="inputWarning2">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning2">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="inputError2">Input with error</label>
    <input type="text" class="form-control" id="inputError2">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>