Einfaches Formular in pur HTML, das schön aussieht

form
tool
program
html

#1

Hi,
meine Frage ist ganz einfach, gibt es ein Tool/Programm, um einfache, minimale und schöne HTML-Formulare zu erstellen, ABER ohne CSS und den gesamten Overhead?

Ich möchte dass dann in eine andere Auszeichnungssprache “transformieren”.

Speziell soll es ein Textfeld E-Mail geben, in dem email@example.com steht, ein Passwortfeld, das “verdeckt” ist, ein confirm-Feld und einen Absenden-Button. Jeweils oberhalb ein Label, damit der Besucher weiß, was er nochmal eintippen sollte, und das Ganze als Block/div, damit es mehrere Formulare gibt.


#2

CSS ist dafür gemacht, die Möglichkeiten mit reinem HTML sind begrenzt. Natürlich muss das CSS nicht in einer gesonderten Datei stehen, du kannst es auch in die style-Attribute der jeweiligen Tags packen - vielleicht nicht ganz so effizient, aber für deinen Anwendungsfall möglicherweise bequemer.


#3

Deine Frage hat für mich zu wenig Kontext. Du willst etwas, was dir ein simples HTML Formular mit CSS generiert, ohne dass du dafür CSS können musst, korrekt? Ist es danach von Bedeutung, dass du es in irgendeine andere Markup Sprache umwandeln möchtest? Wenn ja, benenne diese bitte, wenn nicht, lass die Information weg, das verwirrt nur.

Meinst du mit “verdecktem” Passwort Feld, dass bei der Eingabe nur ******* da steht? Also ein… Passwort Feld? Schön ist natürlich relativ. Minimal wäre ein Table mit labels, inputs und einem Button. Ein Login Formular ist ja sehr simpel, ich würde da einfach mal ein Bootstrap Beispiel hernehmen und abwandeln, so wie du es brauchst.
https://bootsnipp.com/tags/login

Edit: Allgemein gilt natürlich immer, dass es enorm hilft wenn man weiß, wie das was man benutzt funktioniert, sonst kommt es nämlich so wie in den Kommentaren auf der oben verlinkten Seite “Help, this code is not working, I pasted it in my website but it is not centered, what can I do?” Wer Webseiten bauen möchte, braucht auch 2017 Kenntnisse von HTML, CSS und evtl. JS.


#4

hab ich gemacht, und ich weiß nicht, ob es üblich ist, aber die input-Elemente stehen jetzt innerhalb einer Table, und es schaut ganz gut aus.

@inv_zim : Wieso denn gleich Unkenntnis vorwerfen, wenn ich lediglich nach einem Tool mit grafischer Oberfläche gefragt hab, um schöne Forms zu erstellen?

Das Thema ist gelöst. Danke beide.


#5

Hat man früher so gemacht, allerdings gab es da einen Browser und dieser eine hieß Internet Explorer und die Bildschirmauflösung lag bei 1024x768.

Heute ist so eine Herangehensweise unpraktikabel, da man es mit einer vielzahl unterschiedlicher Geräte zu tun bekommt, die alle auf die selbe Quelle zugreifen.


#6

Mobilgeräte schließe ich aus.


#7

Also erst mal, ihr hattet recht:

  1. style-Attribute sind ein Tabu,
  2. möglichst nur eine .css habn,
  3. möglichst Klassennamen anstatt IDs benutzen,
  4. gängige Browser erlauben das stylen mehrerer Elemente gleicher IDs, aber unschön,
  5. form in table ist erlaubt,
  6. HTML Validator meldet keine Fehlermeldungen,
  7. wie kann ich auch das CSS checken lassen?

#8

Hint: CSS Validator


#9

Schon gut, also Tool hab ich jetzt und Validator auch. Thema gelöst. Und wenn es nicht zu HTML passt, Thema wieder löschen.


#10

Tabellen für das Layout von HTML zu verwenden ist das Äquivalent zur Verwendung einer Tabellenkalkulation für das schreiben von Briefen. Würde mir jemand einen mit Excel geschrieben Brief zeigen, dann könnte ich den Schluss ziehen, dass dies sehr smart ist. Tatsächlich würde ich aber sagen, zu doof um Word richtig zu verwenden.

Das Problem dass die obige Tabelle bekommt, ist wenn das Fenster oder der verfügbare Bereich unter 150px schrumpft.
In dem Fall verschwindet das Eingabefeld mehr oder weniger.
Heute würde man ein Gridsystem nehmen, dass zwar eine gewisse Ähnlichkeit zu Tabellen hat, allerdings für verschiedene Formate eingestellt werden kann.
Das heisst, dass man Label und Eingabefeld bei grosser Bildschirmbreite nebeneinander hat und bei schmallen Bildschirmen Label und Eingabefeld untereinander darstellt, wie ja ursprünglich im ersten Post gefordert.

Zudem empfiehlt es sich für die Beschriftungen das Label-Tag zu verwenden und via for auf das Eingabefeld zu verweisen. Mit HTML in den neueren Versionen gibt es zudem Möglichkeiten eine gewisse Validierung bereits in Form von Attributen bereitzustellen.


#11

Ist doch schon fertig. Ich machs jetzt mit microsoft expression web 4 und fertig. :slight_smile: (Auch wenn das auch nicht so leicht ist)


###Edit:
Man kann sich wohl stundenlang, tagelang, wochenlang… jahrelang nur mit dem Layout beschäftigen. Ursprünglich war das Internet ja gedacht, nur statische Inhalte untereinander anzuzeigen, das ist nicht mehr ganz up-to-date. … Besser ist es vielleicht, anstatt Table, DIVs von links zu fluten / einfließen zu lassen. Oder man greift auf ein Framework zurück, aber why? Mal ehrlich, wie oft ändert ihr die Fenstergröße des Browsers? IMHO könnte diese sogar fixiert werden, um unbeabsichtigte Größenänderungen zu vermeiden. … Ich bräuchte eigentlich noch jemanden im Boot, der sich nur um das Layout kümmert.

Seite 1: Login/Registrierung, wie layouten?
Seite 2: Benutzer"liste", wie layouten?
Seite 2: Options"liste", wie layouten?
Seite 2: Erhaltene Nachrichten, wie layouten?
Seite 2: Gesendete Nachrichten, wie layouten?
Seite 2: (Eigene/Andere) Öffentliche Nachrichten, wie layouten?
Seite 3: Neue Nachricht verfassen…, wie layouten?

Ist euch etwas aufgefallen? Auf Seite zwei steht ziemlich viel, weiß gar nicht ob genug Platz.


###Zudem:
Kein Plan, was es werden “soll”. Vielleicht auch so etwas wie knuddels, vielleicht kennt das irgendwer. Ohne berühmte Persönlichkeiten, Hype usw. Aber das ist vielleicht mehr so Philosophie.

Gebt mir doch noch mal Tipps. Vielleicht kann dieses Thema auch in dieses Thema verschoben werden:


#12

Man braucht nicht mal ein Framework um ein Layout umzusetzen (es sei den du willst ältere Browser unterstützen), ich würde jedenfalls mit FlexBox arbeiten, da es sich sehr gut für dynamische Layouts eignet. Es gäbe sicher auch andere CSS Layout Engines, aber ich habe mit denen bisher noch nicht gearbeitet.