nicht angemeldet
Gunnar Bittersmann@@Naked
Für mich als Anfänger ist der Fehler nicht auffindbar.
Gehen wir mal durch:
<html>
Hier solltest du die Sprache des Seiteninhalts angeben, in deinem Fall deutsch.
<html lang="de">
<script src="http://code.jquery.com/jquery-latest.js"></script>
Du verwendest kein jQuery. Brauchst du für deine Zwecke auch überjaupt nicht. Also gar nicht erst einbinden; weg mit der Zeile!
Einfügen solltest du hingegen in den head
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
damit die Seite auch auf Mobilgeräten vernünftig dargestellt werden kann.
<p class="font" id="text_ge">Dein Gewicht: </p><input name="Gewicht" placeholder="in Kilogramm" type="number" required pattern="[0-9] {3}" id="gewicht"><br/>
Das Eingabefeld hat keine Beschriftung (jedenfalls keine, die für alle Nutzer als solche erkennbar wäre). Für Beschriftungen gibt es das label-Element, dessen for-Attribut denselben Wert hat wie die id des dazugehörigen Eingabefelds (wie du das bei den Radiobuttons schon hast).
Die Angabe der Maßeinheit gehört mit zur Beschriftung, also ins label. placeholder kommt weg.
Das p-Element würde ich dazu verwenden, Beschriftung und Eingabefeld zu gruppieren. Dann kann auch <br> weg.
In pattern="[0-9] {3}" ist ein Fehler; du erwartest sicher nicht eine Ziffer gefolgt von 3 Leerzeichen.
Aber type="number" (Zahl) und pattern (String) passt nicht recht zusammen. Zahlen beschränkst du mit min und max:
<p>
<label for="gewicht">Dein Gewicht (in Kilogramm):</label>
<input name="Gewicht" type="number" required min="0" max="999" id="gewicht">
</p>
ID und Klasse des p-Elements hab ich mal entsorgt; ich glaub nicht, dass man die braucht.
<p class="font" id="text_gr">Deine Größe: </p><input name="Groesse" placeholder="in Zentimetern" type="number" required pattern="[0-9] {3}" id="größe"><br/>
Dieselben Änderungen wären auch für dieses Eingabebeld und dessen Beschriftung vorzunehmen.
<p class="font" id="radio_uni">Männlich oder Weiblich?</p>
<br/>
<label for="man">
<input type="radio" name="geschlecht" id="man" value="Männlich"> <p class="font">männlich</p></label>
<label for="woman">
<input type="radio" name="geschlecht" id="woman" value="Weiblich"> <p class="font">weiblich</p></label>
<br/>
Eine Gruppe von Radiobuttons sollte durch ein fieldset gruppiert werden, mit legend als Überschrift. Siehe Marco. Den Rahmen des fieldsets kann man mit CSS entfernen.
Mit p könntest du wieder Radiobuttons und zugehörige Label gruppieren. input hab ich außerhalb von label notiert (aus Gründen).
<fieldset>
<legend>Männlich oder Weiblich?</legend>
<p>
<label for="man">männlich</label>
<input type="radio" name="geschlecht" id="man" value="Männlich">
</p>
<p>
<label for="woman">weiblich</label>
<input type="radio" name="geschlecht" id="woman" value="Weiblich">
</p>
</fieldset>
<input class="button_c" type="button" value="Berechnen!" onClick="berechneBmi()"><br/>
type="button" ist falsch. Zum Absenden eines Formulars dient type="submit". Die Aktion des Submit-Buttons wird auch ausgeführt, wenn das Formular durch Drücken der Enter-Taste abgeschickt wird.
Für Buttons gibt auch es ein entsprechendes Element: button:
<button type="submit" onclick="berechneBmi();">Berechnen!</button>
<p class="font">Dein BMI-Wert: </p><input type="text" name="Ende"><br/>
<p class="font">Ergebnis: </p><input type="text" name="Ergebnis"><br/>
Das sind keine Eingabefelder, sondern Ausgabefelder:
<p>
<label for="Ende">Dein BMI-Wert:</label>
<output id="Ende"></output>
</p>
<p>
<label for="Ergebnis">Ergebnis:</label>
<output id="Ergebnis"></output>
</p>
<input class="button_r" type="reset" value="Nochmal!"/>
Ich glaube nicht, dass ein Reset-Button an der Stelle wirklich sinnvoll ist.
Wenn du das Markup berichtigt hast, dann kannst du dich ans Styling machen.
LLAP 🖖
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Rolf b
Matthias Apsel
Der Martin
Auge
MudGuard
JürgenB