nicht angemeldet
Gunnar Bittersmann@@Gunnar Bittersmann
Fortsetzung folgt …
Mal in den Quelltext geschaut:
<meta http-equiv="content-language" content="de">
Das ist unnötig. Die Angabe der Sprache erfolgt so:
<html lang="de">
•
<meta http-equiv="content-script-type" content="text/javascript; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
Die Meta-Angaben sind wohl überflussig; JavaScript ist als Scriptsprache ebenso Standard wie CSS als Stylingsprache. Und wofür soll die dritte gut sein?
•
<style> @charset "utf-8";
@charset sollte in einem HTML-Dokument nicht vorkommen, sondern nur in einem externen Stylesheet – und auch dort nicht unbedingt.
•
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box
Die Präfixe können weg.
-webkit-box-shadow: none; -moz-box-shadow: none
Warum setzt du in der letzten Zeile vor } eigentlich kein ; ans Ende? Du machst dir das Leben bei späteren Änderungen nur unnötig schwer, wenn du dort noch Zeilen hinzufügst und das ; vergisst.
•
<ul> <li class="pflicht">Albumtitel </li> <li class="volleBreite"><input id="albumtitel" type="text" value="" class="volleBreite"></li> <li class="pflicht"> Art </li> <li><select id="art"><option value="0">Single</option><option value="1">Mini-Album</option><option value="2">Album</option></select></li>
Eine Liste kann man gelten lassen. Aber: „Albumtitel“ und zugehöriges Eingabefeld wäre ein Listenpunkt, ebenso wie „Art“ und zugehöriges Eingabefeld sowie „Veröffentlicht am“ und zugehöriges Eingabefeld.
Außerdem sollten „Albumtitel“, „Art“ und „Veröffentlicht am“ Beschriftungen (label) für die Eingabefelder sein: zum einen, damit das Eingabefeld den Fokus bekommt, wenn man aufs zugehörige Label clickt. Und vor allem, damit die Zuordnung der Beschriftung zum zugehörigen Eingabefeld nicht nur visuell für Sehende, sondern auch für Nutzer von Screenreadern gegeben ist.
Die Zuordnung erfolgt im HTML entweder über das for-Attribut mit dem Wert der ID des Eingabefeldes
<label for="albumtitel>Albumtitel</label>
<input id="albumtitel" required>
oder indem das input-Element in das label-Element geschachtelt wird.
Pflichtfelder kennzeichnest du mit dem required-Attribut (wie eben gemacht).
Sämtliche entsorgst du bitte; die gehören nicht in den HTML-Quelltext. Abstände regelst du per CSS.
Auch darstellungsbezogene Klassennamen wie "volleBreite" solltest du nicht verwenden.
•
<select id="tag"><option> 01 </option><option> 02 </option><option> 03 </option>…<option> 31 </option></select> <span class="fett">.</span> <select id="monat"><option> Jan </option><option> Feb </option><option> Mär </option>…<option> Dez </option></select> <span class="fett">.</span> <select id="jahr"><option> 2015 </option></select>
Es ist ein Datum. Also ein Eingabefeld. Nicht drei. Drei getrennte Dopdown-Menüs für Tag/Monat/Jahr sind nicht nutzerfreundlich.
(Davon, dass man dort einen 30. Februar oder 31. März eingeben kann, mal ganz abgesehen.)
Zur Datumseingabe bietet HTML einen speziellen Typen und Browser spezielle UI-Elemente an. Nutze sie!
<label for="veröffentlicht_am">Veröffentlicht am</label>
<input id="veröffentlicht_am" type="date" min="2015-01-01" max="2015-12-31">
•
<table cellspacing="0" id="tracklist" data-anzahlSongs="0"> <tr> <td class="pflicht">Songtitel</td> <td> Musik von</td> <td>Text von</td> <td colspan="2">Gastmusiker</td> </tr> <tr id="s1"> <td class="volleBreite"><input type="text" value="" class="volleBreite"></td> <td> <input type="text" value=""> </td> <td><input type="text" value=""> </td> <td><input type="text" value=""> </td> <td> <input type="button" value=" + " onclick="zeileHinzufuegen()"> <input type="button" value=" - " onclick="zeileLoeschen(this)"> </td> </tr> </table>
Eine Tabelle dafür ist völlig OK. cellspacing nicht. Abstände per CSS.
Die erste Zeile sind die Spaltenüberschriften; also keine td-Elemente, sondern th. Außerdem sollten die im thead stehen.
Und „Gastmusiker“ ist auch nicht die Überschrift für die Buttons. (Wenn die eine bräuchten, dann sowas wie „Aktionen“?)
Ach ja, Buttons. Dafür gibt es button-Elemente.
<table id="tracklist" data-anzahlSongs="0">
<thead>
<tr>
<th class="pflicht">Songtitel</th>
<th>Musik von</th>
<th>Text von</th>
<th>Gastmusiker</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="s1">
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td>
<button type="button" onclick="zeileHinzufuegen()">+</button>
<button type="button" onclick="zeileLoeschen(this)">−</button>
</td>
</tr>
</tbody>
</table>
Und fürs Minuszeichen bitten keinen Strichjungen, sondern eben ein Minuszeichen '−' U+2212, in HTML als − verfügbar (wie eben gemacht).
•
Bei „Weiteres“ hast du zusammengehörige Beschriftungen und Eingabefelder schon in jeweils einem li-Element, gut so. Auch hier müssen die Label noch label werden.
Und br-Elemente brauchst du auch keine, das lässt sich mit CSS auch erreichen, z.B. display: block (falls das erforderlich sein sollte und das Eingabefeld nicht so schon die ganze zur Verfügung stehende Breite beansprucht (was man auch mit width: 100% erzwingen kann) und deshalb schon unter der Beschriftung steht.
LLAP 🖖
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
Der Martin
Matthias Apsel
Orlok