フォーム部品の無効化 Disabled state
disabled属性で無効化したフォーム部品のスタイル。
フォーム部品毎に個別指定
サンプル
ソースコード
<form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label" for="InputText">１行テキスト入力欄</label> <div class="col-sm-10"> <input type="text" class="form-control" id="InputText" placeholder="１行テキスト入力欄" disabled> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="InputSelect">セレクト・ボックス</label> <div class="col-sm-10"> <select class="form-control" id="InputSelect" disabled> <option>選択肢Ａ</option> <option>選択肢Ｂ</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox" value="checkboxA" disabled> チェックボックスＡ </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkboxB" disabled> チェックボックスＢ </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default" disabled>送信</button> </div> </div> </form>
fieldset要素でまとめて無効化指定
サンプル
ソースコード
<form class="form-horizontal"> <fieldset disabled> <div class="form-group"> <label class="col-sm-2 control-label" for="InputText">１行テキスト入力欄</label> <div class="col-sm-10"> <input type="text" class="form-control" id="InputText" placeholder="１行テキスト入力欄"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="InputSelect">セレクト・ボックス</label> <div class="col-sm-10"> <select class="form-control" id="InputSelect"> <option>選択肢Ａ</option> <option>選択肢Ｂ</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox" value="checkboxA"> チェックボックスＡ </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="checkboxB"> チェックボックスＢ </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">送信</button> </div> </div> </fieldset> </form>