Markup für Formulare
bearbeitet von Gunnar Bittersmann@@Naked
> Für mich als Anfänger ist der Fehler nicht auffindbar.
Gehen wir mal durch:
~~~html
<html>
~~~
{: style="background: #FCC"}
Hier solltest du [die Sprache des Seiteninhalts angeben](https://www.w3.org/International/questions/qa-lang-why), in deinem Fall deutsch.
~~~html
<html lang="de">
~~~
---
{: style="margin: 2em 0"}
~~~html
<script src="http://code.jquery.com/jquery-latest.js"></script>
~~~
{: style="background: #FCC"}
Du verwendest kein jQuery. Brauchst du für deine Zwecke auch überjaupt nicht. Also gar nicht erst einbinden; weg mit der Zeile!
---
{: style="margin: 2em 0"}
Einfügen solltest du hingegen in den `head`
~~~html
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
~~~
damit die Seite auch auf Mobilgeräten vernünftig dargestellt werden kann.
---
{: style="margin: 2em 0"}
~~~html
<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/>
~~~
{: style="background: #FCC"}
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`:
~~~html
<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.
---
{: style="margin: 2em 0"}
~~~html
<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/>
~~~
{: style="background: #FCC"}
Dieselben Änderungen wären auch für dieses Eingabebeld und dessen Beschriftung vorzunehmen.
---
{: style="margin: 2em 0"}
~~~html
<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/>
~~~
{: style="background: #FCC"}
Eine Gruppe von Radiobuttons sollte durch ein `fieldset` gruppiert werden, mit `legend` als Überschrift. Siehe [Marco](https://www.zehe-edv.de/2016/01/08/die-grundregeln-zugaenglicher-webseiten/). Den Rahmen des `fieldset`s 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](https://twitter.com/g16n/status/748215068924518400)).
~~~html
<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>
~~~
---
{: style="margin: 2em 0"}
~~~html
<input class="button_c" type="button" value="Berechnen!" onClick="berechneBmi()"><br/>
~~~
{: style="background: #FCC"}
`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`:
~~~html
<button type="submit" onclick="berechneBmi();">Berechnen!</button>
~~~
---
{: style="margin: 2em 0"}
~~~html
<p class="font">Dein BMI-Wert: </p><input type="text" name="Ende"><br/>
<p class="font">Ergebnis: </p><input type="text" name="Ergebnis"><br/>
~~~
{: style="background: #FCC"}
Das sind keine *Eingabe*felder, sondern *Ausgabe*felder:
~~~html
<p>
<label for="Ende">Dein BMI-Wert:</label>
<output id="Ende">
</p>
<p>
<label for="Ergebnis">Ergebnis:</label>
<output id="Ergebnis">
</p>
~~~
---
{: style="margin: 2em 0"}
~~~html
<input class="button_r" type="reset" value="Nochmal!"/>
~~~
{: style="background: #FCC"}
Ich glaube nicht, dass ein Reset-Button an der Stelle wirklich sinnvoll ist.
---
{: style="margin: 2em 0"}
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.”_{: lang="en"} —Vitaly Friedman in [Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”](https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/)
_[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}
Weißer background Rand trotz padding 0px
bearbeitet von Gunnar Bittersmann@@Naked
> Für mich als Anfänger ist der Fehler nicht auffindbar.
Gehen wir mal durch:
~~~html
<html>
~~~
{: style="background: #FCC"}
Hier solltest du [die Sprache des Seiteninhalts angeben](https://www.w3.org/International/questions/qa-lang-why), in deinem Fall deutsch.
~~~html
<html lang="de">
~~~
---
{: style="margin: 2em 0"}
~~~html
<script src="http://code.jquery.com/jquery-latest.js"></script>
~~~
{: style="background: #FCC"}
Du verwendest kein jQuery. Brauchst du für deine Zwecke auch überjaupt nicht. Also gar nicht erst einbinden; weg mit der Zeile!
---
{: style="margin: 2em 0"}
Einfügen solltest du hingegen in den `head`
~~~html
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
~~~
damit die Seite auch auf Mobilgeräten vernünftig dargestellt werden kann.
---
{: style="margin: 2em 0"}
~~~html
<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/>
~~~
{: style="background: #FCC"}
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`:
~~~html
<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.
---
{: style="margin: 2em 0"}
~~~html
<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/>
~~~
{: style="background: #FCC"}
Dieselben Änderungen wären auch für dieses Eingabebeld und dessen Beschriftung vorzunehmen.
---
{: style="margin: 2em 0"}
~~~html
<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/>
~~~
{: style="background: #FCC"}
Eine Gruppe von Radiobuttons sollte durch ein `fieldset` gruppiert werden, mit `legend` als Überschrift. Siehe [Marco](https://www.zehe-edv.de/2016/01/08/die-grundregeln-zugaenglicher-webseiten/). Den Rahmen des `fieldset`s 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](https://twitter.com/g16n/status/748215068924518400)).
~~~html
<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>
~~~
---
{: style="margin: 2em 0"}
~~~html
<input class="button_c" type="button" value="Berechnen!" onClick="berechneBmi()"><br/>
~~~
{: style="background: #FCC"}
`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`:
~~~html
<button type="submit" onclick="berechneBmi();">Berechnen!</button>
~~~
---
{: style="margin: 2em 0"}
~~~html
<p class="font">Dein BMI-Wert: </p><input type="text" name="Ende"><br/>
<p class="font">Ergebnis: </p><input type="text" name="Ergebnis"><br/>
~~~
{: style="background: #FCC"}
Das sind keine *Eingabe*felder, sondern *Ausgabe*felder:
~~~html
<p>
<label for="Ende">Dein BMI-Wert:</label>
<output id="Ende">
</p>
<p>
<label for="Ergebnis">Ergebnis:</label>
<output id="Ergebnis">
</p>
~~~
---
{: style="margin: 2em 0"}
~~~html
<input class="button_r" type="reset" value="Nochmal!"/>
~~~
{: style="background: #FCC"}
Ich glaube nicht, dass ein Reset-Button an der Stelle wirklich sinnvoll ist.
---
{: style="margin: 2em 0"}
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.”_{: lang="en"} —Vitaly Friedman in [Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”](https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/)
_[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}