## form 组件 > input[type="text/password/number/range"], textarea ``` form .form-group label input(type="text").form-control small.form-text.text-muted ```  > select ``` form .form-group label(for="xx") select.form-control(id="xx") option xxx .form-group label(for="xx2") select.form-control(id="xx2", multiple) option xxxx ```  > fieldset ``` fieldset.form-group legend xxx .form-group label input.form-control .form-check label.form-check-label input(type="radio").form-check-input ```  > input[type="file"] ``` form .form-group label input(type="file").form-control-file ```  > Inline forms ``` form.form-inline .form-group label xx input.form-control button(type="submit").btn.btn-primary xx ```  > Hidden labels ``` form.form-inline .form-group label.sr-only xx input.form-control button(type="submit").btn.btn-primary xx ```  ``` form.form-inline .form-group label.sr-only xx .input-group .input-group-addon $ input.form-control .input-group-addon .00 button(type="submit").btn.btn-primary xx ```  > Using the Grid ```jade form .form-group.row label(for="xx").col-sm-2.col-form-label .col-sm-10 input#xx.form-control fieldset.form-group.row legend.col-sm-2.col-form-legend Radios .col-sm-10 .form-check label.form-check-label input(type="radio").form-check-input xxx .form-check label.form-check-label input(type="radio").form-check-input xxx .form-group.row label.col-sm-2 .col-sm-10 .form-check label.form-check-label input(type="checkbox").form-check-input xxx .form-group.row .offset-sm-2.col-sm-10 button(type="submit").btn.btn-primary xxx ```  Grid-based form layouts also support large and small inputs. ``` form .form-group.row label.col-sm-2.col-form-label.col-form-label-lg(for="xx") .col-sm-10 input#xx.form-control.form-control-lg(type="email") .form-group.row label.col-sm-2.col-form-label.col-form-label-sm(for="xx") .col-sm-10 input#xx.form-control.form-control-sm(type="email") ```  ### Checkboxes and radios > default ``` form .form-check label.form-check-label input(type="checkbox/radio").form-check-input ```   > inline ``` form .form-check-inline label.form-check-label input(type="checkbox/radio").form-check-input xx ```   --- > Static controls ``` form .form-group.row label.col-sm-2.col-form-label .col-sm-10 p.form-control-static.mb-0 .form-group.row label.col-sm-2.col-form-label .col-sm-10 input.form-control ```  ``` form.form-inline .form-group label.sr-only xx p.form-control-static.mb-0 xxx .form-group label.sr-only xx input(type="password").form-control button.btn.btn-primary xxx ```  --- ### Disabled states Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor. ```html <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> ``` Add the disabled attribute to a <fieldset> to disable all the controls within. ``` form fieldset(disabled="") .form-group label input.form-control button.btn.btn-default xx ```  **注意**： While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers. --- ### Readonly inputs Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. ```html <input class="form-control" type="text" placeholder="Readonly input here…" readonly> ``` --- ### Control sizing Set heights using classes like .form-control-lg, and set widths using grid column classes like .col-lg-*. ``` input.form-control.form-control-lg input.form-control.form-control input.form-control-sm ```   --- ### Help text Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted. > Block level Block help text—for below inputs or for longer lines of help text—can be easily achieved with .form-text. This class includes display: block and adds some top margin for easy spacing from the inputs above. ``` label(for="xx") input(type="password", aria-describedby="yy")#xx.form-control p#yy.form-text.text-muted lorem... ```  > Inline Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else). ``` form.form-inline .form-group label(for="xx") input(type="password", aria-describedby="yy")#xx.form-control small#yy.text-muted lorem... ```  --- ### Validation ``` .form-group.has-success/warning/danger label.form-control-label input.form-control.form-control-success/warning/danger .form-control-feedback small.form-text.text-muted .form-check.has-success/warning/danger label.form-check-label input(type="checkbox/radio").form-check-input xxx ```   --- ### Custom forms > checkbox ``` label.custom-control.custom-checkbox input(type="checkbox").custom-control-input span.custom-control-indicator span.custom-control-discription Check this custom checkbox ```  > radio ``` label.custom-control.custom-radio input(type="radio").custom-control-input span.custom-control-indicator span.custom-control-discription Check this custom radio ```