Erfahren Sie mehr über Formularsteuerelemente in Bootstrap

In diesem Artikel erhalten Sie eine ausführliche Erläuterung der Formularsteuerelemente in Bootstrap. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Basisinstanz

---

Einzelnen Formularsteuerelementen werden automatisch einige globale Stile zugewiesen. Für alle - und -Elemente ist das width-Attribut standardmäßig auf width: 100% gesetzt. Die beste Anordnung ergibt sich, wenn man das label-Element und die zuvor erwähnten Steuerelemente in eine .form-group einschließt.

Formulargruppen und Eingabefeldgruppen nicht direkt mit Eingabefeldgruppen vermischen. Es wird empfohlen, die Eingabefeldgruppe in der Formulargruppe zu verschachteln.

Verwandte Empfehlungen: „Bootstrap-Tutorial

“

Inline-Formular

Fügen Sie die Klasse .form-inline zum Element <form></form> hinzu enable Der Inhalt ist linksbündig und verhält sich wie ein Steuerelement auf inline-block-Ebene.

Gilt nur, wenn das Ansichtsfenster mindestens 768 Pixel breit ist (jede kleinere Breite des Ansichtsfensters führt dazu, dass das Formular ausgeblendet wird).

---

元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

可能需要手动设置宽度

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些

元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些

额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为

label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，

比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用

placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

水平排列的表单

---

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

被支持的控件

---

表单布局实例中展示了其所支持的标准表单控件。

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

必须添加类型声明

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

输入控件组

如需在文本输入域 前面或后面添加文本内容或按钮控件，请参考输入控件组。

文本域

支持多行文本的表单控件。可根据需要改变 rows

Möglicherweise müssen Sie die Breite manuell festlegen

In Bootstrap sind die Steuerelemente für das Eingabefeld und das Optionsfeld/Mehrfachauswahlfeld standardmäßig auf „Breite: 100 %“ eingestellt. Im Inline-Formular setzen wir die Breite dieser

🎜-Elemente auf width: auto;, sodass mehrere Steuerelemente in derselben Zeile angeordnet werden können. Abhängig von Ihren Layoutanforderungen sind möglicherweise einige 🎜🎜 zusätzliche benutzerdefinierte Komponenten erforderlich. 🎜

🎜Stellen Sie sicher, dass Sie ein Label-Tag hinzufügen🎜🎜Wenn Sie nicht für jedes Eingabesteuerelement ein Label-Label festlegen, wird es von Bildschirmlesern nicht richtig erkannt. Bei diesen Inline-Formularen können Sie es ausblenden, indem Sie die .sr-only-Klasse für das 🎜🎜label festlegen. Es gibt auch unterstützende Technologien, die Alternativen zu Label-Tags bieten, wie z. B. aria-label, aria-labelledby oder title-Attribute. Wenn keines davon vorhanden ist, greifen Screenreader möglicherweise auf die Verwendung des 🎜🎜placeholder-Attributs und, falls vorhanden, auf die Verwendung des Platzhalters anstelle anderer Markups zurück. Beachten Sie jedoch, dass dieser Ansatz unangemessen ist. 🎜

🎜🎜

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

🎜🎜

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

🎜🎜

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

🎜 🎜Horizontal angeordnetes Formular🎜🎜🎜🎜🎜Durch Hinzufügen der Klasse .form-horizontal zum Formular und Verwendung der voreingestellten Rasterklasse von Bootstrap können Sie die Beschriftung label und Gruppen von kombinieren Die Bedienelemente sind horizontal nebeneinander angeordnet. Dadurch wird das Verhalten von .form-group geändert, sodass es sich wie Zeilen in einem Rastersystem verhält, sodass keine zusätzliche .row hinzugefügt werden muss. 🎜🎜🎜🎜rrreee 🎜🎜Unterstützte Steuerelemente🎜🎜🎜🎜🎜Das Beispiel für ein Formularlayout zeigt die unterstützten Standardformularsteuerelemente. 🎜🎜🎜🎜🎜Eingabefeld🎜🎜🎜Enthält die meisten Formularsteuerelemente und Texteingabefeldsteuerelemente und unterstützt außerdem alle Eingabesteuerelemente vom Typ HTML5: Text , password, datetime, datetime-local, date, month</code > code>, <code>time, week, number, email, url, < code >search, tel und color. 🎜

🎜Typdeklaration muss hinzugefügt werden🎜🎜Nur Eingabesteuerelemente mit korrekt eingestelltem Typattribut können den richtigen Stil erhalten. 🎜

🎜🎜

🎜Eingabekontrollgruppe🎜🎜Wenn Sie Textinhalte oder Schaltflächensteuerelemente vor oder nach dem Texteingabefeld hinzufügen müssen, beziehen Sie sich bitte auf die Eingabekontrollgruppe. 🎜

🎜🎜Textfeld🎜🎜🎜 Formularsteuerelement, das mehrzeiligen Text unterstützt. Sie können das Attribut rows nach Bedarf ändern. 🎜🎜🎜🎜

多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <label>, you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, or .checkbox-inline.

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

不带label文本的Checkbox 和 radio

如果需要 <label> 内没有文字，输入框（input）正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。 请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label)

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Formularsteuerelemente in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!