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

Diskutiere Wie kann ich in HTML direkt nach einem TEXT ein Textfeld machen? im HTML Forum im Bereich Programmierung; Hallo, ich bin noch Einsteiger im Programmieren und in HTML. Ich will eine "Schulnotenapp" programmieren die immer den Durchschnitt errechnet von...
Neues Thema erstellen Antworten
J

JoJo0403

New member
Beiträge
2
Punkte Reaktionen
0
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,[email protected],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 :)
 
T

tk1234

Active member
Beiträge
38
Punkte Reaktionen
2
JoJo0403 schrieb:
<div><p id="Fach">Hier das Fach angeben:</p><input id="text" type="text"></div>
Zum Vergrößern anklicken....
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.
 
J

JoJo0403

New member
Beiträge
2
Punkte Reaktionen
0
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.
Zum Vergrößern anklicken....
Oh ok vielen Dank 😄
 
S

Sempervivum

Well-known member
Beiträge
353
Punkte Reaktionen
52
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.
Zum Vergrößern anklicken....
Ü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.
 
Thema:

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

Oben Unten