Suchformular aufhübschen

[Sophie]

Hallo,

ich bin für jeden Tipp dankbar. Wie könnte ich mein hässliches Formular etwas aufhübschen dass es nicht mehr so amateurhaft aussschaut? Vielleicht die Lables weg? Oder oben drüber? Ich habe keine Ahnung 😕

Mein HTML schaut so aus:

<div class="suchkriterien-Zeiten">
	<form name="form1" method="post">
	    
		<label for="name">Name</label>
			<select name="name" id="name" style="width: 15em;">
				<option value="">-- Bitte wählen --</option>
		        <?php
		        $aPersonal = Personal_Uebersicht($mysqli);
	            foreach($Personal as $array){ ?>
	            <option value="<?php echo htmlspecialchars($array['per_code']);?>">
	            	<?php echo htmlspecialchars($array['per_vorname']) ." ". htmlspecialchars($array['per_name']);?>
	            </option>
	            <?php } ?>
	        </select>

	        <label for="projektnummer">Projektnummer</label>
			<input type="text" name="projektnummer" id="projektnummer" value="">

			<label for="datum_von">Von</label>
			<input type="text" name="datum_von" id="datum_von" value="" style="width: 10em;">

			<label for="datum_bis">Bis</label>
			<input type="text" name="datum_bis" id="datum_bis" value="" style="width: 10em;">

	    <input type="submit" name="abschicken" id="abschicken" value="Suchen" class="btn_ok">
	</form>
</div>

PS: An die Administratoren @Matthias Apsel @Christian Kruse warum ist der Upload nicht mehr so schön wie früher dass man einfach etwas rein kopieren kann? Ich muss umständlich auf das Bild oben in der Leiste gehen, dann auf Upload, alles etwas umständlicher?

[Matthias Apsel]

Hallo Sophie,

warum ist der Upload nicht mehr so schön wie früher dass man einfach etwas rein kopieren kann?

Weil das Drag und Drop häufiger Anlass zu Kritik als zu Lob gab.

Bis demnächst
Matthias

[Sophie]

Hallo @Matthias Apsel

danke für die Antwort, dann weiß ich bescheid.

[Gunnar Bittersmann]

@@Matthias Apsel

warum ist der Upload nicht mehr so schön wie früher dass man einfach etwas rein kopieren kann?

Weil das Drag und Drop häufiger Anlass zu Kritik als zu Lob gab.

?? Hab’ ich da was verpasst? Was gab’s daran zu kritisieren? Warum fragt mich keiner, wenn ich mal was zu loben habe?

Und wie kann man jetzt ein Bild einfügen? Nein, keins von der lokalen Platte, sondern wo ist die Funktion hin, die mal hinter dem Bild-Icon steckte: einen URI zu einem Bild anzugeben?

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wo wir gerade dabei sind: „Bitte geben Sie einen Bild-Titel an“

Äh nein, bitte tun Sie’s nicht! Nervige Tooltips nerven. Das braucht kein Mensch.

Kann man dieses Eingabefeld bitte in die Mülltonne entsorgen‽

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

?? Hab’ ich da was verpasst? Was gab’s daran zu kritisieren?

Es hat einfach nicht zuverlässig funktioniert.

Und wie kann man jetzt ein Bild einfügen? Nein, keins von der lokalen Platte, sondern wo ist die Funktion hin, die mal hinter dem Bild-Icon steckte: einen URI zu einem Bild anzugeben?

Wir wollen die Bilder bei uns haben^[1], deshalb haben wir das Einbinden fremder Bilder erschwert, nur noch über Markdown-Syntax.

Bis demnächst
Matthias

---

1. damit sie auch nach Jahren noch beim Beitrag stehen und auch das Urheberrecht spielte eine, wenn auch untergeordnete, Rolle. ↩︎

[1unitedpower]

ich bin für jeden Tipp dankbar.

Tipp: Lass dich von anderen Suchformularen inspirieren, zum Beispiel das von http://www.fluege.de/ oder https://www.airbnb.de.

<form name="form1" method="post">

Suchformulare sollten get und nicht post verwenden. Dann werden die Suchparameter in die Adresse der Ergebnisseite mit aufgenommen und du kannst den Link speichern und teilen und musst nicht jedesmal das Formular erneut ausfüllen.

[Henry]

Hallo Sophie,

ich bin für jeden Tipp dankbar. Wie könnte ich mein hässliches Formular etwas aufhübschen dass es nicht mehr so amateurhaft aussschaut? Vielleicht die Lables weg? Oder oben drüber? Ich habe keine Ahnung 😕

Da lässt sich, dank CSS3, designtechnisch mittlerweile eine Menge machen. Und Beispiele/Anregungen gibt's ohne Ende im Netz. zb. dies. Ich weiß zwar nicht warum du explizit nach Suchformular fragst, aber letztendlich ist es auch nur ein Eingabefeld oder verstehe ich dich falsch?

An die Administratoren @Matthias Apsel @Christian Kruse warum ist der Upload nicht mehr so schön wie früher dass man einfach etwas rein kopieren kann? Ich muss umständlich auf das Bild oben in der Leiste gehen, dann auf Upload, alles etwas umständlicher?

Ja, finde ich auch schade, ließ sich aber wohl leider nicht vermeiden. Ertappe mich auch gerade dabei, dass ich bei dem Folgenden einen Screenshot nicht mitliefere, weil nicht unbedingt notwendig und ich zu lustlos für die ganzen Klicks bin.

@Admins

• War etwas verwirrt, weil schon Antwort akzeptiert stand. Wollte schon wieder weiter als ich merkte, dass sich die Antwort nur auf den Upload bezog. Dabei fiel mir auch auf, dass ich den Häkchen-Button (Antwort akzeptiert) anklicken kann. Weiß zwar nicht ob das überhaupt eine Auswirkung hat, aber dürfte doch eigentlich nicht sein?

• Wollte zuerst anders antworten und hatte aber schon "Zitat einfügen" benutzt. OK, dann auf Abbrechen und wieder neu auf "antworten". Geht aber nicht, weil die Option dann weg ist, musste erst Seite komplett neu laden. Ist das so gewollt?

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

zb. dies

Bei „Some forms here do not have labels, they rely on HTML5 placeholder attribute“ ist man glatt geneigt aufzuhören zu lesen (und das ist kein Ding von „older browsers do not support this“). Nicht machen, Kinder! Placeholder sind kein Ersatz für Label.

LLAP 🖖

[Henry]

Hallo Gunnar,

Bei „Some forms here do not have labels, they rely on HTML5 placeholder attribute“ ist man glatt geneigt aufzuhören zu lesen (und das ist kein Ding von „older browsers do not support this“). Nicht machen, Kinder! Placeholder sind kein Ersatz für Label.

Da hättest du natürlich recht, wenn es dort so wäre (weiß nicht warum die das schreiben), denn nur ganz wenige Beispiele dort haben keine Labels.

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Bei „Some forms here do not have labels, they rely on HTML5 placeholder attribute“ ist man glatt geneigt aufzuhören zu lesen (und das ist kein Ding von „older browsers do not support this“). Nicht machen, Kinder! Placeholder sind kein Ersatz für Label.

Da hättest du natürlich recht, wenn es dort so wäre (weiß nicht warum die das schreiben), denn nur ganz wenige Beispiele dort haben keine Labels.

Und diese ganz wenigen sind einige zu viel.

LLAP 🖖

[Julius]

Hallo Henry,

Da hättest du natürlich recht, wenn es dort so wäre (weiß nicht warum die das schreiben), denn nur ganz wenige Beispiele dort haben keine Labels.

Aber die, die welche haben, sind falsch, die Label beziehen sich nicht auf das zugehörige Eingabefeld. Beispielsweise folgendes Schnipselchen:

<label for="name">Name</label>
<input type="text" name="name" maxlength="100">

Entweder müsste es so:

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

oder so gemacht werden:

<label>
  Name
  <input type="text" name="name" maxlength="100">
</label>

Des weiteren bin ich mir unsicher, ob man bei einem Namen maxlength setzen sollte, bei einem Nickname vielleicht ja, aber sonst? Bei URLs ist das sogar ziemlich hinderlich.

Auch ist mir aufgefallen, dass das required-Attribut trotz Pflichtfeld nicht gesetzt wurde.

Insgesamt: Wenn man Design-Anregungen braucht, ok. Aber bitte das Markup nicht einfach so kopieren und die Beispiele mit den falsch benutzten placeholdern bitte nicht nachbauen (was Gunnar ja schon sagte).

Gruß
Julius

[Henry]

Hallo Julius,

Insgesamt: Wenn man Design-Anregungen braucht, ok. Aber bitte das Markup nicht einfach so kopieren und die Beispiele mit den falsch benutzten placeholdern bitte nicht nachbauen (was Gunnar ja schon sagte).

Das es nur als Anregung dienen soll, habt ihr beide natürlich recht und deine detaillierten Schwachstellen verdienen mal wieder einen Punkt 😉 danke.

Gruss
Henry

*unwichtiger Nachtrag
Habe jetzt erst bei deiner Bewertung die Medaille "Enthusiast" bekommen (Der Anwender hat mindestens einen Beitrag positiv bewertet), obwohl ich schon mehrmals Bewertungen vorgenommen habe. Denke das hat mit dem ursprünglichen und bereits behobenen Problem zu tun. Müsste dann wahrscheinlich noch ein Updatescript über die User laufen?

[Julius]

Hallo Henry,

Habe jetzt erst bei deiner Bewertung die Medaille "Enthusiast" bekommen (Der Anwender hat mindestens einen Beitrag positiv bewertet), obwohl ich schon mehrmals Bewertungen vorgenommen habe. Denke das hat mit dem ursprünglichen und bereits behobenen Problem zu tun. Müsste dann wahrscheinlich noch ein Updatescript über die User laufen?

Wenn ich das richtig verstanden habe, wird nur wenn du eine Bewertung erhalten hast überprüft, ob du dadurch auch neue Medaillen erhältst.

Medaillen wie „Jährling“ werden dagegen von der Software in regelmäßigen Abständen überprüft.

Gruß
Julius