Die Webseite soll nun mit einem Formular versch\u00f6nert werden. Dieser Artikel stellt die Formularelemente vor\u2026<\/p>\n\n\n\n\n\n\n\n
Formulare f\u00fcr die Webseite:<\/strong><\/p>\n\n\n\n Mit dem form-Element werden im HTML Quelltext Formulare erstellt. Da HTML Formulare f\u00fcr Benutzereingaben so dringend gebraucht werden, macht es Sinn sich den Aufbau solcher Formulare genauer anzusehen.<\/p>\n\n\n\n Der Grundaufbau sieht so aus:<\/p>\n\n\n\n Noch grunds\u00e4tzlicher schaut die Sache so aus:<\/p>\n\n\n\n Das form-Element wird also ge\u00f6ffnet und bekommt noch einige Zusatzangaben mit auf den Weg (die hier teilweise noch fehlen). Innerhalb des form-Elementes werden dann die Beschriftungen und die einzelnen Formular-Elemente eingebaut.<\/p>\n\n\n\n Wenn alle Formular-Elemente verbaut sind wird das form-Element wieder geschlossen.<\/p>\n\n\n\n Der Grundaufbau ist also identisch zu allen anderen HTML-Elementen. Die Kunst der Formulargestaltung ist die optimale Anordnung der Formularelemente und von denen gibt es ganz sch\u00f6n viele\u2026<\/p>\n\n\n\n Eingabefelder und Textarea:<\/strong><\/p>\n\n\n\n Das einfachste Formularelement ist das Eingabefeld. Es gibt zwei Varianten davon. Einmal ein leeres Eingabefeld und eines mit Textvorbelegung.<\/p>\n\n\n\n Dann gibt es noch ein Eingabefeld f\u00fcr Passw\u00f6rter.<\/p>\n\n\n\n Auch bei der Textarea, den Textfeldern gibt es verschiedene Varianten.<\/p>\n\n\n\n Der Aufbau bleibt aber wie erw\u00e4hnt:<\/p>\n\n\n\n Auswahllisten und Dropdowns:<\/strong><\/p>\n\n\n\n Ohne viel Worte \u2013 hier der HTML Quelltext zu den Auswahllisten:<\/p>\n\n\n\n Radiokn\u00f6pfe:<\/strong><\/p>\n\n\n\n Checkbox:<\/strong><\/p>\n\n\n\n Upload-Formularfeld:<\/strong><\/p>\n\n\n\n Absende-Button und Reset Button:<\/strong><\/p>\n\n\n\n Fieldset und Legend:<\/strong><\/p>\n\n\n\n Klick-Buttons:<\/strong><\/p>\n\n\n\n Buttons, also Schaltkn\u00f6pfe\/Schaltfl\u00e4chen k\u00f6nnen auch selber definiert werden\u2026<\/p>\n\n\n\n Das kleine Beispiel-Formular:<\/strong><\/p>\n\n\n\n Nochmal als Info: Diese Quelltexte sind noch keine vollst\u00e4ndigen Formulare sondern stellen nur die einzelnen Formularelemente vor.<\/p>\n\n\n\n Ein kleines Beispiel-Formular k\u00f6nnte so aussehen:<\/p>\n\n\n\n Textvorbelegung mit Placeholder:<\/strong><\/p>\n\n\n\n Pflichtfeld mit Required:<\/strong><\/p>\n\n\n\n Das neue \u201erequired\u201c Attribut ist schon der Knaller, wenn versucht wird das Formular leer abzuschicken, dann gibt es eine Warnung<\/p>\n\n\n\n Autofocus:<\/strong><\/p>\n\n\n\n Per \u201eautofocus\u201c wird der Cursor im entsprechenden Formularfeld positioniert.<\/p>\n\n\n\n Formularfeld f\u00fcr E-Mail:<\/strong><\/p>\n\n\n\n F\u00fcr E-Mail Adressen gibt es ab HTML5 auch ein eigenes input-Element.<\/p>\n\n\n\n Dieses neue Formularelement wird in PHP noch eine Rolle spielen, denn hier wird schon auf HTML Ebene ein Formularcheck durchgef\u00fchrt, ob eine g\u00fcltige Mailadresse eingegeben wurde.<\/p>\n\n\n\n Formularfeld f\u00fcr Webadresse:<\/strong><\/p>\n\n\n\n Auch das Webadresse-Feld pr\u00fcft schon die Eingabe<\/p>\n\n\n\n Formularfeld f\u00fcr Telefonnummer:<\/strong><\/p>\n\n\n\n Die Webseite soll nun mit einem Formular versch\u00f6nert werden. Dieser Artikel stellt die Formularelemente vor\u2026<\/p>\n","protected":false},"author":1,"featured_media":545,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-710","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=710"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/710\/revisions"}],"predecessor-version":[{"id":730,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/710\/revisions\/730"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/545"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<form action=\u201cDatei oder Pfad\u201c method=\u201cpost\u201c>\n\nVorname: [Einzeiliges Eingabefeld]\n\n<br \/>\n\n<input type=\u201ctext\u201c name=\u201cvorname\u201c size=\u201c30\u2033 maxlength=\u201c30\u2033>\n\n<input type=\u201csubmit\u201c value=\u201cAbsenden\u201c>\n\n<input type=\u201creset\u201c value=\u201cReset\u201c>\n\n<br \/><br \/>\n\n<\/form><\/code><\/pre>\n\n\n\n<form>\n\nFormular-Elemente und Beschriftung\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cutf-8\u2033>\n\nVorname: [Einzeiliges Eingabefeld]\n\n<br \/>\n\n<input type=\u201ctext\u201c name=\u201cvorname1\u2033 size=\u201c30\u2033 maxlength=\u201c30\u2033>\n\n<br \/><br \/>\n\nVorname: [Einzeiliges Eingabefeld mit Textvorbelegung]\n\n<br \/>\n\n<input type=\u201ctext\u201c name=\u201cvorname2\u2033 size=\u201c30\u2033 maxlength=\u201c30\u2033 value=\u201cWert\u201c>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cutf-8\u2033>\n\nPasswort: [Eingabefeld f\u00fcr Passw\u00f6rter]\n\n<br \/>\n\n<input type=\u201cpassword\u201c name=\u201cpasswort\u201c size=\u201c12\u2033 maxlength=\u201c12\u2033>\n\n<\/form><\/code><\/pre>\n\n\n\n<form>\n\n<textarea name=\u201cuser_eingabe\u201c cols=\u201c50\u2033 rows=\u201c10\u2033><\/textarea>\n\n<textarea name=\u201cuser_eingabe\u201c cols=\u201c50\u2033 rows=\u201c10\u2033>Textvorbelegung<\/textarea>\n\n<textarea name=\u201cuser_eingabe\u201c cols=\u201c50\u2033 rows=\u201c10\u2033 readonly>Textausgabe<\/textarea>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\nAuswahlliste: [Dropdown]\n\n<br \/>\n\n<select name=\u201ctop5\u2033 size=\u201c1\u2033>\n\n<option>Person 1<\/option>\n\n<option>Person 2<\/option>\n\n<option>Person 3<\/option>\n\n<option>Person 4<\/option>\n\n<option>Person 5<\/option>\n\n<\/select>\n\n<br \/><br \/>\n\nAuswahlliste mit Mehrfachauswahl:\n\n<br \/>\n\n<select name=\u201cchart2\u2033 size=\u201c5\u2033 multiple=\u201cmultiple\u201c>\n\n<option>Mensch 1<\/option>\n\n<option>Mensch 2<\/option>\n\n<option>Mensch 3<\/option>\n\n<option>Mensch 4<\/option>\n\n<option>Mensch 5<\/option>\n\n<\/select>\n\n<br \/><br \/>\n\nAuswahlliste mit Mehrfachauswahl und Vorselektion:\n\n<br \/>\n\n<select name=\u201cchart2\u2033 size=\u201c5\u2033 multiple=\u201cmultiple\u201c>\n\n<option>Lebewesen 1<\/option>\n\n<option selected=\u201cselected\u201c>Lebewesen 2<\/option>\n\n<option>Lebewesen 3<\/option>\n\n<option>Lebewesen 4<\/option>\n\n<option>Lebewesen 5<\/option>\n\n<\/select>\n\n<br \/><br \/>\n\nAuswahlliste mit Absendewert:\n\n<br \/>\n\n<select name=\u201cchart2\u2033 size=\u201c5\u2033 multiple=\u201cmultiple\u201c>\n\n<option>Kreatur 1<\/option>\n\n<option value=\u201cAbsendewert\u201c>Kreatur 2<\/option>\n\n<option>Kreatur 3<\/option>\n\n<option>Kreatur 4<\/option>\n\n<option>Kreatur 5<\/option>\n\n<\/select>\n\n<br \/><br \/>\n\nVerschachtelte Auswahlliste:\n\n<br \/>\n\n<select name=\u201cNamen\u201c size=\u201c6\u2033>\n\n<optgroup label=\u201cNamen mit A\u201c>\n\n<option label=\u201cAnna\u201c>Anna<\/option>\n\n<option label=\u201cAchim\u201c>Achim<\/option>\n\n<option label=\u201cAndreas\u201c>Andreas<\/option>\n\n<\/optgroup>\n\n<optgroup label=\u201cNamen mit B\u201c>\n\n<option label=\u201cBerta\u201c>Berta<\/option>\n\n<option label=\u201cBarbara\u201c>Barbara<\/option>\n\n<option label=\u201cBernd\u201c>Bernd<\/option>\n\n<\/optgroup>\n\n<optgroup label=\u201cNamen mit C\u201c>\n\n<option label=\u201cCaesar\u201c>Caesar<\/option>\n\n<option label=\u201cChristine\u201c>Christine<\/option>\n\n<option label=\u201cChristian\u201c>Christian<\/option>\n\n<\/optgroup>\n\n<\/select>\n\n<br \/><br \/>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\nRadio-Buttons:\n\n<br \/>\n\n<input type=\u201cradio\u201c name=\u201cZahlmethode\u201c value=\u201cMastercard\u201c> Mastercard<br>\n\n<input type=\u201cradio\u201c name=\u201cZahlmethode\u201c value=\u201cVisa\u201c> Visa<br>\n\n<input type=\u201cradio\u201c name=\u201cZahlmethode\u201c value=\u201cAmericanExpress\u201c> American Express\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\nCheckboxen:\n\n<br \/>\n\n<input type=\u201ccheckbox\u201c name=\u201czutat\u201c value=\u201csalami\u201c> Salami<br>\n\n<input type=\u201ccheckbox\u201c name=\u201czutat\u201c value=\u201cpilze\u201c> Pilze<br>\n\n<input type=\u201ccheckbox\u201c name=\u201czutat\u201c value=\u201csardellen\u201c> Sardellen\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\nUpload-Formularelement: [hier ohne enctype=\u201cmultipart\/form-data\u201c im \u201eform-Element\u201c]\n\n<br \/>\n\n<input type=\u201cfile\u201c name=\u201cDatei\u201c size=\u201c50\u2033 maxlength=\u201c100000\u2033 accept=\u201ctext\/txt\u201c>\n\n<br \/><br \/>\n\nVersteckte Formularfelder: [Der Inhalt von \u201evalue\u201c wird versteckt \u00fcbermittelt]\n\n<br \/>\n\n<input type=\u201chidden\u201c name=\u201chiddeninfo\u201c value=\u201cDieses Formular wurde von Webseite X verschickt. Der Inhalt von value wird\n\nversteckt \u00fcbermittelt.\u201c>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\n<input type=\u201csubmit\u201c value=\u201cAbsenden \u201e>\n\n<input type=\u201creset\u201c value=\u201cAbbrechen\u201c>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\nFormularelemente gruppieren:\n\n<br \/>\n\n<fieldset>\n\n<legend>Absender<\/legend>\n\n<br \/>\n\n<input type=\u201ctext\u201c size=\u201c40\u2033 maxlength=\u201c40\u2033 name=\u201cVorname\u201c>\n\n<br \/>\n\n<input type=\u201ctext\u201c size=\u201c40\u2033 maxlength=\u201c40\u2033 name=\u201cVorname\u201c>\n\n<br \/>\n\n<input type=\u201ctext\u201c size=\u201c40\u2033 maxlength=\u201c40\u2033 name=\u201cVorname\u201c>\n\n<br \/><br \/>\n\n<\/fieldset>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\n<br \/>\n\nSchaltfl\u00e4che: [Klick-Button ohne Event-Handler onclick]\n\n<br \/>\n\n<input type=\u201cbutton\u201c name=\u201cText 1\u2033 value=\u201cLED 01 einschalten\u201c>\n\n<input type=\u201cbutton\u201c name=\u201cText 1\u2033 value=\u201cLED 01 ausschalten\u201c>\n\n<br \/><br \/>\n\nSchaltfl\u00e4che mit Grafik: [Klick-Button ohne Event-Handler onclick]\n\n<br \/>\n\n<input type=\u201cbutton\u201c name=\u201cText 1\u2033 value=\u201cLED 01 einschalten\u201c>\n\n<input type=\u201cbutton\u201c name=\u201cText 1\u2033 value=\u201cLED 01 ausschalten\u201c>\n\n<input type=\u201cimage\u201c src=\u201cDATEINAME\u201c alt=\u201cBild als Button\u201c>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\nVorname:\n\n<br \/>\n\n<input type=\u201ctext\u201c name=\u201cvorname\u201c size=\u201c30\u2033 maxlength=\u201c30\u2033 value=\u201cVorname eintragen\u2026\u201c>\n\n<br \/><br \/>\n\nNachname:\n\n<br \/>\n\n<input type=\u201ctext\u201c name=\u201cnachname\u201c size=\u201c30\u2033 maxlength=\u201c30\u2033 value=\u201cNachname eintragen\u2026\u201c>\n\n<br \/><br \/>\n\n<input type=\u201csubmit\u201c value=\u201cAbsenden \u201e>\n\n<input type=\u201creset\u201c value=\u201cAbbrechen\u201c>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\n<input type=\u201ctext\u201c name=\u201cvorname\u201c placeholder=\u201cMax Mustermann\u201c > Textvorbelegung\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\n<input type=\u201ctext\u201c name=\u201cname\u201c required > Pflichtfeld mit required\n\n<br \/><br \/>\n\n<input type=\u201csubmit\u201c value=\u201cAbsenden \u201e>\n\n<input type=\u201creset\u201c value=\u201cAbbrechen\u201c>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\n<input type=\u201ctext\u201c name=\u201cvorname\u201c required autofocus > Vorname Pflichtfeld mit required und autofocus\n\n<input type=\u201ctext\u201c name=\u201cnachname\u201c required > Nachname Pflichtfeld mit required\n\n<input type=\u201ctext\u201c name=\u201cort\u201c required > Ort Pflichtfeld mit required\n\n<br \/><br \/>\n\n<input type=\u201csubmit\u201c value=\u201cAbsenden \u201e>\n\n<input type=\u201creset\u201c value=\u201cAbbrechen\u201c>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\n<input type=\u201cemail\u201c name=\u201cvorname\u201c size=\u201c40\u2033 maxlength=\u201c40\u2033 placeholder=\u201cE-Mail Adresse eintragen\u201c > E-Mail Formularelement\n\n<br \/><br \/>\n\n<input type=\u201csubmit\u201c value=\u201cAbsenden \u201e>\n\n<input type=\u201creset\u201c value=\u201cAbbrechen\u201c>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\n<input type=\u201curl\u201c name=\u201cvorname\u201c size=\u201c40\u2033 maxlength=\u201c40\u2033 placeholder=\u201cWebadresse eintragen\u201c > Webadresse Formularelement\n\n<br \/><br \/>\n\n<input type=\u201csubmit\u201c value=\u201cAbsenden \u201e>\n\n<input type=\u201creset\u201c value=\u201cAbbrechen\u201c>\n\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cZeichencodierung\u201c>\n\n<input type=\u201ctel\u201c name=\u201cvorname\u201c size=\u201c40\u2033 maxlength=\u201c40\u2033 placeholder=\u201cTelefonnr. eintragen\u201c > Telefonnummer Formularelement\n\n<br \/><br \/>\n\n<input type=\u201csubmit\u201c value=\u201cAbsenden \u201e>\n\n<input type=\u201creset\u201c value=\u201cAbbrechen\u201c>\n\n<\/form><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"