Protokoll zu Formularen

Hier wird es etwas ausführlicher um Formulare gehen. Diese werden (Spoiler!) den Hauptteil der zweiten praktischen Prüfung darstellen. Von daher lohnt es sich, sich das Protokoll aufmerksam durchzulesen. #winkmitdemzaunpfahl

Was ist überhaupt ein Formular und wie ist es aufgebaut?
Formulare sind nichts anderes als Eingabefelder für Daten. Sie begegnen uns als Suchfelder, Kontaktformulare, bei Kommentarfunktionen, beim Buchen eines Hotelzimmers und natürlich direkt bei Google. An all diesen (und natürlich noch sehr viel mehr) Stellen im Netz werden Formulare eingesetzt.

Die Grundstruktur ist dabei recht simpel.

Mit <form> wird ein Formular eröffnet und mit </form> geschlossen. Alles, was dazwischen steht, gehört irgendwie dazu. Eingabefelder werden nach dem Schema:

<input type=“text“ id=“testtext“ name=“testtext“ placeholder=“Bitte hier den Testtext eintragen“ required>

aufgebaut. Dabei steht input dafür, dass man es hier überhaupt mit einem Eingabefeld zu tun hat. Der type sorgt dafür, dass der Browser versteht, welcher Art die Eingabe sein soll. Für type stehen eine ganze Reihe verschiedener Optionen zur Verfügung. Zum Beispiel text für normalen Text, number für Zahlen, date für die Eingabe eines Datums (je nach Browser sogar mit schickem grafischen Kalender), email für E-Mailadressen oder url für Webadressen. Und es gibt noch ein paar mehr.

Die Bestimmung des Typs ist wichtig, wenn z.B. vom Browser überprüft werden soll, ob im email-Feld auch ein @-Zeichen eingetragen wurde. Wird hier der Typ email verlangt, muss ein @ enthalten sein. Der Browser prüft indes nicht, ob die eingegebene Mailadresse an sich gültig ist. Dafür müsste man auf externe Skripte ausweichen.

Die id benötigen wir, wenn wir das spezielle Eingabefeld per CSS gestalten wollen und für das label (siehe unten). Das Namenfeld name wird später wichtig, wenn eine Mail mit den eingegebenen Formulardaten an uns geschickt wird. Dann wird nämlich hinter dem name des Feldes der Wert angezeigt, den ein Besucher z.B. ausgefüllt hat.

Der placeholder ist in der Tat ein Platzhalter. Dieses Feld legt fest, was in einem Eingabefeld steht, wenn noch nichts eingetragen wurde. Klingt paradox, begegnet und aber quasi überall. In vielen Suchfeldern steht „Suchen“, bevor man selbst etwas eingibt. Das ist der Placeholder.

Der Parameter required bestimmt, ob es bestimmtes Feld ausgefüllt werden muss. Ist required nicht gesetzt, ist es dem Browser egal, ob in dem Feld eine Eingabe gemacht wurde – er wird das Formular trotzdem absenden. Ist required aber gesetzt, wird für das Feld eine Eingabe erwartet. Sinnvoll ist das natürlich bei der E-Mailadresse oder dem eigentlichen Anfragetext.

Felder benennen
Mit dem <label>-Feld wird die Benennung eines Eingabefeldes definiert.

Die Struktur sieht hier wie folgt aus: <label for=“hier steht die id des eingabefeldes“>Hier steht der sichtbare Text</label>. Anhand des id-Feldes weiß das Label quasi, zu welchem Feld es gehört. Soll das label über dem Eingabefeld stehen, muss es das auch im HTML tun. Nur so als Tipp.

Uunnnd … Action!
Neben der Eingabe von Daten soll ein Formular ja noch eine zweite Aufgabe erfüllen – nämlich mit den eingegebenen Daten irgendwas machen. Das kann z.B. das Versenden einer E-Mail an eine spezifizierte Adresse sein oder das Schreiben der Informationen in eine Datenbank, wie es z.B. bei einem Kommentar der Fall wäre.

Eine action wird nach diesem Schema eingebunden:

<form id=“kontaktformular“ action=“kompletter Link zu einem (externen) Skript“ method=“post“>

Damit weist man das Formular an, nach Klick auf den submit-Button (weiter unten) eine bestimmte Sache zu tun – nämlich die Daten an das Skript zu übergeben. Damit das Skript zum Beispiel eine Mail versenden kann, muss man ihm evtl. noch eine weitere Information mitgeben, nämlich die Adresse. Das hängt aber vom aufgerufenen Skript ab. Bei selbst erstellen Funktionen ist das wahrscheinlich nicht nötig, weil die Mailadresse dann an anderer Stelle definiert wird. In unserem Fall sieht die Zeile aber so aus:

<input type=“hidden“ name=“empfaenger“ value=“meine E-Mailadresse, an die das Kontaktformular geschickt werden soll“>

Hier wird dem Formular quasi ein bereits ausgefülltes Feld mitgegeben (im value steht ja bereits was drin), welches aber mittels hidden nicht auf der Seite angezeigt wird. Denn wir möchten ja nicht, dass der Ausfüller die Mailadresse für den Versand ändern kann.

Im Allgemeinen werden bei einer Action php-Dateien oder *.cgi-Dateien aufgerufen, die mit den eingegebenen Daten irgendwas anstellen.

Eingabefelder konfigurieren mit pattern
Um eine bestimmte Logik der Eingabe in ein Feld zu erzwingen, kann mit dem pattern-Befehl festgelegt werden, dass die Eingabe zum Beispiel so aussehen muss: fünf Zahlen, dann ein / und dann sechs Großbuchstaben. Warum? Weil es manchmal nötig ist, dass derjenige, der ein Formular ausfüllt, sich an ein bestimmtes Muster hält. Zum Beispiel, wenn mit den Eingaben in einer Datenbank gesucht werden soll.

pattern wird dabei einfach in die Zeile des Eingabefeldes geschrieben. Ein Beispiel:

<label for=“plz“>PLZ:</label>
<input type=“text“ id=“plz“ pattern=“[0-9]{5}“ name=“plz“ placeholder=“ PLZ“>

Im Beispiel erzwingt das pattern eine Eingabe von fünf Zahlen, nicht mehr, nicht weniger und auch wirklich nur Zahlen. Die eckigen Klammern bestimmen, was eingegeben werden darf (0-9 heißt alle Zahlen von 0 bis 9, A-Z hieße alle Großbuchstaben, a-z hieße alle Kleinbuchstaben), die geschwungene Klammer dahinter definiert die erlaubte Zeichenanzahl. Mit der Eingabe von [/] ist es z.B. auch möglich, die Eingabe eines / an einer bestimmten Stelle zu erzwingen. Sinnvoll ist es dann, im Label des Eingabefeldes darauf hinzuweisen, wie die Eingabe erfolgen soll. Woher soll der Besucher das sonst wissen?

Radiobuttons und Checkboxen
Neben den Eingabefeldern für Text, Zahlen, Daten, Mailadressen etc. werden in Formularen auch sehr oft Radiobuttons (das sind die runden) und Checkboxen (das sind die eckigen) eingesetzt. Unterschied: Bei Radiobuttons wird von Haus aus nur eine Einfachauswahl unterstützt (es lässt sich in einer Liste von Radiobuttons also genau einer anklicken), während Checkboxen eine Mehrfachauswahl erlauben (hier geht also von „nichts wird ausgewählt“ bis „alles wird ausgewählt“ alles).

So sieht das HTML-technisch aus:

<p>Welche Farbe wünschen Sie?<br>
<input type=“radio“ name=“eingabe“ value=“rot“ checked> Rot<br>
<input type=“radio“ name=“eingabe“ value=“grün“> Grün<br>
<input type=“radio“ name=“eingabe“ value=“gelb“> Geld<br>
<input type=“radio“ name=“eingabe“ value=“blau“> Blau<br>
<input type=“radio“ name=“eingabe“ value=“schwarz“> Schwarz<br>
<input type=“radio“ name=“eingabe“ value=“weiß“> Weiß
</p>

Der type=radio legt fest, dass wir es mit Radiobuttons zu tun haben. Die <br>-Tags sind dafür da, dass jeder Button eine eigene Zeile aufmacht.

Analog bei Checkboxen:

<p>Welche Sonderfunktionen wünschen Sie?<br>
<input type=“checkbox“ name=“opt“ value=“vierfarb“> Vierfarbdruck<br>
<input type=“checkbox“ name=“opt“ value=“abnahme“> Voransicht zur Abnahme<br>
<input type=“checkbox“ name=“opt“ value=“oekodruck“> Ökodruck<br>
<input type=“checkbox“ name=“opt“ value=“hochglanz“> Hochglanz<br>
</p>

Der Senden-Knopf
So, das Eingeben von Daten haben wir uns angeschaut. Wie werden denn nun die Daten tatsächlich gesendet? Dafür nutzen wir eine „submit“-Funktion:

<input type=“submit“ value=“Absenden“>

Ja, das war’s eigentlich schon. Stylen kann man den Button, wenn man ihn z.B. in ein div packt. Der Browser erstellt aus der Basisversion erst mal eine klickbare Schaltfläche, die die Daten absendet. Wie der Button genau aussieht, legt der Browser fest.

So, das soll erst mal reichen. Gegebenenfalls ergänze ich noch.

Protokoll vom 20.05.2014

Heute ging es schon so richtig in die Vollen. Wir haben uns mit „Klassen“, „Divs“ und natürlich jeder Menge CSS-Grundlagen beschäftigt.

Was haben wir gelernt?

Klassen erlauben mehr Flexibilität beim Styling
HTML erlaubt es, Inhaltsbereichen „Klassen“ zuzuweisen (Beispiel: <p class=“zitat“ … ), um damit individuelle Formatierungen per CSS zu erlauben. So lassen sich neben dem regulären <p> Element für Textabsätze also mittels Klassen beliebig viele weitere Absatzformate erstellen, die jeweils separat per CSS gestylt werden können. Klassen können beliebig oft im HTML verwendet werden, die Klasse „zitat“ kann also immer dann eingesetzt werden, wenn ein Zitat kenntlich gemacht werden soll. Klassen lassen sich auch für andere Inhalte wie z.B. <a> definieren, um vielleicht Bilder, Videos oder Links im Allgemeinen mit spezieller Formatierung darzustellen.

Div-Container eigenen sich zum Gruppieren von Inhalten
Divs (von engl.: division = „Abteilung“) sind erst mal nur leere Container. In diesen Containern können Inhalte quasi gesammelt werden, also Texte, Links, Bilder … alles Mögliche. Warum sollte man das machen? Divs lassen sich per CSS über die div-ID (die im HTML nur einmal verwendet werden sollte!) individuell stylen. Damit können also mehrere Texte und Bilder zum Beispiel mit einer Rahmenlinie umspannt werden, was man sonst (also nur mit den einzelnen Elementen) nicht hinbekäme. Divs lassen sich auch schachteln, ein „Umschlag“-Div kann z.B. in sich weitere Div-Container beinhalten. Das Styling des Umschlag-Divs wird dann an die beinhalteten Divs übergeben. Diese lassen sich aber per CSS auch individuell stylen, sofern nötig. Divs werden eher für einzigartige Objekte auf der Seite eingesetzt, also sowas wie Slider, Suchfenster oder spezielle Infoboxen, die nur einmal vorkommen. Anders als Klassen sollte dasselbe Div (also mit derselben Div-ID) nicht mehrfach eingesetzt werden, weil das u.U. Probleme mit Zuweisungen etc. geben kann.

Nachdenken erspart Fummelei an der CSS
Es ist wichtig, sich vor (!) dem Erstellen des HTMLs und der CSS Gedanken darüber zu machen, was man eigentlich wie darstellen will. Indem man z.B. in der CSS für den body bereits die Breite des Inhaltsbereichs und z.B. ein „margin: auto“ angibt, braucht man diese Angabe nicht jedem folgenden Element mehr zu geben. Gleiches gilt z.B. für verschachtelte Divs. Wenn das jeweils oberste Element (also das „Elternelement“) schon sinnvoll gestylt ist, erspart das nach hinten raus eine Menge Tipperei in der CSS.

Befehle und was man damit macht
Wir haben uns heute mit einer Reihe verschiedener Styling-Befehle für die CSS beschäftigt. Hier eine kleine Aufzählung.

background-color – bestimmt die Hintergrundfarbe eines Bereiches

color – bestimmt die Textfarbe eines Bereichs

font-family – bestimmt konkrete Schriftarten bzw. Schriftartfamilien, die vom Browser verwendet werden sollen

font-size – legt die Schriftgröße fest (hier sind auch Prozentangaben möglich)

font-weight – definiert den „Fettegrad“ einer Schrift

font-style – definiert kursive oder oblique (schräg) bzw. normale Schrift

width – bestimmt die Breite eines Bereichs (in Prozent möglich)

margin – bestimmt den Außenabstand eines Inhaltsbereichs von den umgebenden Elementen

padding – bestimmt den Innenabstand des Inhalts vom Rand des Bereichs

text-align – erlaubt es, den Text links- oder rechtsbündig, mittig oder z.B. im Blocksatz darzustellen

border-width – bestimmt die Strichstärke einer Rahmenlinie

border-color – legt die Farbe einer Rahmenlinie fesr

border-style – legt die Art der Rahmenlinie fest (solid = durchgezogen, dotted = Punktlinie usw.)

Protokoll vom 19.05.2014

An unserem ersten Kurstag ging es erst mal darum, uns überhaupt damit vertraut zu machen, was denn HTML und CSS eigentlich sind.

HTML (Hypertext Markup Language) ist eine sog. „Auszeichnungssprache“ für die Darstellung von Inhalten auf Websites (dabei muss man zwischen den Begriffen „Website“ und „Webseite“ unterscheiden: „Webseite“ bezeichnet ein einzelnes HTML-Dokument, eine „Website“ (von engl.: site = „Ort“) bezeichnet einen gesamten Webauftritt, der ja aus vielen HTML-Seiten bestehen kann), während CSS (Cascading Style Sheets) für die optische Gestaltung zuständig sind.

Für sich betrachtet sind HTML-Dokumente und CSS-Dokumente (wir gehen in unseren Fall von externen Styles aus, mit internem Styling beschäftigen wir uns aber auch noch) erst mal völlig verschiedene und nicht miteinander verbundene Dinge. Während HTML die Inhalte einer Seite enthält bzw. von externen Quellen einbindet, ist CSS dafür zuständig, Text, Bilder etc. in schönem Styling darzustellen. HTML ohne externe CSS-Datei kann natürlich auch Styling-Informationen direkt in der HTML-Datei enthalten, das sollte man aber wo es geht vermeiden. Bei Anpassungen muss man dann nämlich ggf. die HTML-Datei durchforsten, was total nervig ist.

Eleganter geht es mit dem Einsatz externer CSS-Dateien. Diese werden mit der HTML-Datei durch einen Aufrufbefehl verbunden (link rel=“stylesheet“ …) und ab diesem Moment gelten die in der CSS definierten Styles für Überschriften, Absätze und überhaupt alles andere für die entsprechende HTML-Datei. Der große Vorteil daran: Bei Änderungen am Styling muss man nicht die HTML-Datei anfassen, riskiert also nicht, irgendwas Inhaltliches kaputt zu machen, sondern kann das allein an der CSS machen.

HTML funktioniert grundlegend mit öffnenden und schließenden Tags (Beispiel: <h1>Das ist eine Überschrift erster Ordnung</h1>). Diese Logik findet sich an allen Stellen des HTML.

Die Grundstruktur einer HTML-Seite sieht so aus:

<!DOCTYPE html>

<html>

<head>

Hier stehen nicht sichtbare Informationen zur Seite (Ausnahme <title> ist sichtbar), sowas wie Autor, Metatags, Sprache etc. Auch werden hier z.B. JavaScript-Funktionen geladen.

</head>

<body>

Hier steht der gesamte sichtbare Inhalt der Seite, also Texte, Bilder, Videos etc.

</body>

</html>

Eine CSS-Datei folgt einer anderen Syntax als HTML.

So sieht z.B. ein CSS-Eintrag aus, der die Formatierung der Überschrift 1 (h1) festlegt.

h1 {

background-color: white;
color: red;
font-family: sans-serif;

}

CSS verwendet zum Öffnen und Schließen von Formatierungsdeklarationen geschweifte Klammern (PC: AltGR + 7 und AltGR + 9 / Mac: Alt +8 und Alt +9).

So, das reicht dann erst mal für heute.

Themen für Montag, 19.05.2014

So, und los geht’s!

Heute soll es einführend darum gehen, welche Rolle HTML und CSS für das Internet überhaupt spielen. Kurz gesagt würde das Internet in seiner heutigen Form ohne HTML und CSS nicht so aussehen, wie es aussieht. Dieses Blog hier macht Gebrauch von auf HTML basierenden Artikeln, die wiederum durch CSS gestylt sind.

Hier ein paar Links, die wir genauer unter die Lupe nehmen werden:

HTML bei Wikipedia, gute Zusammenfassung als Überblick
http://de.wikipedia.org/wiki/Hypertext_Markup_Language

Datenbank für Autodidakten: „SelfHTML“
http://de.selfhtml.org/

Was ist CSS? Zusammenfassung bei Wikipedia
http://de.wikipedia.org/wiki/Cascading_Style_Sheets

Was ist mit CSS3 möglich? Responsive Design
http://www.awwwards.com/websites/responsive-design/

Wer zuviel Zeit enorm viel Wissbegier mitbringt und partout nicht abwarten möchte, der kann hier schon mal reinschauen:

Das soll zum Einstieg erst mal reichen …

… ach ja, und dann möchte ich noch darüber sprechen, was ich in diesem Kurs mit Ihnen/euch gern machen würde. Nämlich eine Geschichte schreiben. Also jeder seine eigene. In HTML natürlich, gestylt mit CSS. Klingt vielleicht schrecklich aufwändig und nervenzehrend, das muss (und wird!) es aber nicht sein. Wie ich darauf komme? Naja, ich mache nicht nur Weiterbildungen … von daher liegt das irgendwie nahe.

Und weiter geht’s: mit HTML und CSS!

Herzlich willkommen zum Kurs rund um HTML5 und CSS3.

In unserer ersten Woche wird es zunächst darum gehen, uns einmal etwas näher kennen zu lernen, damit wir auch wissen, mit wem wir es eigentlich zu tun haben. Danach widmen wir uns den Grundlagen von HTML und CSS. Was ist das eigentlich genau? Wie funktioniert es und was macht man mit dem HTML-Editor „Phase5“? Wir werden uns dabei langsam herantasten, das eigenhändige Basteln und Probieren steht im Vordergrund.

Der Kurs soll weniger frontale Wissenvermittlung als gemeinschaftliches Erarbeiten von Techniken sein, wie man HTML und CSS miteinander kombiniert, um zeitgemäße Websites zu erstellen.

Ich kann an dieser Stelle ein Buch empfehlen, an dem ich mich inhaltlich ebenfalls orientiere: „Einstieg in CSS: Webseiten gestalten mit HTML und CSS“

Ich freue mich auf einen spannenden Kurs, in dem zweifellos auch ich eine Menge lernen werde!

Viele Grüße,
Sascha Dinse

 


Und nur um schon mal ein wenig vorwegzunehmen … dieser Artikel sieht in HTML so aus:

<h1>Herzlich willkommen zum Kurs rund um HTML5 und CSS3.</h1>
In unserer ersten Woche wird es zunächst darum gehen, uns einmal <a title=“Sascha Dinse Über mich bei http://www.sozialvernetzer.de&#8220; href=“http://www.sozialvernetzer.de/was-ist-sozialvernetzer/uber-mich/&#8220; target=“_blank“>etwas näher kennen zu lernen</a>, damit wir auch wissen, mit wem wir es eigentlich zu tun haben. Danach widmen wir uns den Grundlagen von HTML und CSS. Was ist das eigentlich genau? Wie funktioniert es und was macht man mit dem HTML-Editor <a title=“Phase5 HTML Editor“ href=“http://www.phase5.info/&#8220; target=“_blank“>“Phase5″</a>? Wir werden uns dabei langsam herantasten, das eigenhändige Basteln und Probieren steht im Vordergrund.

<em>Der Kurs soll weniger frontale Wissenvermittlung als gemeinschaftliches Erarbeiten von Techniken sein, wie man HTML und CSS miteinander kombiniert, um zeitgemäße Websites zu erstellen.</em>

Ich kann an dieser Stelle <strong>ein Buch empfehlen</strong>, an dem ich mich inhaltlich ebenfalls orientiere: <a title=“Buchtipp für HTML und CSS Einsteiger“ href=“http://www.amazon.de/gp/product/3836227762/ref=oh_details_o00_s00_i00?ie=UTF8&amp;psc=1&#8243; target=“_blank“>“Einstieg in CSS: Webseiten gestalten mit HTML und CSS“</a>

Schönes Beispiel dafür, dass das mit den Formatierungen immer so eine Sache ist 🙂