Wie kann ich in HTML direkt nach einem TEXT ein Textfeld machen?

JoJo0403 · 15.10.2022

Hallo,
ich bin noch Einsteiger im Programmieren und in HTML.
Ich will eine "Schulnotenapp" programmieren die immer den Durchschnitt errechnet von den entsprechenden Noten je Schulfach.
Mein Problem ist, dass ich vor einem Textfeld in einer Zeile etwas schreiben möchte also z.B. (Gib bitte deine Note an: [Hier dann das text feld]),
bei mir jedoch das ganze in zwei Zeilen dargestellt wird. (Gib bitte deine Note an:
[Hier dann das text feld])

Hier ist nochmal ein teil meines Codes

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.webmanifest">
    
</head>
<body id="backround">
    <header>
        <a class="right" href="index.html">Gesamtdurchschnitt</a>
        <a class="right" href="Übersicht.html">Übersicht</a>
        <a href="note_add.html">Note Hinzufügen</a>
    </header>
    <div id="textarea">
        // Hier ist wird immer automatisch ein Absatz gemacht
        <div><p id="Fach">Hier das Fach angeben:</p><input id="text" type="text"></div>
        // Bis Hier
    </div>
</body>
</html>

Vielen Dank wenn mir jemand helfen kann

scatello · 15.10.2022

JoJo0403 schrieb:
bei mir jedoch das ganze in zwei Zeilen dargestellt wird

Was nicht verwunderlich ist, wenn du einen Absatz mit einem p-Tag einbaust.

tk1234 · 15.10.2022

JoJo0403 schrieb:
<div><p id="Fach">Hier das Fach angeben:</p><input id="text" type="text"></div>

ein Absatz (<p>) ist ein Block-Element, erzeugt also standardmäßig einen Zeilenumbruch. Theoretisch würde sich das ändern lassen, allerdings ist p hier ohnehin das falsche Element: das Eingabefeld braucht zwingend eine Beschriftung und das dafür nötige label-Element ist ein inline-Element, erzeugt also keinen Zeilenumbruch.

Übrigens: Beschriftungen sollten nicht neben, sondern über dem Element stehen - so ist die Beschriftung auch bei schmalen Displays (Smartphones!) immer gemeinsam mit dem Formularelement zu sehen.

JoJo0403 · 15.10.2022

tk1234 schrieb:
ein Absatz (<p>) ist ein Block-Element, erzeugt also standardmäßig einen Zeilenumbruch. Theoretisch würde sich das ändern lassen, allerdings ist p hier ohnehin das falsche Element: das Eingabefeld braucht zwingend eine Beschriftung und das dafür nötige label-Element ist ein inline-Element, erzeugt also keinen Zeilenumbruch.

Übrigens: Beschriftungen sollten nicht neben, sondern über dem Element stehen - so ist die Beschriftung auch bei schmalen Displays (Smartphones!) immer gemeinsam mit dem Formularelement zu sehen.

Oh ok vielen Dank

Sempervivum · 16.10.2022

Beschriftungen sollten nicht neben, sondern über dem Element stehen - so ist die Beschriftung auch bei schmalen Displays (Smartphones!) immer gemeinsam mit dem Formularelement zu sehen.

Überhaupt kein Problem, das Ganze variabel anzulegen: Auf breitem Bildschirm nebeneinander und auf schmalem untereinander, in etwa so:

Code:

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
  form {
    grid-template-columns: 1fr;
  }
}

Die Darstellung für breiten Bildschirm ist dann besser an das Querformat angepasst.

tk1234 · 16.10.2022

Sempervivum schrieb:
Die Darstellung für breiten Bildschirm ist dann besser an das Querformat angepasst.

Wenn man statt 600px noch eine relative Angabe in em/rem verwendet ab der Beschriftung und Element nebeneinander dargestellt werden können, ja.