Mitschrift 16.04.2014
TAG 9Tipp: Checkboxen immer nach vorne (vor den Text) setzen
Hinweis: wenn id im Buch verwendet wird, handelt es sich nicht um name, sondern um einen CSSBefehl
Hinweis: Das <p> ist nicht für Formulare da, sondern um Texte zu formatieren und strukturieren.
Struktur und Verwendung von Formularen
=> Textfelder- kann ich für alle einzeiligen Eingaben nehmen:
- Name, Vorname, Stadt, Land, Telefon, Email...
- von jedem Button geht nur eine Aktion aus, sonst ist der Button unsinnig
- der Programmierer übernimmt es, den Button mit Funktion zu belegen -
- Input-Feld - kann reagieren auf einen Klick
- = true or false Information - ich kann checken (true/ja), oder es sein lassen (false/nein)
- Hier kann ich mehrere Checkboxen nebeneinander setzen - also Mehrfach-Auswahl möglich
- = Kleinstauswahl - nur eine Auswahl ist möglich -
- Hier handelt es sich um eine Gruppe (Oder-Entscheidung innerhalb der Gruppe, ich muss mich entscheiden)
- Egal, was ich eingebe - es wird mir nicht angezeigt - nur verschlüsseltin Form von Kreisen
- z.B. in Kontoregistrierungen Passwort abnehmen
- = größter programmiertechnischer Aufwand,
- aber auch größte Flexibilität
- spart Platz und
- macht damit Formular übersichtlich -
- sind etabliert/anerkannt.
- Hier kann ich auch Antwortmöglichkeiten mit einem längeren Inhalt einstellen.
- = umstritten, aber nicht wegzudenken.
- Hier kann ich Sonderzeichen, Zeilenumbrüche, Leerzeilen etc. eintragen.
- Die Leezeilen werden korrekt übertragen (sowohl in get als auch in post!)
- Hinweis: sobald man textarea einstellt, wird das irgendwann mit der get-methode kollidieren, da sie nicht so gut zusammenarbeiten (Leerzeilen, Neuzeilen, Sonderzeichen...) werden nicht korrekt übertragen und wenn der Textinhalt zu lang wird, wird die URL einfach abgeschnitten
- ERGO werden die Eingaben nicht korrekt weitergegeben
- -> Tipp. TEXTAREA immer mit der POST-Methode übertragen!!!
2 weitere Attribute für type="text:
maxlength=""
- Es gibt einen Begrenzer für die Typisierung type="text" und zwar: maxlength="":
- der User kann nur begrenzte Anzahl an Zeichen eingeben - z.B. sinnvoll für PLZ - 5 Zeichen lang
(Spezialfall: Wenn man Länderauswahl gibt (andere Länder haben kürzere oder längere PLZen), könnte man dynamisch die Länge einstellen - aber das geht nur über jQuery oder Javascript: was bist du? Dänemark? wenn ja, dann nur 4 Zeichen maxlength -> Arbeit der Programmierer)
placeholder="geben Sie hier Ihren Inhalt ein"
- Das Placeholder Attribut ist nur HTML5 kompatibel, d.h. ein Browser, der nicht HTML5 fähig ist, kann mit dem placeholder nichts anfangen!
- Hier kann ich Hinweise geben, was in das Textfeld eingegeben werden soll.
- Im Rahmen der Usability und Leserfreundlichkeit sehr sinnvoll!
- Hinweis: der Button ist ein typisiertes Inputfeld, es gibt aber auch noch den Button in einer anderen Schreibweise/Notation:
<button>-Tag:
- <button name="meinbutton">Button TAG</button>
- Struktur: öffnendes Tag, schließendes tag, Attribute...
- Grund: Input funktioniert nämlich nur im Rahmen der form!!! - ich brauche action.
- Den button-Tag kann ich auch außerhalb einer Form, mitten im Quelltext setzen - deshalb gibt es ihn.
- Wird weniger genutzt, aber es gibt ihn manches mal
ACHTUNG: Problem bei Formularen:
Ich habe in HTML eine starre Anordnung der Elemente vorgegeben und kann es in CSS nicht mehr verändern.
Vorgehensweise - Formulare professionell gestalten:
Wie strukturieren und organisieren wir Formulare?
(neues Dokument: form-2.html)wir nehmen uns das Anmeldeformular von buecher.de als Vorlage
Frage:
Wie bekomme ich hin, dass die Auswahlfelder alle linksbündig eingerückt anfangen?
Antwort:
mit ul beginnen = Strukturierung übereinander mithilfe des Listenelements li
1. Schritt: Grundgerüst erstellen
Quelltext:<!doctype html>
<html>
<head>
<title>Formulars 2</title>
</head>
<body><font face="arial">
<form action="" method="get">
<ul>
<li>
Bestellung als:
<select name="bestellung" size="1">
<option value="P">Privatkunde</option>
<option value="F">Firmenkunde</option>
</select>
</li>
</ul>
Ausgabe:</form>
</font>
</body>
</html>
- Wir haben die Form definiert
- wir haben uns für eine UL entschieden, weil wir keine Aufzählung benötigen
- und ein Listenelement eingetragen - select & option
- Ergo: in ein Listenelement fassen wir einen Bezeichner und ein Auswahlelement!
2. Schritt: Anrede
Quelltext:<ul>
<li>
Bestellung als:
<select name="bestellung" size="1">
<option value="P">Privatkunde</option>
<option value="F">Firmenkunde</option>
</select>
</li>
<li>
Anrede:
<select name="anrede" size="1">
<option value="">Bitte wählen</option>
<option value="F">Frau</option>
<option value="H">Herr</option>
</select>
</li>
</ul>
Schritt 3: Label angeben mit Attribut "for"
<label>-Tag:Wir rahmen unsere Bezeichner in das label-Tag ein!
Hiermit label ich Streuerelemente (keine fieldsets!)
Es soll etwas auszeichnen - > Bezeichner für die Auswahl und Textfelder...
für Ergonomie und Barrierefreiheit!
Attribut: for="": also der Bezeichner für das Feld Bestellung for = für!
ganz wichtiges Attribut für Screenreader! So wird bestellung vorgelesen.
Quelltext:
<!doctype html>
<html>
<head>
<title>Formulars 2</title>
</head>
<body><font face="arial">
<form action="" method="get">
<ul>
<li>
<label for="bestellung">Bestellung als:</label>
<select name="bestellung" size="1">
<option value="P">Privatkunde</option>
<option value="F">Firmenkunde</option>
</select>
</li>
<li>
<label>Anrede:</label>
<select name="anrede" size="1">
<option value="">Bitte wählen</option>
<option value="F">Frau</option>
<option value="H">Herr</option>
</select>
</li>
</ul>
</form>
</font>
</body>
</html>
4. Schritt: Blöcke erstellen
<fieldset>-Tag
- benötigt schließendes Tag - in unserem Fall einen Block um die UL spannen.
- Wir benötigen Blöcke für die Übersichtichkeit und Leserfreundlichkeit
5. Schritt: Überschriften für die Blöcke setzen:
<legend>-Tag
- zwischen fieldset und ul
- das legend definiert den Block
- !!! Legend und fieldset gehören zusammen - legend beschreibt, welche Aufgaben das fielset hat!
- die Suchmaschinen und Screenreader lesen das fieldset ein: jetzt beginnt ein Bereich/Block/Abgrenzung (muss kein Formular sein), dann liest das Endgerät den legendtag ein - und weiß genau: der Block heißt "Ihre Rechnungsadresse" - er weiß, dass die legend zum fieldset gehört.
- Und dann liest das Endgerät den Inhalt.
- So wird auch ohne visuelle Vorstellung eindeutig, worum es geht - = Auswertung durch den Browser
- Hinweis: Muss man nicht setzen, bietet aber Transparenz, Barrierefreiheit und Möglichkeiten später mehr in CSS zu formatieren.
Quelltext:
<form action="" method="get">
<fieldset>
<legend>Ihre Rechnungsadresse</legend>
<ul>
<li>
<label for="bestellung">Bestellung als:</label>
<select name="bestellung" size="1">
<option value="P">Privatkunde</option>
<option value="F">Firmenkunde</option>
</select>
</li>
<li>
<label>Anrede:</label>
<select name="anrede" size="1">
<option value="">Bitte wählen</option>
<option value="F">Frau</option>
<option value="H">Herr</option>
</select>
</li>
</ul>
</fieldset>
</form>
6. Schritt: unsere Aufgabe ist es nun - die weiteren Elemente des Rechnungsadressenblocks einzufügen
Die Struktur ist angelegt - jetzt machen wir den Innenausbau!7. Schritt: Aufzählungspunkt entfernen
- über CSS-Eingabe - style attribut in öffnender ul (geht auch für ol!)
- <ul style="list-style-type: none;">
8. Schritt: Abstände korrigieren:
Exkurs: Box-Modell in der Theorie:
Selfhtml-LinkGrundlage für's Box-Modell:
(neue Datei: inline-blockelemente.html)-> im HTML basiert alles auf 2 Elementarten, auf die sich CSS aufbaut:
- Blockelement
- dienen zur Strukturierung!
- ein Blockelement ist standardmäßig linksbündig formatiert.
- immer maximale Ausdehnung zur Browserbreite (erstreckt sich über die gesamte Breite des Browserfensters - egal, wie groß der Inhalt ist, es ist immer automatisch so breit wie das Browserfenster)
- nimmt sich die gesamte/maximale Breite und reserviert sich eine neue Zeile (verdrängt also den vorangegangenen und den Folgeinhalt
- hier sind Breitenangaben über width möglich!
- -> Zeilenumbruch vor uns nach dem Blockelement- IMMER VOR & NACHHER
- -> sie positionieren sich immwer untereinander!
- ich kann mehrere Blockelemente untereinander anordenen, aber nicht nebeneinander!
- zitiert von selfhtml:
- Block-Elemente erzeugen einen eigenen Absatz im Textfluss. Je nach
Elementtyp kann der Browser dabei automatisch einen größeren Abstand zum
vorangehenden Inhalt einfügen. So erzeugen die Browser beispielsweise
beim
p-Element einen sichtbaren Abstand, damit die Absatzschaltung vom einfachen Zeilenumbruch unterscheidbar ist. Beimdiv-Element dagegen wird beispielsweise einfach eine neue Zeile begonnen.
Block-Elemente können in der Regel normalen Text und
Inline-Elemente
enthalten. Einige Block-Elemente können auch andere Block-Elemente
enthalten. Ausnahmen von der Regel werden bei den Beschreibungen zu den
einzelnen Elementen behandelt. - Folgende Elemente gehören zu den Block-Elementen:
address|blockquote|center|del|dir|div|dl|fieldset|form|h1-6|hr|ins|isindex|menu|noframes|noscript|ol|p|pre|table|ul - Inlineelement
- dienen zur Formatierung!!!
- Ausdehnung über die Breite des Inhalts! (Ist immer nur so breit, wie der Inhalt - selbst wenn ich die width angebe, bspw bei einem <a>, die Breite wird sich nicht verändern - es bleibt bei der Inhaltbreite)
- Regel: ein Inlineelement dehnt sich analog zum maximalen Inhalt aus. Breitenangaben sind nicht anwendbar
- ->es gibt keine Zeilenumbrüche
- ->sie positionieren sich immer hintereinander/nebeneina!
- zitiert von selfhtml:
- Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Inline-Elemente sind als untergeordnete, "innere" Elemente für
Block-Elemente
gedacht. Sie können in den meisten Fällen normalen Text und weitere
Inline-Elemente enthalten, jedoch keine Block-Elemente. Ausnahmen oder
Einschränkungen werden bei den Beschreibungen zu den einzelnen Elementen
behandelt. - Folgende Elemente gehören zu den Inline-Elementen:
a|abbr|acronym|applet|b|basefont|bdo|big|br|button|cite|code|del|dfn|em|font|i|img|ins|input|iframe|kbd|label|map|object|q|samp|script|select|small|span|strong|sub|sup|textarea|tt|var
- image hier in Inlineelement, ist aber eine Mischform!
- Block- & Inlineelemente unterscheiden sich im Verhalten! (Zeilenumbrüche, Ausdehnung, Breiteneinstellung)
- Abwärtskompatibilität:das Blockelement ist das führende Element - es ist so dominant, dass es mir selbst das Inlineelement zerschießt, wenn ich ein Blockelement hineinpacke (angenommen ich setzte in einem Link einen Absatz: <p> </p>)
- Ein Inlineelement kann einem Blockelement untergeordnet werden, aber nicht umgekehrt - also Ein Blockelement kann nicht in ein Inlineelement gepackt werden. ich kann bspw. ein <i></i> in ein Blockelement einsetzen
 |
| Abwärtskompatibilität bei Blockelementen |
<!doctype>
<html>
<head>
<title>Inline / Blockelemente</title>
<meta charset="UTF-8" />
</head>
<body>
<p style="border: 1px solid red;">Dies ist ein Blockelemente</p><h1 style="border: 1px solid red;">Dies ist ein Blockelemente</h1>
<a style="border: 1px solid red;" href="#">I</a>
<a style="border: 1px solid red;" href="#">Ich bin ein Inlineelement</a>
<a style="border: 1px solid red;" href="#">Ich bin ein Inlineelement</a>
<p style="border: 1px solid red;">Dies ist ein Blockelemente</p>
</body>
</html>
 | ||
| Boxmodell: inline-(blau) und blockelemente (schwarz) |
Erklärung des Box-Modells:
jedes Element hat darüber hinaus noch eigene Eigenschaften ;)(neue Datei: boxmodell.html)
Wir müssen Firebug (Add-on) für unseren Firefox installieren -
Extras - add-ons - suchen - firebug
Firebug
- ist nicht für Änderungen, sondern für die Analyse !!!
- nur temporäre Änderungen möglich, um mögliche Veränderungen als Alternative zu testen
- ist 2-geteilt:
- links: HTML-Code
- rechts: Style-Code
- ich kann im HTML-Code Elemente anklicken, welche mir dann im Browserfenster farbig angezeigt werden.
- Analyse:
- Die Kunst des firebugs ist, zu zeigen, wo bestimmte Quelltextinhalte im Browser sichtbar werden. - also Suche über den Quelltext
- Es geht auch umgekehrt - wie sieht der Quelltext zu einer bestimmten Passage im Browserfenster aus? - also Suche über die Ausgabemaske
 |
| Suche über das Ausgabefenster im Browser |
 |
| Suche über Quelltext |
- wenn ich jetzt eine CSS- Eingabe mache, erscheint etwas rechts im firebug
- jetzt auf Layout gehen - hier erklärt sich das Boxmodell
- Kern/ innere Schicht, blau
- wir sehen die eigentliche Abmessung des Inhalts des Blockelements!
- Schicht: padding
- Abstand zum Rahmen/ Innenabstand
- Schicht: border
- ist unser Rahmen
- Schicht: margin
- Außenabstand gemessen vom border
- wird vom System eingegeben, können wir aber manipulieren ;)
 |
| firebug>CSS>Layout -> Boxmodell |
Das Boxmodell besteht aus einem simplen Aufbau:
Alles baut sich in Schichten auf!
Alle 4 Schichte
- sind farblich hinterlegt
- können einzelnd definiert und verändert werde!
- zeigen an, wo die Elemente anfangen und enden :)
> Innenabstand (padding)
> border (in Rahmenfarbe, falls border definiert)
> Außenabstand vom Rahmen zum nächsten Element oder zum Browserende (margin)
Änderungsmöglichkeiten auf der rechten Seite:
- direkt im Style Änderungen händisch eintragen (durch Doppelklick unterhalb des letzten Elements) oder
- über Layout einfach die Angaben nummerisch in px setzen.
Style: gibt padding im Uhrzeigersinn an: top - right - bottom - left
(also bspw.: padding: 10px 50px 20px 80px;)
 |
| Änderung über Style - händisch |
ACHTUNG:
"temporäre Änderungen" bedeutet für uns auch, dass es beim Neuladen der Seite wieder in den abgespeicherten Urzustand zurückversetzt wird.
Ich kann also temporäre Änderungen an meiner Seite vornehmen und muss die Änderungen dann in mein html-Dokument übertragen!!!
Hinweis: <p> oder <h1> oder sonstige Formatierungen unterliegen Systemeinstellungen, welche die Angaben in den 4 Schichten vorbestimmen, also Rahmen, Innen- und Außenabstand... das sind Voreinstellungen, die ich verändern kann ;)
zurück zum Formular-Projekt:
Quelltext:
<!doctype html><html>
<head>
<title>Formulars 2</title>
</head>
<body bgcolor="silver"><font face="arial">
<form action="" method="get">
<fieldset>
<legend><big><strong>Ihre Rechnungsadresse</strong></big></legend>
<ul style="list-style-type: none;"><small>
<li>
<label for="bestellung">Bestellung als:</label>
<select name="bestellung" size="1">
<option value="P">Privatkunde</option>
<option value="F">Firmenkunde</option>
</select>
</li>
<li>
<label>Anrede:</label>
<select name="anrede" size="1">
<option value="">Bitte wählen</option>
<option value="F">Frau</option>
<option value="H">Herr</option>
</select>
</li>
<li>
<label>Titel:</label>
<input type="text" name="titel" value="" size="5" />
</li>
<li>
<label>Vorname:</label>
<input type="text" name="name" value="" size="20" />
</li>
<li>
<label>Nachname:</label>
<input type="text" name="nachname" value="" size="20" />
</li>
<li>
<label>Straße / Nr.:</label>
<input type="text" name="strasse" value="" size="15" />
<input type="text" name="nr" value="" size="4" />
</li>
<li>
<label>Adresszusatz:</label>
<input type="text" name="adresszusatz" value="" size="20" />
</li>
<li>
<label>PLZ / Ort:</label>
<input type="text" name="plz" value="" size="4" maxlength="5" />
<input type="text" name="ort" value="" size="15" />
</li>
<li>
<label>Land:</label>
<select name="land" size="1">
<option value="">Bitte wählen</option>
<option value="D">Deutschland</option>
<option value="A">Österreich</option>
<option value="CH">Schweiz</option>
</select>
</li>
<li>
<label>E-Mail:</label>
<input type="text" name="email" value="" size="20" />
</li>
<li>
<label>Geburtsdatum: <i>TT.MM.JJJJ</i></label>
<label>TT</label><input type="text" name="tt" value="" size="2" maxlength="2" />
<label>MM</label><input type="text" name="mm" value="" size="2" maxlength="2" />
<label>JJJJ</i></label><input type="text" name="jjj" value="" size="15" />
</li>
</small>
</ul>
</fieldset>
<fieldset>
<legend><big><strong>Ihre Lieferadresse:</strong></big></legend>
<small> <input type="radio" name="adressauswahl"
value="R"/>Rechnungsadresse als Lieferadresse übernehmen.<br />
<input type="radio" name="adressauswahl" value="L"/>abweichende
Lieferadresse.<br />
<input type="radio" name="adressauswahl" value="P"/>Lieferung an eine <input
type="image" id="name" src="packstation.gif" /><br /></small>
</fieldset>
<fieldset>
<legend><big><strong>Ihre Zugangsdaten für Ihr bücher.de-Konto:</strong></big></legend>
<small> <input type="checkbox" name="emailbenutzername" value="1" />E-Mail
Adresse als Benutzernamen verwenden<br />
<ul style="list-style-type: none;">
<li><b>Hinweis:</b> Ihr Passwort muss mindestens sechs Zeichen lang sein.</li>
<li>
<label>Passwort:</label>
<input type="text" name="passwort" value="" size="20" />
</li>
<li>
<label>Passwort wiederholen:</label>
<input type="text" name="passwortwiederholen" value="" size="20" />
</li>
<li>Die <b>fett</b> markierten Felder benötigen wir, um Ihre Bestellung ausführen zu
können.</li>
</ul>
</small>
</fieldset>
</form>
</font>
</body>
</html>
Ausgabe:
Link-Tipp -> border-styles:
solid, dotted, dashed, double, groove, ridge, inset, outset
Aufgabe: Bitte tragen Sie für jedes Style: padding-top: 20px in verschiedene h1-h3
Link-Tipp vom Dozenten: www.css4you.de
- alte Seite
- interessanter Aufbau
- Eigenschaften, Boxmodell - alles übersichtlich dargestellt
Keine Kommentare:
Kommentar veröffentlichen