Text und Textfeld nebeneinander?

3 Antworten

medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
27.07.2021, 22:17

In HTML gibt es zum Beschriften von Eingabefeldern, Checkboxen und Buttons das <label> Element. Überwiegend wird es zwar in Formularen innerhalb eines <form> Elements verwendet, es kann und darf jedoch auch für sich alleine stehen. Mit dem for Attributs und der Verwendung einer ID können zudem Elemente verknüpft werden.

HTML:

<!-- Innerhalb eines <label> -->
<label for="numChildren">
  Für wie viele Kinder erhalten Sie zur Zeit Kindergeld?
  <input id="numChildren" type="text">
</label>

<!-- Außerhalb eines <label> -->
<label for="numChildren">Für wie viele Kinder...</label>
<input id="numChildren" type="text">

Von der Semantik wäre der oben gezeigte Weg zu empfehlen. Da Text ohnehin irgendwie ausgezeichnet werden sollte, würde man dasselbe Ergebnis auch mit einem <span> Element erreichen. Zusätzliches CSS wäre in dem Fall ebenso wenig erforderlich, da es sich beim <span> um ein Inline-Element handelt.

Mir stellt sich noch die Frage, warum von dir mm für Außenabstände und pt für die Schriftgröße als Maßeinheit gewählt wurde. Soll das Dokument anschließend in einem DIN-Format ausgegeben resp. gedruckt werden? Falls nicht, solltest du auf web-übliche Einheiten wie em, rem und/oder px wechseln.

Zu guter Letzt möchte in noch anmerken, das CSS Formatierungen zur besseren Übersicht und Wartbarkeit möglichst immer in einem gesonderten Stylesheet deklariert werden sollten. Sei es als extern eingebundene Quelle oder mithilfe eines <style> Elements innerhalb des <head> deines HTML-Dokuments.

LG medmonk
Alfi1986
27.07.2021, 11:43

Ähm, direkt vorweg, was sind 0.8mm? Das kannst du so nicht machen! Genauso wenig würde ich zu pt raten. Du bist im Web, nicht auf einem A4 Blatt. Alles was mm oder cm ist, machst du bitte in px oder em!

Hier der Code

<div class="cc-text" style="margin:0.8mm 0.1mm 0.0mm 0.1mm;font:bold 8.5pt Arial;color:#000000;text-decoration:underline;" id="LT-00096">
    <div style="display:inline-block;  margin-right:.8em"> Für wie viele Kinder erhalten Sie zur Zeit Kindergeld?</div>
    <input type="text" class="form-control" name="Kindergeld" value="{if $pdf}{$values.Kindergeld}{/if}" style="display:inline-block;">
</div>
maison8
27.07.2021, 11:37

Du kannst das in CSS mit display:inline-block machen. Das musst du aber für beide so übernehmen.
Woher ich das weiß:eigene Erfahrung – Viel Einsatz dessen in Freizeit