{"action":"created","issue":{"url":"https://api.github.com/repos/contao/core/issues/7292","labels_url":"https://api.github.com/repos/contao/core/issues/7292/labels{/name}","comments_url":"https://api.github.com/repos/contao/core/issues/7292/comments","events_url":"https://api.github.com/repos/contao/core/issues/7292/events","html_url":"https://github.com/contao/core/issues/7292","id":42094599,"number":7292,"title":"Inkonsistente Templates für Formulare (Change Request)","user":{"login":"cepharum","id":4108982,"avatar_url":"https://avatars.githubusercontent.com/u/4108982?v=3","gravatar_id":"","url":"https://api.github.com/users/cepharum","html_url":"https://github.com/cepharum","followers_url":"https://api.github.com/users/cepharum/followers","following_url":"https://api.github.com/users/cepharum/following{/other_user}","gists_url":"https://api.github.com/users/cepharum/gists{/gist_id}","starred_url":"https://api.github.com/users/cepharum/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cepharum/subscriptions","organizations_url":"https://api.github.com/users/cepharum/orgs","repos_url":"https://api.github.com/users/cepharum/repos","events_url":"https://api.github.com/users/cepharum/events{/privacy}","received_events_url":"https://api.github.com/users/cepharum/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/contao/core/labels/feature","name":"feature","color":"4183c4"}],"state":"open","locked":false,"assignee":{"login":"leofeyer","id":1192057,"avatar_url":"https://avatars.githubusercontent.com/u/1192057?v=3","gravatar_id":"","url":"https://api.github.com/users/leofeyer","html_url":"https://github.com/leofeyer","followers_url":"https://api.github.com/users/leofeyer/followers","following_url":"https://api.github.com/users/leofeyer/following{/other_user}","gists_url":"https://api.github.com/users/leofeyer/gists{/gist_id}","starred_url":"https://api.github.com/users/leofeyer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/leofeyer/subscriptions","organizations_url":"https://api.github.com/users/leofeyer/orgs","repos_url":"https://api.github.com/users/leofeyer/repos","events_url":"https://api.github.com/users/leofeyer/events{/privacy}","received_events_url":"https://api.github.com/users/leofeyer/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/contao/core/milestones/60","html_url":"https://github.com/contao/core/milestones/4.0.0","labels_url":"https://api.github.com/repos/contao/core/milestones/60/labels","id":251570,"number":60,"title":"4.0.0","description":"Contao 4.0.0 (major release)","creator":{"login":"leofeyer","id":1192057,"avatar_url":"https://avatars.githubusercontent.com/u/1192057?v=3","gravatar_id":"","url":"https://api.github.com/users/leofeyer","html_url":"https://github.com/leofeyer","followers_url":"https://api.github.com/users/leofeyer/followers","following_url":"https://api.github.com/users/leofeyer/following{/other_user}","gists_url":"https://api.github.com/users/leofeyer/gists{/gist_id}","starred_url":"https://api.github.com/users/leofeyer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/leofeyer/subscriptions","organizations_url":"https://api.github.com/users/leofeyer/orgs","repos_url":"https://api.github.com/users/leofeyer/repos","events_url":"https://api.github.com/users/leofeyer/events{/privacy}","received_events_url":"https://api.github.com/users/leofeyer/received_events","type":"User","site_admin":false},"open_issues":12,"closed_issues":41,"state":"open","created_at":"2013-01-25T12:15:50Z","updated_at":"2015-05-05T13:24:13Z","due_on":"2015-05-25T07:00:00Z","closed_at":null},"comments":16,"created_at":"2014-09-05T21:54:46Z","updated_at":"2015-05-05T13:58:37Z","closed_at":null,"body":"In Contao 3.3.5 fallen mir recht unterschiedliche Formulare auf, die es teilweise erforderlich machen, beim Anwenden eines möglichst einheitlichen Designs mehrere CSS-Selektoren zu nutzen, damit alle Formulare homogen erscheinen. In #6238 wurde eine Revision der Formulare erwähnt, die aber noch nachbesserungswürdig zu sein scheint.\r\n\r\nIch bin mir natürlich dessen bewusst, dass sich für eine Upgrade-Fähigkeit die Formulargestaltung nicht ständig ändern sollte. Daher wäre das IMHO eine Möglichkeit für den nächsten Major-Step (4.0).\r\n\r\n## Beispiele\r\n\r\n### Formulargenerator\r\n\r\nWenn ich im Formulargenerator ein Formular erzeuge, dann sieht das im HTML so aus:\r\n\r\n```\r\n<div class=\"formbody\">\r\n <div class=\"mandatory\">\r\n  <label for=\"ctrl_1\" class=\"mandatory\">label</label>\r\n  <input name=\"a\" id=\"ctrl_1\" class=\"text mandatory\" value=\"\" required=\"\" type=\"text\">\r\n </div>\r\n <div class=\"explanation\">\r\n  <p>Text</p>\r\n </div>\r\n <div>\r\n  <label for=\"ctrl_2\">label</label>\r\n  <input name=\"b\" id=\"ctrl_2\" class=\"text\" value=\"\" type=\"text\">\r\n </div>\r\n <div>\r\n  <label for=\"ctrl_3\">label</label>\r\n  <input name=\"c\" id=\"ctrl_3\" class=\"text\" value=\"\" type=\"text\">\r\n </div>\r\n <div class=\"mandatory\">\r\n  <label for=\"ctrl_4\" class=\"mandatory\">label</label>\r\n  <textarea name=\"d\" id=\"ctrl_4\" class=\"textarea mandatory\" rows=\"10\" cols=\"40\" required=\"\"></textarea>\r\n </div>\r\n <div class=\"error\">\r\n  <p class=\"error\">Bitte beantworten Sie die Sicherheitsfrage!</p>\r\n  <input name=\"c20988cf39afe379abd5beda3d0c951d5\" id=\"ctrl_5\" class=\"captcha mandatory error\" value=\"\" maxlength=\"2\" required=\"\" type=\"text\">\r\n  <span class=\"captcha_text error\">Bitte rechnen Sie 5 plus 2.</span>\r\n </div>\r\n <div class=\"submit_container\">\r\n  <input id=\"ctrl_6\" class=\"submit submit_container\" value=\"Senden\" type=\"submit\">\r\n </div>\r\n</div>\r\n```\r\n\r\nDer Selektor für das Label eines Felds wäre hier exemplarisch  `.formbody > div > label`. \r\n\r\nDass die Submit-Schaltfläche selbst noch einmal als \"submit_**container**\" ausgezeichnet wurde, ist vermutlich ein Versehen.\r\n\r\n### Mitglieder-Login\r\n\r\nDemgegenüber wird das Formular für den Mitglieder-Login noch nach einem älteren Stand gerendert:\r\n\r\n```\r\n<div class=\"formbody\">\r\n <input name=\"FORM_SUBMIT\" value=\"tl_login\" type=\"hidden\">\r\n <input name=\"REQUEST_TOKEN\" value=\"token\" type=\"hidden\">\r\n <label for=\"username\">Benutzername</label>\r\n <input name=\"username\" id=\"username\" class=\"text\" value=\"\" type=\"text\"><br>\r\n <label for=\"password\">Passwort</label>\r\n <input name=\"password\" id=\"password\" class=\"text password\" value=\"\" type=\"password\">\r\n <div class=\"checkbox_container\">\r\n <input name=\"autologin\" id=\"autologin\" value=\"1\" class=\"checkbox\" type=\"checkbox\"> <label for=\"autologin\">Angemeldet bleiben</label>\r\n </div>\r\n <div class=\"submit_container\">\r\n  <input class=\"submit\" value=\"Anmelden\" type=\"submit\">\r\n </div>\r\n</div>\r\n```\r\n\r\nDie Nutzung von `<br>` erscheint mir generell fragwürdig, da es Aufgaben zur visuellen Gestaltung von Nicht-Fließtext-Inhalt wahrnimmt und darum unnötig im CSS entfernt werden muss, wenn man es nicht wünscht, mal davon abgesehen, dass es bspw. zwischen den ersten beiden Feldern erscheint, vor dem Checkbox hingegen nicht, weil dieses in einem `<div/>` liegt. Sich hier auf visuelle Eigenschaften im Browser zu verlassen erscheint mir unvorteilhaft, doch vermutlich wurden darum andere Fälle bereits korrigiert.\r\n\r\n### Passwort vergessen / Mitglieder-Registrierung\r\n\r\nBeim Passwort-Vergessen-Formular und beim Mitglied-Registrieren-Formular hingegen findet sich eine leicht anders geartete Revision der Templates:\r\n\r\n```\r\n<div class=\"formbody\">\r\n <input name=\"FORM_SUBMIT\" value=\"tl_lost_password\" type=\"hidden\">\r\n <input name=\"REQUEST_TOKEN\" value=\"token\" type=\"hidden\">\r\n <div class=\"fields\">\r\n  <div class=\"mandatory\">\r\n   <label for=\"ctrl_email\" class=\"mandatory\">\r\n    <span class=\"invisible\">Pflichtfeld</span> E-Mail-Adresse<span class=\"mandatory\">*</span>\r\n   </label>\r\n   <input name=\"email\" id=\"ctrl_email\" class=\"text mandatory\" value=\"\" required=\"\" maxlength=\"255\" type=\"email\">\r\n  </div>\r\n  <div>\r\n   <label for=\"ctrl_lost_password\">Sicherheitsfrage</label>\r\n   <input name=\"secret\" id=\"ctrl_lost_password\" class=\"captcha mandatory\" value=\"\" maxlength=\"2\" required=\"\" type=\"text\">\r\n   <span class=\"captcha_text\">Bitte rechnen Sie 6 plus 4.</span>\r\n  </div>\r\n </div>\r\n <div class=\"submit_container\">\r\n  <input class=\"submit\" value=\"Neues Passwort anfordern\" type=\"submit\">\r\n </div>\r\n</div>\r\n```\r\n\r\nZum einen existiert hier ein zusätzlicher Container .fields um alle Elemente, abgesehen vom Submit. Auch ist die Gestaltung des Captcha im CSS schwerer zu fixieren, weil man bspw. für ein 2-spaltiges Layout das label floaten lassen muss, das input und span aber zusammen um das label floaten müssten, damit sie sauber in der rechten Spalte bleiben.\r\n\r\n## Lösungsvorschlag\r\n\r\nMan könnte alle Formulare nach einem einheitlichen HTML-System erzeugen lassen, \r\n* das nicht nur abwärtskompatibel ist, sondern \r\n* mit nur wenigen CSS-Regeln jeweils \r\n  * entweder ein 2-spaltiges Layout per float oder aber \r\n  * als Tabelle mit flexibler Breite  oder \r\n  * eine komplett alternative Anordnungen (1-zeilig statt 2-zeilig) auf einem Smartphone odgl. erlabt:\r\n\r\n```\r\n<div class=\"formbody\">\r\n  <div class=\"field field-type-bspw-email\">\r\n    <label>text<span class=\"mandatory\">*</span></label>\r\n    <div>\r\n      <input> oder <textarea> oder <select> ...\r\n    </div>\r\n  </div>\r\n  <div class=\"field password error\">\r\n    <label>text</label>\r\n    <div>\r\n      <span class=\"error\">Das Passwort ist falsch!</span>\r\n      <input type=\"password\" ...>\r\n    </div>\r\n  </div>\r\n  <div class=\"field captcha\">\r\n    <label></label>\r\n    <div>\r\n      <input type=\"answer\">\r\n      <span>the calculation</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"field submit\">\r\n    <label></label>\r\n    <div>\r\n      <input type=\"submit\">\r\n    </div>\r\n  </div>\r\n</div>\r\n```\r\n\r\n* Die Markierung, welche Art von Element in der Zeile vorliegt, könnte auf dem Zeilen-Container als Klasse ausreichend sein und so alle Optionen für das Styling offenhalten, bspw. um zwischen einem `.captcha` und einem `.submit` einen anderen Abstand einzubauen als zwischen einem `.select` und einem `.submit`.\r\n\r\n### Design für 2-spaltige Darstellung per float (linke Spalte mit fester Breite)\r\n\r\n```\r\n.formbody > .field, \r\n.formbody > .field > * { \r\n  position: relative; \r\n  overflow: hidden; \r\n}\r\n.formbody > .field > * { \r\n  float: left; \r\n}\r\n.formbody > .field > label {\r\n  width: 10em;\r\n}\r\n```\r\n\r\n* Da alle Elemente der rechten Spalte in einem eigenen Container sind, kann man diesen unabhängig per `position:relative;overflow:hidden;` _einsperren_, damit sie definitiv nicht unter das Label nach links rutschen können, wenn die rechte Spalte weit und oft genug umbricht. In den jetzt vorliegenden Formularen wäre eine solche Stabilisierung komplexer Inhalte neben dem Label nicht wirklich realisierbar.\r\n* Der `*` im Selektor ist zugegeben nicht optimal, doch durch das `>` ja durchaus stark eingeschränkt, so dass die Performance eher kaum leiden dürfte.\r\n\r\n### Design für 2-spaltige Darstellung (linke Spalte mit variabler Breite)\r\n\r\n```\r\n.formbody {\r\n  display: table;\r\n}\r\n.formbody > .field {\r\n  display: table-row;\r\n}\r\n.formbody > .field > * {\r\n  display: table-cell;\r\n}\r\n```\r\n\r\n* Elemente über die volle Breite wären hierbei nur bedingt realisierbar, doch bliebe dann noch der vorherige Ansatz mit float als Alternative. Ich persönlich finde es übersichtlicher, wenn Erklärungen in einem Formular ebenfalls auf die rechte Spalte begrenzt sind, doch das ist natürlich sehr subjektiv.\r\n\r\n### 1-spaltig\r\n\r\n```\r\n.formbody > .field > label,\r\n.formbody > .captcha > span {\r\n  display: block;\r\n}\r\n```\r\n\r\nIch hatte unter 2.x mal eine Extension entwickelt, die entsprechend die Standardtemplates des Formulargenerators überlud, doch auch dieser Ansatz würde jetzt nicht optimal greifen, solange im Core verschiedene Quellen zum Generieren von Formularen genutzt werden und jeweils gesondert angepasst werden müssten."},"comment":{"url":"https://api.github.com/repos/contao/core/issues/comments/99085356","html_url":"https://github.com/contao/core/issues/7292#issuecomment-99085356","issue_url":"https://api.github.com/repos/contao/core/issues/7292","id":99085356,"user":{"login":"cepharum","id":4108982,"avatar_url":"https://avatars.githubusercontent.com/u/4108982?v=3","gravatar_id":"","url":"https://api.github.com/users/cepharum","html_url":"https://github.com/cepharum","followers_url":"https://api.github.com/users/cepharum/followers","following_url":"https://api.github.com/users/cepharum/following{/other_user}","gists_url":"https://api.github.com/users/cepharum/gists{/gist_id}","starred_url":"https://api.github.com/users/cepharum/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cepharum/subscriptions","organizations_url":"https://api.github.com/users/cepharum/orgs","repos_url":"https://api.github.com/users/cepharum/repos","events_url":"https://api.github.com/users/cepharum/events{/privacy}","received_events_url":"https://api.github.com/users/cepharum/received_events","type":"User","site_admin":false},"created_at":"2015-05-05T13:58:37Z","updated_at":"2015-05-05T13:58:37Z","body":"@leofeyer Um nochmal auf meinen obigen Lösungsvorschlag zurückzukommen und mit deinem Vorschlag zu vergleichen: dein Vorschlag bildet noch keine möglichen Fehlermeldungen oder dergleichen ab. Sofern diese auch weiterhin geplant sind, würde ich sehr die Grundstruktur\r\n\r\n```html\r\n<div>\r\n  <label/>\r\n  <div>\r\n    <input/>\r\n    <span/>\r\n  </div>\r\n</div>\r\n```\r\n\r\npro Formularzeile vorschlagen. Dies erlaubt durch Floating oder auch durch Anwendung von `display:table-cell` auf das `<label/>` und dessen nebenrangiges `<div/>` ein Nebeneinanderlegen dieser beiden und das gesicherte Limitieren einer Fehlermeldung auf die \"rechte Spalte\". Ich hatte das oben in meinem Lösungsvorschlag so exemplarisch abgebildet. Einzeilige Labels und mehrzeilige Felder (Captcha mit Fehler bspw.) rechts daneben würden so sich prima floaten oder eben per CSS zu zweispaltigen Tabellen stylen lassen."}}