อินพุตแบบฟอร์ม 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>