Zentrieren und Funktion des Kontaktformulars ....

[Hl.* Br.* Steffen Härter]

Hallo, liebe Menschen,

ich habe erst kürzlich ein Aufbau - Fernkurs mit html und css gehabt und das Programmieren eines Kontaktformulares war nur sehr kurz. Über die Funktion habe ich leider nicht mehr viel erfahren können.

Ich wünsche mir, das alle Felder funktionieren und ich auch ggf. svg icons einbauen kann. Mir ist es aber erst mal wichtig, zu wissen, wie kann das Kontaktformular via css zentriert werden?

Und 2.: wie kann die Formularfunktion "senden" sicher gemacht werden? Ich habe mir das html selbst beigebracht und will für unsere Internetseite https://www.bethaus-gemeinde-gottes.de auch die Seiten der jetzt neuen Startseite gegenüber anpassen. Dazu ggf. später. Das Senden, wie funktioniert das und wie weiß das Kontaktformular, an wen es senden soll?

Vielen herzlichen Dank - wir sind eine arme hl. Glaubensgemeinschaft und von daher freue ich mich auf jede ernste Hilfe.

Vielen herzlichen Dank im Voraus. Der hl. Br. Steffen Härter.

[Rolf B]

Hallo Stefan,

Als Selfer kann ich Dir dies mitgeben:

Um ein Form serverseitig verarbeiten zu können, brauchst Du dort ein Programm. Das schreibt man zumeist in PHP. Die nächste Frage ist: was soll mit dem Form-Inhalt passieren? Willst Du ihn an Dich selbst mailen? Oder in einer Datei speichern? Einer Datenbank?

Clientseitig "weiß" das Form seinen Adressaten an Hand des action Attributs. Dort steht die URL, an die der Inhalt zu schicken ist.

Formulare im Selfwiki

Zum Zentrieren auf der Seite kannst Du dem Form mittels CSS einen linken und rechten Rand der Größe "auto" geben. Du musst dann auch noch die Breite auf einen sinnvollen Wert begrenzen, z.B. mit max-width: 40em.

Zentrieren im Selfwiki

wir sind eine arme hl. Glaubensgemeinschaft

Als Christ sage ich Dir: oh je, was für ein Geschwurbel steht da auf deiner Seite. Ein "Heiliger Brief", eine "Heilige E-Mail"?! Hat das Christentum keine anderen Probleme als den vollständigen Namen Gottes? Und da Du Dich sogar hier im Forum als Heiliger Bruder vorstellst - geht's noch? Bekanntlich gibt es eine unabdingbare Voraussetzung für den Status des Heiligen: Man muss tot sein. Ansonsten sind vor Gott alle Menschen gleich und damit auch gleich heilig, und wer sich aus eigenem Antrieb als besonders heilig darstellt, begeht die Sünde der Hoffart. Tatsächlich habe ich eine Weile überlegt, ob Du überhaupt ein ernstes Anliegen hast oder lediglich trollen willst - aber dafür ist der Aufwand mit der Webseite eigentlich zu hoch.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Als Christ sage ich Dir: oh je, was für ein Geschwurbel steht da auf deiner Seite.

Eine Sekte?

Wenn ja, sollte man da helfen, die Seite zu verbessern?

🖖 Живи довго і процвітай

[Rolf B]

Hallo Gunnar,

der Auftrag von Selfhtml ist nicht, die Reinheit des Christentums zu bewahren oder zu diskutieren. Und ob sich da eine Sekte zeigt oder einfach nur sehr deutlich auf einen Punkt konzentrierte Mainstream-Christen, das kann ich nicht sagen.

Wie auch immer, Inhalte sollten uns egal sein. Ich habe mich mit meiner Meinung eigentlich schon zu weit hinausgelehnt, aber deswegen auch als meine Meinung gekennzeichnet.

Es gibt Ausnahmen. Bei einer Seite mit kriminellem oder antidemokratischem Inhalt würde ich eine Anfrage ignorieren oder löschen. Aber dahin ist keine Verbindung erkennbar.

Rolf

[Hl.* Br.* Steffen Härter]

hallo,

liebes selfhtml Team,

ich bin neu in Bezug auf Formular - Programmierung und ich hatte nicht die Absicht gehabt, daß über das Christentum gesprochen wird, weil ich auch der Webmaster bin von Bethaus, Gemeinde Gottes.

Ich habe mich gefreut, daß geantwortet wurde, aber, ich verstehe immer noch nicht die Funktionalität zum Senden des Formulares, warum es an eine config.php - Datei gehen soll???

Und die Frage nach der Zentrierung fand ich noch nicht beantwortet.

Vielen lieben Dank - Der hl. Br. Steffen Härter

Die Heiligung ist nachzulesen in Hebräer 2 und Römer 11 in Verbindung mit Römer 6, wen es darin interessiert.

Ansonsten freue ich mich über einen guten Austausch unter Computer Kollegen, da ich mir das html selbst bei gebracht habe und mit Formularen mich noch nicht so gut auskenne.

Danke sehr.

[Matthias Scharwies]

Guten Morgen!

ich bin neu in Bezug auf Formular - Programmierung und ich ...

Ich habe mich gefreut, daß geantwortet wurde, aber, ich verstehe immer noch nicht die Funktionalität zum Senden des Formulares, warum es an eine config.php - Datei gehen soll???

Ja, das ist eben das Problem!

Du hast bis eben Webseiten gestaltet, bzw. damit angefangen.

Jetzt möchtest Du Daten per Formular versenden, bzw. diese Daten auf Deinem Server weiterverarbeiten. Dafür müsstest Du jetzt erst einmal grundlegendes Verständnis entwickeln.

@Rolf B hat Dir folgendes geschrieben:

Als Selfer kann ich Dir dies mitgeben:

Um ein Form serverseitig verarbeiten zu können, brauchst Du dort ein Programm. Das schreibt man zumeist in PHP. Die nächste Frage ist: was soll mit dem Form-Inhalt passieren? Willst Du ihn an Dich selbst mailen? Oder in einer Datei speichern? Einer Datenbank?

Clientseitig "weiß" das Form seinen Adressaten an Hand des action Attributs. Dort steht die URL, an die der Inhalt zu schicken ist.

Formulare im Selfwiki

Am Ende dieses Kurses hättest Du einen Link auf diesen Kurs bekommen:

• PHP/Tutorials/Formmailer_mit_Swift_Mailer

Bitte arbeite alles durch, bis du es gut verstehst und stelle nichts vorschnell ins Internet!

---

Und die Frage nach der Zentrierung fand ich noch nicht beantwortet.

Doch, @Rolf B schrieb am 09.03. um 10:19:

Zum Zentrieren auf der Seite kannst Du dem Form mittels CSS einen linken und rechten Rand der Größe "auto" geben. Du musst dann auch noch die Breite auf einen sinnvollen Wert begrenzen, z.B. mit max-width: 40em.

Zentrieren im Selfwiki

---

Bevor ich ein Möbelstück mit passenden Türen, einer Schublade und einem Schloss baue, versuche ich erst einmal die Grundlagen zu lernen.

Wenn dann die Türen passen und die Schublade nicht klemmt, kann ich anfangen mir über die Gestaltung der Oberfläche Gedanken zu machen, nehme ich Leinölfirnis oder Lack?

Und ganz zum Schluss überlege ich, wie ich es mittig an der Wand ausrichte.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Hl.* Br.* Steffen Härter

ich hatte nicht die Absicht gehabt, daß über das Christentum gesprochen wird

https://forum.selfhtml.org/cites/224

🖖 Живи довго і процвітай

[1unitedpower]

Eine Sekte?

Wenn ja, sollte man da helfen, die Seite zu verbessern?

Ich würde es nicht tun, die Seite gibt inhaltlich nicht viel her, aber die Unterdrückung von Frauen scheint eine zentrale Rolle zu spielen. Das finde ich widerlich und möchte ich nicht unterstützen.

Zitat:

Um des Sündenfalles willen hat auch der Heilige GOTT die Frau selbst untergeordnet und gesagt, daß ihr eigener Mann ihr HERR sein soll. Im Neuen Testament hat der heilige Apostel Paulus auch gesagt, daß sie nicht lehren soll.

🤮

[Rolf B]

Hallo 1unitedpower,

für wie überkommen ich Steffens Ansichten halte, habe ich auch schon geschrieben. Diese frömmelnde Sicht des Christentums dürfte auch nur selten wirklich populär gewesen sein; Ausnahmen gab es sicherlich. Die Rolle der Frau ist in der Bibel alttestamentarisch patriarchalisch dargestellt, was vermutlich vor 2000 Jahren auch in Israel nur bei den Rabbis als selbstverständlich galt. Und was war Paulus? Ein eifernder Pharisäer, der nach seinem blitzartigen Aha-Erlebnis auf dem Weg nach Damaskus zu einem eifernden Urchristen wurde und heute in Steffen einen eifernden Bruder im Geiste hat.

Das hat aber nichts mit dem Auftrag von Selfhtml zu tun, Webtechnologien zu fördern, weswegen ich das Thema auch nur einmal angesprochen und dann ausgeblendet habe. Fanatischer Christ zu sein ist nicht strafbar oder unmoralisch. Antike Rollenmodelle zu predigen ist im privaten Bereich auch nicht strafbar. Nur dumm.

Rolf

[Hl.* Br.* Steffen Härter]

hallo,

ich habe nicht danach gefragt, was auf der Internetseite steht. Wenn du das nicht glaubst, ist das deine Saache. Ich wünsche mir nur, dass das programmierte Kontaktformular funktioniert.

Gruss, Steffen Härter (nicht Stefan).

[Rolf B]

Hallo Steffen,

EDIT Nachtrag: Ich habe Unsinn gemacht, ich habe deine "Problematische Seite" gar nicht angeguckt. Statt dessen habe ich dein altes Kontaktformular gefunden. Sorry. Ich guck mir jetzt auch die neue Seite an. /EDIT

https://www.bethaus-gemeinde-gottes.de/Kontaktformular.php

Ich habe mir das html selbst beigebracht

Autsch. Fang von vorn an. Du hast doch einen Fernkurs gemacht. Wann wurde dessen Inhalt erstellt?

• Table-Layout ist Technologie von 2000. Du solltest ein Grid-Layout verwenden. Das macht dein Markup deutlich einfacher und flexibler.
• HTML Elemente wie font oder center sind seit Ewigkeiten out. Das steuert man über CSS.
• Ein 1x1 pixelspace.gif zu verwenden, um die Breite einer Tabellenzelle festzulegen, ist Quatsch. Im einfachsten Fall gib dem td in der ersten Tabellenzeile per CSS eine width. Entweder inline, als style="width:50px; height:50px", oder per Stylesheet. Das ist bei Dir bislang sehr mager ausgefallen (style Element im head). Deine Tabellenzellen haben IDs, die kannst Du im CSS so ansprechen:

#s1 {
   width: 50px;
   height: 50px;
}

Aber - wie gesagt - besser ist ein Grid-Layout für die ganze Seite. Wenn man vom Table-Layout kommt, bedeutet das allerdings einen Neuanfang. Wie man da den von Dir gestalteten Rahmen erstellt, muss ich noch schauen, aber vermutlich ist das mit einer Border sinnvoller zu lösen als mit background-image eines Füll-Elements.

Grid-Layout im Selfwiki

Du solltest auch nochmal über den Kontrast auf deiner Seite nachdenken, der Text hebt sich an einigen Stellen viel zu wenig vom Hintergrund ab. Wer schlecht sieht, sieht da gar nichts mehr. Dein „Siegel“ als „berufener Täufer“, rot auf blau, verursacht da besonderen Schmerz im Auge.

Rolf

[MudGuard]

Hi,

Wie man da den von Dir gestalteten Rahmen erstellt, muss ich noch schauen, aber vermutlich ist das mit einer Border sinnvoller zu lösen als mit background-image eines Füll-Elements.

evtl. border-image

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

evtl. border-image

Yup - gerade auch wieder eingefallen. Ich dachte, das gäb's nicht im IE, aber tatsächlich, der IE11 kann's.

Rolf

[Hl.* Br.* Steffen Härter]

Danke sehr.

[Hl.* Br.* Steffen Härter]

Hallo Steffen,

EDIT Nachtrag: Ich habe Unsinn gemacht, ich habe deine "Problematische Seite" gar nicht angeguckt. Statt dessen habe ich dein altes Kontaktformular gefunden. Sorry. Ich guck mir jetzt auch die neue Seite an. /EDIT

https://www.bethaus-gemeinde-gottes.de/Kontaktformular.php

Ich habe mir das html selbst beigebracht

Autsch. Fang von vorn an. Du hast doch einen Fernkurs gemacht. Wann wurde dessen Inhalt erstellt?

• Table-Layout ist Technologie von 2000. Du solltest ein Grid-Layout verwenden. Das macht dein Markup deutlich einfacher und flexibler.
• HTML Elemente wie font oder center sind seit Ewigkeiten out. Das steuert man über CSS.
• Ein 1x1 pixelspace.gif zu verwenden, um die Breite einer Tabellenzelle festzulegen, ist Quatsch. Im einfachsten Fall gib dem td in der ersten Tabellenzeile per CSS eine width. Entweder inline, als style="width:50px; height:50px", oder per Stylesheet. Das ist bei Dir bislang sehr mager ausgefallen (style Element im head). Deine Tabellenzellen haben IDs, die kannst Du im CSS so ansprechen:

#s1 {
   width: 50px;
   height: 50px;
}

Aber - wie gesagt - besser ist ein Grid-Layout für die ganze Seite. Wenn man vom Table-Layout kommt, bedeutet das allerdings einen Neuanfang. Wie man da den von Dir gestalteten Rahmen erstellt, muss ich noch schauen, aber vermutlich ist das mit einer Border sinnvoller zu lösen als mit background-image eines Füll-Elements.

Grid-Layout im Selfwiki

Du solltest auch nochmal über den Kontrast auf deiner Seite nachdenken, der Text hebt sich an einigen Stellen viel zu wenig vom Hintergrund ab. Wer schlecht sieht, sieht da gar nichts mehr. Dein „Siegel“ als „berufener Täufer“, rot auf blau, verursacht da besonderen Schmerz im Auge.

Rolf

Ich vergebe dir in unserem Hl. Hr. Jesus Christus von Nazareth.

[Rolf B]

Hallo Steffen,

so, jetzt guck ich auf die richtige Seite und da sieht das HTML schon viel ordentlicher aus. A-bär:

• <div class="title"> möchte ein <header> Element sein, und das h2 darin konsequenterweise ein h1. Wenn Dir die Schriftgröße oder die Abstände für das h1 nicht gefallen, ändere das mit CSS. Aber wähle nicht nur der Darstellung wegen das falsche Element.
• die beiden br unter dem Titel möchten dementsprechend gerne verschwinden und zum margin-bottom des header werden, oder zum margin-top des form.
• das <div class="Form_1"> möchte gerne ein <main> Element sein. Und es möchte gerne das tun, was im Moment dein fieldset mit class="Form_1" macht. Ich mach gleich noch ein Beispiel.
• dein form Element ist prinzipiell nicht falsch. Aber ein class="form" ist nicht nötig, du hast nur ein form auf der Seite. D.h. im CSS kannst Du den Elementselektor benutzen (was Du auch schon tust)
• die Action im form solltest Du auf das nötigste verkürzen. Deine Kontakt-Seite ist in einem Ordner deines Webs, und die Antwort schickst Du an contact.php im gleichen Ordner. Es reicht deshalb, action="contact.php" zu schreiben

main { 
   width: 30em;                /* em, nicht px! */
   border: thin groove #888;   /* groove-Border eines Fieldset */
   margin: 0 auto;             /* zentriert horizontal */
}

form {
   width: 100%;                /* Breite vom Elternelement */
   border: 3px solid blue;
   box-sizing: border-box;     /* Border in width einbeziehen */
   background-color: #eee;
}

   <main>
      <form method="post" action="contact.php">
      </form>
   </main>

• Dass Du labels zur Beschriftung verwendest, ist sehr löblich - aber nur die halbe Miete. Du musst auch einen Bezug zwischen Label und belabeltem Element herstellen. Dafür verwendet man am label das for Attribut, das auf die id des input Elements Bezug nimmt.

<label for="name">Dein Vor- und Familienname</label>
<input type="text" id="name-contact" name="name-contact">

• Jetzt hast Du zwei Attribute, id und name, die gleichen Inhalt haben. Das ist leider nicht zu ändern. Die id brauchst Du für's Label, und das name-Attribut ist nötig für den Versand an den Server. Um Konfusion zu vermeiden, ist es sinnvoll, beide gleich zu nennen.

• Ein <div class="form-group"> im fieldset ist nicht nötig. Das kannst Du weglassen

• Eine Klasse "form-control" auf den inputs scheint mir auch überflüssig

• Die Klasse input-lg deutet auf "large input" hin. Das ist auf deiner Seite noch nicht definiert, aber es wäre sinnvoll, damit die inputs zu den labels passen.

.input-lg {
   font-size: 150%;
}

• Die <br> hinter den Labels möchten weg. Statt dessen sollte das label einen margin-bottom bekommen. Irgendwas zwischen 0.8em und 1em.
• font-size und font-family kannst Du zu font zusammenfasen. Der Familyname muss dann aber wegen der Leerstelle in Anführungszeichen.

label {
   display: block;
   background-color: gold;
   margin-bottom: 1em;
   font: 1.7em "Arial Narrow";
}

• Die br zwischen den fieldsets möchten auch weg. Statt dessen gib dem Rahmen einen margin-bottom. Dummer Fallstrick: Damit bekommt auch das Fieldset mit dem Button einen Abstand nach unten. Das löst man durch einen CSS Selektor mit einer Pseudoklasse:

.Rahmen {
   border-color: blue;
}

.Rahmen:not(:last-of-type) {
   margin-bottom: 2em;
}

• dein Dropdown hat einen viel zu kleinen Font. Aber das weißt Du vermutlich schon...
• Du plenkst (=Blanks, wo sie nicht hingehören). Es heißt "Dein Vor- und Familienname" und "Deine E-Mail". Deine Schreibung "Dein Vor - und Familien - Name" ist ein typographischer Unfall.

Wenn Du das Kontaktformular in einen irgendwie gearteten Seitenrahmen einpassen willst, sieht die Gestaltung des Seitenlayouts vielleicht etwas anders aus. Das muss man sich dann im Zweifelsfall nochmal angucken.

Serverseitig kann ich Dir nicht sagen, ob das sauber ist. Dein contact.php sehe ich ja nicht. Ich warne nur vor simpel gestrickten Form-Mailern, die für Angriffe durch bösartige Eingaben in den Feldern verletzlich sind. Ein Mailformular sicher zu gestalten ist alles andere als trivial. Wir haben es in unserem Wiki aufgegeben, ein sicheres Kontaktformularscript zu empfehlen, weswegen ich das hier im Forum auch nicht tun kann.

Rolf

[Hl.* Br.* Steffen Härter]

ich danke sehr für die ausführliche Antwort.

ich studiere das jetzt heute Nachmittag.

MfG, Steffen Härter

[Hl.* Br.* Steffen Härter]

Hallo Steffen,

so, jetzt guck ich auf die richtige Seite und da sieht das HTML schon viel ordentlicher aus. A-bär:

• <div class="title"> möchte ein <header> Element sein, und das h2 darin konsequenterweise ein h1. Wenn Dir die Schriftgröße oder die Abstände für das h1 nicht gefallen, ändere das mit CSS. Aber wähle nicht nur der Darstellung wegen das falsche Element.
• die beiden br unter dem Titel möchten dementsprechend gerne verschwinden und zum margin-bottom des header werden, oder zum margin-top des form.
• das <div class="Form_1"> möchte gerne ein <main> Element sein. Und es möchte gerne das tun, was im Moment dein fieldset mit class="Form_1" macht. Ich mach gleich noch ein Beispiel.
• dein form Element ist prinzipiell nicht falsch. Aber ein class="form" ist nicht nötig, du hast nur ein form auf der Seite. D.h. im CSS kannst Du den Elementselektor benutzen (was Du auch schon tust)
• die Action im form solltest Du auf das nötigste verkürzen. Deine Kontakt-Seite ist in einem Ordner deines Webs, und die Antwort schickst Du an contact.php im gleichen Ordner. Es reicht deshalb, action="contact.php" zu schreiben

main { 
   width: 30em;                /* em, nicht px! */
   border: thin groove #888;   /* groove-Border eines Fieldset */
   margin: 0 auto;             /* zentriert horizontal */
}

form {
   width: 100%;                /* Breite vom Elternelement */
   border: 3px solid blue;
   box-sizing: border-box;     /* Border in width einbeziehen */
   background-color: #eee;
}

   <main>
      <form method="post" action="contact.php">
      </form>
   </main>

• Dass Du labels zur Beschriftung verwendest, ist sehr löblich - aber nur die halbe Miete. Du musst auch einen Bezug zwischen Label und belabeltem Element herstellen. Dafür verwendet man am label das for Attribut, das auf die id des input Elements Bezug nimmt.

<label for="name">Dein Vor- und Familienname</label>
<input type="text" id="name-contact" name="name-contact">

• Jetzt hast Du zwei Attribute, id und name, die gleichen Inhalt haben. Das ist leider nicht zu ändern. Die id brauchst Du für's Label, und das name-Attribut ist nötig für den Versand an den Server. Um Konfusion zu vermeiden, ist es sinnvoll, beide gleich zu nennen.

• Ein <div class="form-group"> im fieldset ist nicht nötig. Das kannst Du weglassen

• Eine Klasse "form-control" auf den inputs scheint mir auch überflüssig

• Die Klasse input-lg deutet auf "large input" hin. Das ist auf deiner Seite noch nicht definiert, aber es wäre sinnvoll, damit die inputs zu den labels passen.

.input-lg {
   font-size: 150%;
}

• Die <br> hinter den Labels möchten weg. Statt dessen sollte das label einen margin-bottom bekommen. Irgendwas zwischen 0.8em und 1em.
• font-size und font-family kannst Du zu font zusammenfasen. Der Familyname muss dann aber wegen der Leerstelle in Anführungszeichen.

label {
   display: block;
   background-color: gold;
   margin-bottom: 1em;
   font: 1.7em "Arial Narrow";
}

• Die br zwischen den fieldsets möchten auch weg. Statt dessen gib dem Rahmen einen margin-bottom. Dummer Fallstrick: Damit bekommt auch das Fieldset mit dem Button einen Abstand nach unten. Das löst man durch einen CSS Selektor mit einer Pseudoklasse:

.Rahmen {
   border-color: blue;
}

.Rahmen:not(:last-of-type) {
   margin-bottom: 2em;
}

• dein Dropdown hat einen viel zu kleinen Font. Aber das weißt Du vermutlich schon...
• Du plenkst (=Blanks, wo sie nicht hingehören). Es heißt "Dein Vor- und Familienname" und "Deine E-Mail". Deine Schreibung "Dein Vor - und Familien - Name" ist ein typographischer Unfall.

Wenn Du das Kontaktformular in einen irgendwie gearteten Seitenrahmen einpassen willst, sieht die Gestaltung des Seitenlayouts vielleicht etwas anders aus. Das muss man sich dann im Zweifelsfall nochmal angucken.

Serverseitig kann ich Dir nicht sagen, ob das sauber ist. Dein contact.php sehe ich ja nicht. Ich warne nur vor simpel gestrickten Form-Mailern, die für Angriffe durch bösartige Eingaben in den Feldern verletzlich sind. Ein Mailformular sicher zu gestalten ist alles andere als trivial. Wir haben es in unserem Wiki aufgegeben, ein sicheres Kontaktformularscript zu empfehlen, weswegen ich das hier im Forum auch nicht tun kann.

Rolf

Lieber Rolf,

ich verstehe das alles noch nicht so gut ...

vielleicht bekomme ich das heute Nachmittag / Abend hin.

Danke sehr für die ausf. Antwort.

MfG, Steffen Härter

[Rolf B]

Hallo Steffen,

ja, das ist viel Zeug, und man darf das Gestalten einer Webseite auch nicht unterschätzen. HTML und CSS geben Dir viele Möglichkeiten an die Hand, aber der richtige Gebrauch dieser Möglichkeiten ist eine Wissenschaft für sich und wird von vielen Tutorien nicht vermittelt.

Was man gern übersieht, ist die Darstellung einer Seite auf einem anderen Medium als dem, auf dem man entwickelt. Das fängt mit dem Handy an, geht mit der Smartwatch und dem Riesenbildschirm weiter und setzt sich bei der Sprachausgabe für einen Sehbehinderten fort. Das ist das Thema "Accessibility", und es ist hochkomplex.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Das ist das Thema "Accessibility", und es ist hochkomplex.

Bei einer interaktiven Webapp, ja.

Bei statischen Webseiten (auch mit Formularen) ist man mit korrektem HTML (wozu auch label und deren Zuordnung zu den Eingabefeldern mit for/id gehört) schon bestens dabei.

🖖 Живи довго і процвітай

[Hl.* Br.* Steffen Härter]

@@Rolf B

Das ist das Thema "Accessibility", und es ist hochkomplex.

Bei einer interaktive Webapp, ja.

Bei statischen Webseiten (auch mit Formularen) ist man mit korrektem HTML (wozu auch label und deren Zuordnung zu den Eingabefeldern mit for/id gehört) schon bestens dabei.

🖖 Живи довго і процвітай

Danke sehr für deine Antwort.

[Hl.* Br.* Steffen Härter]

Lieber Rolf,

mit for und if kenne ich mich noch gar nicht aus ....

MfG, der hl. Br. Steffen Härter

[Rolf B]

Hallo Steffen,

keine Panik, der for Befehl einer Programmiersprache hat mit dem for Attribut des <label> Elements nichts zu tun. Und id ist nicht if!

for Befehl: Programmieren einer Schleife, z.B. in PHP oder JavaScript
if Befehl: Herstellen einer Alternative im Programmablauf

👿 for (let i=0; i<10; i++) {
👿    // tue 10 mal was
👿    if (a[i] > 5) {
👿       // tu dies
👿    } else {
👿       // tu das
👿    }
👿 }

for Attribut des label Elements: Herstellen eines Bezuges vom Label zum belabelten Eingabeelement
id Attribut: Eindeutiges Kennzeichnen eines HTML Elements

😇  <label for="eingabe3">Ihr Name:</label>
😇  <input type="text" name="eingabe3" id="eingabe3">

Die id ist nur für Aktionen im Browser relevant. Außer der Verknüpfung label/input kannst Du mit der id das Element als #eingabe3 im CSS auswählen, der Browser kann ids verwenden, um ein bestimmtes HTML Element direkt an den oberen Rand des Fensters zu setzen, wenn die ID in der URL steht: http://example.org/test.html#eingabe3, man kann eine id auch in JavaScript ansprechen.

Das name Attribut ist für den Versand des form an den Server nötig, unter diesem Namen wird der eingebene Wert an den Server geschickt. Im PHP Script würdest Du den Namen dann unter $_POST['eingabe3'] finden.

Dieses contact.php Script musst Du aber erstmal bauen. Oder Du musst ein fertiges Script irgendwoher bekommen, dazu schrieb Matthias ja schon was, und dafür eine passende HTML Seite bauen, die die Eingabefelder mit den vom Script erwarteten Namen abschickt.

Rolf

[Hl.* Br.* Steffen Härter]

"Wenn Du das Kontaktformular in einen irgendwie gearteten Seitenrahmen einpassen willst, sieht die Gestaltung des Seitenlayouts vielleicht etwas anders aus. Das muss man sich dann im Zweifelsfall nochmal angucken."

Ja, wie gesagt, ich betreue als hl. Leitung eine hl. Glaubensgemeinschaft und mache viele Aufgaben nebenher. Ich versuche zeitnah zu antworten.

Ich gebe Bescheid, da ich dieses Forum hier in meinem Browser als Lesezeichen gespeichert habe.

Gebe mir, lieber Rolf, bitte noch etwas Zeit, weil ich gerade dabei bin, mit einem neuen Design zu starten und dann alles anzu gleichen.

MfG, der hl. Br. Steffen Härter

[Hl.* Br.* Steffen Härter]

body {

background-color: #29aaa3;

}


/* Das Kontaktformular */

.Form_1 {

width: 420px;
text-align: center;

}


.Rahmen {

border-color: blue;

}


form {
  background-color: #eee;
  width: 400px; /* Breite des Formulars. */
  padding: 20px;
  border: 3px solid blue;
  
}

label { /* Beschriftung auf eigener Zeile. */
  display: block;
  cursor: pointer; /* Mauszeiger wird zur Hand. */
  background-color: gold;
  font-family: Arial Narrow;
  font-size: 1.7em;
}

input#absender,
textarea {
  width: 150px;
  border: 3px solid #8c8c8c;
  margin-bottom: 1em;
}

textarea {
  height: 10em;
  width: 10em;
  background-color: gold;
  font-family: Arial Narrow;
  font-size: 1.7em;
}

input:focus,
textarea:focus 

{
  background-color: #FF9900;
}

h2 {

text-align: center;
font-family: Arial Narrow;

}		

.select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
}    .select select {
        font-family: 'Arial Narrow';
        display: inline-block;
        width: 100%;
        cursor: pointer;
        padding: 10px 15px;
        outline: 0;
        border: 0px solid #000000;
        border-radius: 7px;
        background: #FF9900;
        color: #001afb;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
        .select select::-ms-expand {
            display: none;
        }
        .select select:hover,
        .select select:focus {
            color: blue;
            background: #FF9900;
        }
        .select select:disabled {
            opacity: 0.5;
            pointer-events: none;
        }
.select_arrow {
    position: absolute;
    top: 16px;
    right: 15px;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0px 5px;
    border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select_arrow,
.select select:focus ~ .select_arrow {
    border-top-color: #000000;
}
.select select:disabled ~ .select_arrow {
    border-top-color: #cccccc;
}
			

Das steht in meiner css Datei für das Kontaktformular.

Ist das alles gut?

Es hat den Namen: Style_Kontaktformular.css

[Hl.* Br.* Steffen Härter]

Daher kommt die class="Form_1" ...

weil es konfiguriert.

[Rolf B]

Hallo Steffen,

die Datei kenne ich, die hab ich eben ja studiert als Grundlage für mein Posting 😉

Was ich an der Kombi von HTML und diesem CSS ändern würde, habe ich beschrieben.

Rolf

[Hl.* Br.* Steffen Härter]

Hallo Steffen,

die Datei kenne ich, die hab ich eben ja studiert als Grundlage für mein Posting 😉

Was ich an der Kombi von HTML und diesem CSS ändern würde, habe ich beschrieben.

Rolf

ok, danke noch mal ....

[Hl.* Br.* Steffen Härter]

Viele Dinge, lieber Rolf, kann ich noch nicht gut verstehen. Wenn ich <br><br> drin haben will, dann hat das optische Gründe ... Es sind keine Fehler. Ich freue mich, wenn es jemanden gibt, der mir das ausführlich erklären kann, wie ein Kontaktformular funktioniert.

Denn, es kommt demnächst eine Zeitung raus und da muß es sitzen.

Das bisherige Formular stammte vom Generator durch die Webseite bei www.werner-zenk.de

Kurz zu mir: Ich bin 50 Jahre, Jahrgang 1971, und habe im Januar 2022 einen Aufbaukurs in html5 bei der DAA Mannheim mit Fernkurs auf Anhieb bestanden und wir haben leider das Thema Kontaktformular zu wenig behandelt. Ich bin vor ein paar Jahren unverschuldet arbeitslos geworden, erlitt am 01.08.2020 einen 3. Bandscheibenvorfall mit nachgender, signalgebender Bandscheibe (Dauerschmerz in den Füßen) sowie Polyneuropathie (die momentan abklingt) und ich will mich für den Arbeitsmarkt vorbereiten und der 1. Bildungsgutschein vom Jobcenter (über 1000 €uro) war erfolgreich eingesetzt.

Ich habe über 13 Jahre einer Witwe gedient in dieser und ihrer Unterordnung und weiß, was Demut bedeutet. Dies geschah mit Absprache vom Jobcenter, bis sie in das Altersheim gehen mußte. Danach habe ich Zeitung ausgetragen und in der Logistik bei MBE angefangen. Im 7. Monat nach bestandener Probezeit bin ich entlassen worden, weil ich wegen einer diabetolog. Erkrankung den Führerschein abgeben mußte und den Arbeitsplatz daher verlor. Wegen der enormen Schmerzen, die ich seit dem 3. Bandscheibenvorfall hatte, ist eine Arbeit unmöglich gewesen, diese zu finden, auch jetzt.

Ich will als Programmierer und techn. Kundenbetreuer bei einem Provider anfangen und benötige diese Kenntnisse zur Erstellung von sicheren Formularen nach Kundenwünschen. Ich will das als Qualifikation anbringen können und eine Chance im Arbeitsmarkt bekommen. Wegen der PNP (Polyneuropathie) kann ich auch keinen Stapler fahren oder Krane bedienen, deren Führerscheine ich habe.

nun ja, ich hoffe, man nimmt mich ernst.

Danke sehr.

Euer hl. Br. Steffen Härter

Ich habe keine Angst, mich zu verbergen ... ich bin offen und ehrlich zu allen Menschen.

[Gunnar Bittersmann]

@@Hl.* Br.* Steffen Härter

Wenn ich <br><br> drin haben will, dann hat das optische Gründe

Und akustische Folgen.

Es sind keine Fehler.

Es ist ein Fehler, HTML-Elemente nicht ihrer Bestimmung nach, sondern nur wegen ihrer Darstellung zu verwenden.

br ist nicht dazu da, um Abstände zu erzeugen. Sondern für Zeilenumbrüche, bspw. bei Postadressen oder Gedichten/Liedtexten:

<p>Tanzt unsere Welt mit sich selbst schon im Fieber?<br/>
Liegt unser Glück nur im Spiel der Neutronen?<br/>
Wird dieser Kuss und das Wort, das ich dir gestern gab<br/>
Schon das Letzte sein?<br/>
Wird nur noch Staub und Gestein ausgebrannt alle Zeit<br/>
Auf der Erde sein?<br/>
Uns hilft kein Gott, unsere Welt zu erhalten</p>

(Karat, Der blaue Planet)

🖖 Живи довго і процвітай

[Hl.* Br.* Steffen Härter]

Im Internet fand ich:

<div>
        
        <h1>Formulare erstellen</h1><br>
        
        <form method="post">
            <label>Name:</label>
            <input type="text" name="name"> <br>
            <label>E-Mail:</label>
            <input type="email" name="email" required> <br>
            <label>Betreff:</label>
            <input type="text" name="betreff"> <br>
            <label>Nachricht:</label>
            <textarea rows="7" name="nachricht" required></textarea> <br>
            <button type="submit">Jetzt abschicken!</button>
        </form>
        
    </div>

... als ein beispiel, wenn man

die Seite als Kontakt.php abspeichert. Meine Frage ist nachwievor da, wohin schickt "post" nun meine Daten??? und wie kommt es an meine eMail?

[Gunnar Bittersmann]

@@Hl.* Br.* Steffen Härter

Im Internet fand ich:

... als ein beispiel

Leider als ein schlechtes.

Das ist falsch:

        <form method="post">
            <label>Name:</label>
            <input type="text" name="name"> <br>

Die Beschriftung (label) muss dem Eingabefeld zugeordnet werden – mit for und id. So geht das:

            <label for="name">Name:</label>
            <input type="text" name="name" id="name">

Für die anderen Eingabefelder entsprechend (mit jeweils eigener ID).

Das <br> hab ich gleich mal entsorgt. Was du stattdessen machen kannst:

          <p>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name">
          </p>
          <p>
            <label for="email">E-Mail:</label>
            <input type="email" name="email" required id="email">
          </p>

Beschriftungen von Eingabefeldern (außer Radiobuttons und Checkboxen) sollten übrigens immer über diesen stehen, nicht daneben. Das kann man mit CSS display: block erreichen.

---

Meine Frage ist nachwievor da, wohin schickt "post" nun meine Daten???

An die im action-Attribut angegebene Adresse. Wen kein solches da ist, an die Adresse der aktuellen Seite (Affenformular).

🖖 Живи довго і процвітай

[Rolf B]

Hallo Steffen,

Meine Frage ist nachwievor da, wohin schickt "post" nun meine Daten??? und wie kommt es an meine eMail?

Das habe ich Dir gestern auch schon geschrieben - es ist das action Attribut. Und ich habe Dich an den Formulare Artikel unseres Wikis verwiesen.

Wenn Du in der Informatik auch nur ein kleines bisschen vorankommen willst, musst Du zu intensivem und umfangreichem Selbststudium bereit sein. Dein Kurs war schon ein guter Anfang. Aber es bleibt eine lange, steile Lernkurve, und gelegentlich ist sie vergletschert. Du kannst nicht alles durch "erklär mir das" in einem Forum lernen. Wir helfen gern weiter, aber es ist nicht möglich, alles in einer Forendiskussion zu erklären.

Wie geschrieben - Formulareingaben zu verarbeiten erfordert ein passendes Programm am Server. In diesem würdest Du deine Mailadresse hinterlegen, damit Du die Eingaben aus dem Formular an deine Mailadresse geschickt bekommst. Matthias hat Dir den Link auf den Wiki-Artikel zum Swift-Mailer geschickt; da muss ich mich entschuldigen, ich war der irrigen Meinung, wir hätten das zurückgezogen.

Letztlich kommst Du als Webentwickler mit HTML und CSS nur dann aus, wenn Du statische Dinge präsentieren willst. Sobald Aktivität hinzu kommt, wie ein Formularversand, muss auch Logik erstellt werden, und dafür braucht man eine Programmiersprache mit for und if. Auf dem Webserver ist dafür PHP am einfachsten zu erlernen. Aber de facto sind das mehrere Lernthemen auf einmal.

• wie formuliert man eine Lösung als Computerprogramm
• wie tut man das konkret mit PHP
• welche der massenhaft vorhandenen Fertiglösungen kann ich für meinen Zweck verwenden

www.werner-zenk.de

Ja, cool, der generiert Dir ein komplettes PHP Script. Das musst Du komplett nehmen, nicht nur den HTML Teil, und als php Datei speichern. Und beim Generieren musst Du auf der ersten Seite einstellen, dass Du das Formular als Mail versenden willst. Im PHP ist dann eine Zeile

$MailTo = "....";

und für die .... trägst Du deine Mailadresse ein.

Die Frage ist dann nur, ob dein Server so eingestellt ist, dass er PHP ausführt. Das hängt von deinem Hoster ab und deinem gewählten Paket.

Allerdings ist ein Werner-Zenk-Formular keine Visitenkarte für einen Programmierer. Um die zu verdienen, musst Du im Stande sein, ein solches PHP Script selbst zu erstellen und zu verstehen.

Wobei man beachten muss, dass dieses Script kein Dogma ist. Im Gegensatz zur Bibel gibt's beim Programmieren viele Wahrheiten - auch wenn einige Programmierer so tun, als gäbe es nur eine.

Rolf