Per Klick Button erscheinen lassen, der Variable an andere Seite übergeben kann

[Gunnar Bittersmann]

@@Nadine

Das ist der Code für die Suche.

<b>Bestand durchsuchen</b><br>
		<form style="font-family: Calibri" method="post" action="index.php" name="details">
			<input style="font-family: Calibri" type="text" name="suchbegriff">
			<button style="font-family: Calibri" type="submit">Suchen</button><br>
			</form>

Da ist einiges zu verbessern:

• Das Eingabefeld hat keine Beschriftung (kein zugehöriges label-Element). Sollte es aber haben, damit das Formular auch für Nutzer bedienbar ist, die die Seite nicht visuell wahrnehmen.

  Wir zeichnen „Bestand durchsuchen“ als Beschriftung aus; dabei kommt das label-Element mit ins form-Element hinein:

  <form …>
  	<label>
  		Bestand durchsuchen
  		<input … name="suchbegriff">
  	</label>
  	<button …>Suchen</button>
  </form>
  

  oder mit ID und for-Attribut:

  <form …>
  	<label for="suchbegriff">Bestand durchsuchen</label>
  	<input … name="suchbegriff" id="suchbegriff">
  	<button …>Suchen</button>
  </form>
  

• Für Suchfelder gibt es einen speziellen Eingabefeld-Typen type="search":

  <input type="search" name="suchbegriff" id="suchbegriff">
  

• Das ganze Ding sollte die Rolle role="search" bekommen:

  <div role="search">
  	<form …>
  		<label for="suchbegriff">Bestand durchsuchen</label>
  		<input type="search" name="suchbegriff" id="suchbegriff">
  		<button …>Suchen</button>
  	</form>
  </div>
  

• Die Angabe der Schrift sollte nicht inline in style-Attributen stehen, sondern gehört mit ins Stylesheet.

  Buttons innerhalb von Formularen sind per Default Submitbuttons; type="submit" ist nicht falsch, aber nicht notwendig.

Dann bleibt also übrig:

<div role="search">
	<form method="post" action="index.php" name="details">
		<label for="suchbegriff">Bestand durchsuchen</label>
		<input type="search" name="suchbegriff" id="suchbegriff">
		<button>Suchen</button>
	</form>
</div>

Das kannst du dann wie gewünscht mit CSS stylen, z.B. die Beschriftung in Calibri setzen, das Label „Bestand durchsuchen“ fett setzen …

Suchformularen ist in Adam Silvers Buch „Form Design Patterns“ ein eigenes Kapitel gewidmet. Dieses Buch sollte in der Bibliothek eines Webentwicklers nicht fehlen.

LLAP 🖖