Die Webseite soll nun mit einem Formular versch\u00f6nert werden. Dieser Artikel stellt die ersten 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 <\/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 Noch mehr Formularelemente gibt es im n\u00e4chsten Artikel\u2026<\/p>\n","protected":false},"excerpt":{"rendered":" Die Webseite soll nun mit einem Formular versch\u00f6nert werden. Dieser Artikel stellt die ersten Formularelemente vor\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-212","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\/212","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=212"}],"version-history":[{"count":7,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/212\/revisions"}],"predecessor-version":[{"id":311,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/212\/revisions\/311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<form action=\u201cDatei oder Pfad\u201c method=\u201cpost\u201c>\nVorname: [Einzeiliges Eingabefeld]\n<br \/>\n<input type=\u201ctext\u201c name=\u201cvorname\u201c size=\u201c30\u2033 maxlength=\u201c30\u2033>\n<input type=\u201csubmit\u201c value=\u201cAbsenden\u201c>\n<input type=\u201creset\u201c value=\u201cReset\u201c>\n<br \/><br \/>\n<\/form><\/code><\/pre>\n\n\n\n<form>\nFormular-Elemente und Beschriftung\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cutf-8\u2033>\nVorname: [Einzeiliges Eingabefeld]\n<br \/>\n<input type=\u201ctext\u201c name=\u201cvorname1\u2033 size=\u201c30\u2033 maxlength=\u201c30\u2033>\n<br \/><br \/>\nVorname: [Einzeiliges Eingabefeld mit Textvorbelegung]\n<br \/>\n<input type=\u201ctext\u201c name=\u201cvorname2\u2033 size=\u201c30\u2033 maxlength=\u201c30\u2033 value=\u201cWert\u201c>\n<\/form><\/code><\/pre>\n\n\n\n<form action=\u201cDateipfad\u201c method=\u201cpost\u201c accept-charset=\u201cutf-8\u2033>\nPasswort: [Eingabefeld f\u00fcr Passw\u00f6rter]\n<br \/>\n<input type=\u201cpassword\u201c name=\u201cpasswort\u201c size=\u201c12\u2033 maxlength=\u201c12\u2033>\n<\/form><\/code><\/pre>\n\n\n\n<form>\n<textarea name=\u201cuser_eingabe\u201c cols=\u201c50\u2033 rows=\u201c10\u2033><\/textarea>\n<textarea name=\u201cuser_eingabe\u201c cols=\u201c50\u2033 rows=\u201c10\u2033>Textvorbelegung<\/textarea>\n<textarea name=\u201cuser_eingabe\u201c cols=\u201c50\u2033 rows=\u201c10\u2033 readonly>Textausgabe<\/textarea>\n<\/form><\/code><\/pre>\n\n\n\n