Erstellen vertikaler Formularelemente

In modernen Browsern kann die Eigenschaft writing-mode auf einen vertikalen Wert eingestellt werden, um Formularelemente mit Textzeichen, die normalerweise horizontal sind (zum Beispiel in lateinischen Sprachen), vertikal anzuzeigen, wobei der Text in einem 90-Grad-Winkel zur Standardeinstellung angezeigt wird. Normalerweise vertikale Textzeichen, zum Beispiel in Chinesisch oder Japanisch, sind in dieser Hinsicht nicht betroffen.

Dies ist nützlich, wenn vertikale Sprachformulare erstellt werden.

Konkret:

• writing-mode: vertical-lr erzeugt vertikale Formularelemente mit einer Blockflussrichtung von links nach rechts, was bedeutet, dass in Steuerelementen mit Umbruch oder mehreren Textzeilen nachfolgende Zeilen rechts der vorherigen Zeilen erscheinen.
• writing-mode: vertical-rl erzeugt vertikale Formularelemente mit einer Blockflussrichtung von rechts nach links, was bedeutet, dass in Steuerelementen mit Umbruch oder mehreren Textzeilen nachfolgende Zeilen links der vorherigen Zeilen erscheinen.

Man könnte ein transform verwenden, um die Steuerelemente um 90 Grad zu drehen, aber das würde die Steuerelemente in ihrer eigenen Schicht platzieren und zu unbeabsichtigten Layout-Nebeneffekten führen, wie zum Beispiel eine Überlappung mit anderem Inhalt. Das Verwenden von writing-mode bietet eine zuverlässigere Lösung.

Zusätzlich kann die Eigenschaft direction verwendet werden, um die Richtung des Inhalts innerhalb der Steuerelemente zu steuern:

• direction: ltr bewirkt, dass der Inhalt oben beginnt und sich nach unten bewegt.
• direction: rtl bewirkt, dass der Inhalt unten beginnt und sich nach oben bewegt.

Die Eigenschaft direction kann verwendet werden, um die Inline-Basisrichtung festzulegen — die primäre Richtung, in der der Inhalt in einer Zeile angeordnet wird, die bestimmt, auf welchen Seiten sich der „Anfang“ und das „Ende“ einer Zeile befinden. Für textbasierte Formularelemente ist der Unterschied offensichtlich — der Textfluss beginnt oben oder unten. In nicht-textbasierten Steuerelementen wie Bereichsschiebereglern legt direction die Richtung fest, in die das Steuerelement gezeichnet wird. Wenn zum Beispiel bei einem vertikalen Schieberegler direction: ltr eingeschlossen ist, wird der niedrigste Wert oben am Schieberegler und der höchste Wert unten angezeigt.

Die folgenden Abschnitte zeigen, wie verschiedene Arten von vertikalen Formularelementen erstellt werden, zusammen mit Beispielen für jedes. Konsultieren Sie die Informationen zur Browser-Kompatibilität auf jeder der verlinkten Referenzseiten, um die genauen Unterstützungsinformationen für jeden Typ zu finden.

Schauen wir uns die Erstellung von vertikalen Bereichsschiebereglern, Zählern und Fortschrittsbalken an.

Ein typisches Set aus visuellen <input type="range">-Schiebereglern, <progress> und <meter>-Steuerelementen wird so erstellt:

<form>
  <input type="range" min="0" max="11" value="9" step="1" />
  <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="20">
    at 50/100
  </meter>
  <progress id="file" max="100" value="70">70%</progress>
</form>

Um die Steuerelemente vertikal anzuzeigen, können wir folgendes CSS verwenden:

input[type="range"],
meter,
progress {
  margin-block-end: 20px;
  writing-mode: vertical-lr;
}

writing-mode: vertical-lr (und vertical-rl) bewirkt, dass die Steuerelemente in modernen Browsern vertikal angezeigt werden.

Das Ergebnis sieht so aus:

Standardmäßig haben die Steuerelemente einen direction-Wert von ltr. Dies bewirkt, dass Ihre Schieberegler, Zähler und Fortschrittsbalken von oben nach unten gezeichnet werden, wie oben zu sehen ist.

Sie können dies ändern, indem Sie direction: rtl setzen — dies bewirkt, dass sie stattdessen von unten nach oben gezeichnet werden:

<form>
  <input type="range" min="0" max="11" value="9" step="1" />
  <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="20">
    at 50/100
  </meter>
  <progress id="file" max="100" value="70">70%</progress>
</form>

input[type="range"],
meter,
progress {
  margin-block-end: 20px;
  writing-mode: vertical-lr;
  direction: rtl;
}

Das Ergebnis sieht so aus:

In älteren Browsern, die die Erstellung vertikaler Formularelemente mit writing-mode und direction nicht unterstützen, gibt es begrenzte Alternativen. Die folgenden funktionieren nur bei <input type="range">, wobei der Text von unten nach oben fließt — sie haben keinen Effekt auf <meter>- und <progress>-Elemente:

• Die nicht standardmäßige Eigenschaft appearance: slider-vertical kann in älteren Versionen von Safari und Chrome verwendet werden.
• Das nicht standardmäßige Attribut orient="vertical" kann direkt dem <input type="range">-Element in älteren Firefox-Versionen hinzugefügt werden.

Das HTML für dieses Beispiel enthält nur einen <input type="range">-Schieberegler, mit orient="vertical", um ihn in älteren Firefox-Versionen vertikal darzustellen:

<form>
  <input type="range" min="0" max="11" value="9" step="1" orient="vertical" />
</form>

Um die Steuerelemente auch in älteren Versionen von Chrome und Safari vertikal darzustellen, können wir appearance: slider-vertical verwenden:

input[type="range"] {
  margin-block-end: 20px;
  appearance: slider-vertical;
}

Das Ergebnis sieht so aus:

Dieser Abschnitt zeigt, wie vertikale <select>-Elemente gehandhabt werden.

Das folgende HTML erstellt zwei <select>-Elemente, eines, bei dem eine einzelne Auswahl getroffen werden kann, und eines mit Mehrfachauswahl:

<form>
  <select multiple>
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
    <option>Fourth</option>
    <option>Fifth</option>
  </select>
  <select>
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
    <option>Fourth</option>
    <option>Fifth</option>
  </select>
</form>

Um die Steuerelemente vertikal anzuzeigen, können wir dieses CSS verwenden:

select {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

Das Ergebnis sieht so aus:

Es ist wieder möglich, einen direction-Eigenschaftswert von rtl zu verwenden, um die Textrichtung von unten nach oben einzustellen, anstatt der Standardrichtung von oben nach unten.

Es ist auch erwähnenswert, dass im obigen Beispiel die Inline-Richtung für die Select-Optionen von rechts nach links geht, weil wir writing-mode: vertical-rl verwendet haben. Wenn wir writing-mode: vertical-lr stattdessen verwenden, wird der <option>-Text von links nach rechts erscheinen.

Wir werden diese beiden Anwendungsfälle anhand von drei Listbox-(multiple) <select>-Elementen erkunden, um die Effekte leicht nebeneinander vergleichen zu können.

<form>
  <div>
    <h2>writing-mode: vertical-lr</h2>
    <select multiple>
      <option>First</option>
      <option>Second</option>
      <option>Third</option>
      <option>Fourth</option>
      <option>Fifth</option>
    </select>
  </div>
  <div class="direction">
    <h2>direction: rtl & writing-mode: vertical-lr</h2>
    <select multiple>
      <option>First</option>
      <option>Second</option>
      <option>Third</option>
      <option>Fourth</option>
      <option>Fifth</option>
    </select>
  </div>
  <div class="reverse-option-order">
    <h2>writing-mode: vertical-rl</h2>
    <select multiple>
      <option>First</option>
      <option>Second</option>
      <option>Third</option>
      <option>Fourth</option>
      <option>Fifth</option>
    </select>
  </div>
</form>

Im CSS für dieses Beispiel setzen wir die folgenden Eigenschaften auf die drei Listboxen:

1. writing-mode: vertical-rl, das genau wie im vorherigen Beispiel angezeigt wird — Text fließt von oben nach unten, und Optionen werden von rechts nach links angezeigt.
2. writing-mode: vertical-rl und direction: rtl, wobei die Optionen von rechts nach links gehen, aber der Textfluss von unten nach oben umgekehrt wird.
3. writing-mode: vertical-lr, der Text geht von oben nach unten, während die Optionen von links nach rechts umgekehrt werden.

form {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
  flex: 1 0 100%;
}

div {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
}

select {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

.direction select {
  direction: rtl;
}

.reverse-option-order select {
  writing-mode: vertical-lr;
}

Das Ergebnis sieht so aus:

Dieser Abschnitt zeigt, wie vertikale <button>-Elemente gehandhabt werden. Beachten Sie, dass wir in den folgenden Beispielen nur ein <button>-Element verwendet haben, das Verhalten ist jedoch dasselbe für andere Elemente, die Tasten erstellen, wie <input>-Typen von button, reset und submit.

Das folgende HTML erstellt zwei <button>-Elemente, eines mit einer einzelnen Textzeile und eines mit drei:

<button>Press me</button> <button>Press me<br />Please?<br />Thanks</button>

Um die Schaltflächen vertikal anzuzeigen, können wir folgendes CSS verwenden:

button {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

Das Ergebnis sieht so aus:

Wenn Sie den writing-mode-Wert von vertical-rl zu vertical-lr wechseln, erscheinen nachfolgende Textzeilen rechts statt links von vorherigen Zeilen.

Dieses Beispiel verwendet zwei Kopien des Dreizeilen-Button, den wir im vorherigen Beispiel gesehen haben, sodass Sie die Auswirkungen des Änderns des Schreibmodus leicht sehen können:

<div>
  <h2>writing-mode: vertical-lr</h2>
  <button>Press me<br />Please?<br />Thanks</button>
</div>
<div class="reverse-line-order">
  <h2>writing-mode: vertical-rl</h2>
  <button>Press me<br />Please?<br />Thanks</button>
</div>

Im CSS setzen wir writing-mode: vertical-rl auf die erste Schaltfläche, um die Zeilenfolge von rechts nach links anzuordnen. Auf der zweiten Schaltfläche setzen wir writing-mode: vertical-lr, um die Zeilenfolge umzukehren — von links nach rechts:

body {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
  flex: 1 0 100%;
}

div {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
}

button {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

.reverse-line-order button {
  writing-mode: vertical-lr;
}

Das Ergebnis sieht so aus:

Zuletzt schauen wir uns das Handling von vertikalen <textarea>s und textbasierten <input>-Typen an. Beachten Sie, dass, obwohl wir in den folgenden Beispielen nur ein <input type="text">-Element einschließen, das Verhalten für andere textbasierte <input>-Typen dasselbe ist: password, number, url usw.

Das folgende HTML erstellt ein <textarea> und ein <input type="text">:

<form>
  <textarea>This is my textarea</textarea>
  <input type="text" value="Input text" />
</form>

Um die Eingabe und Textarea vertikal anzuzeigen, können wir folgendes CSS verwenden:

textarea,
input[type="text"] {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

Das Ergebnis sieht so aus:

Sie können einen direction-Eigenschaftswert von rtl verwenden, um die Textrichtung vom Standard oben nach unten auf unten nach oben zu ändern. Sie können auch writing-mode auf vertical-lr anstelle von vertical-rl setzen, um bei <textarea>s mehrere Textzeilen von links nach rechts anzuzeigen, anstatt des Standard von rechts nach links.

Dieses Beispiel verwendet drei Kopien der gleichen Texteingabesteuerungen, die wir im vorherigen Beispiel gesehen haben, sodass Sie die Auswirkungen des Änderns von direction und writing-mode wie oben diskutiert leicht sehen können:

<form>
  <div>
    <h2>writing-mode: vertical-lr</h2>
    <textarea>This is my textarea</textarea>
    <input type="text" value="Input text" />
  </div>
  <div class="direction">
    <h2>direction: rtl & writing-mode: vertical-lr</h2>
    <textarea>This is my textarea</textarea>
    <input type="text" value="Input text" />
  </div>
  <div class="reverse-line-order">
    <h2>writing-mode: vertical-rl</h2>
    <textarea>This is my textarea</textarea>
    <input type="text" value="Input text" />
  </div>
</form>

Im CSS setzen wir die folgenden Eigenschaften auf die drei Sätze von Texteingabesteuerungen:

1. writing-mode: vertical-rl, damit es sich wie im vorherigen Beispiel anzeigt — Textfluss von oben nach unten und Zeilenfluss von rechts nach links.
2. writing-mode: vertical-rl und direction: rtl, um die Zeilen von rechts nach links zu fließen, aber den Textfluss von unten nach oben umzukehren.
3. writing-mode: vertical-lr, um den Text von oben nach unten fließen zu lassen, aber den Fluss der Zeilen umzukehren — von links nach rechts. Beachten Sie, dass dies keine Auswirkungen auf <input type="text">-Elemente hat, da sie immer einzeilig sind.

form {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
  flex: 1 0 100%;
}

div {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
}

textarea,
input[type="text"] {
  inline-size: 100px;
  margin-block-end: 20px;
  writing-mode: vertical-rl;
}

.direction textarea,
.direction input[type="text"] {
  writing-mode: vertical-rl;
  direction: rtl;
}

.reverse-line-order textarea,
.reverse-line-order input[type="text"] {
  writing-mode: vertical-lr;
}

Das Ergebnis sieht so aus:

• Das <input>-Element.
• Andere relevante Elemente: <button>, <meter>, <progress> und <select>.
• Umgang mit verschiedenen Textrichtungen
• Styling von Webformularen