mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 19.04.2024 11:07 Benutzername: Passwort: Auto-Login

Thema: Suchformular- Absendebutton direkt im Eingabefeld platzieren vom 03.09.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Suchformular- Absendebutton direkt im Eingabefeld platzieren
Autor Nachricht
victor1623
Threadersteller

Dabei seit: 03.09.2010
Ort: Magdeburg
Alter: 32
Geschlecht: Männlich
Verfasst Fr 03.09.2010 08:41
Titel

Suchformular- Absendebutton direkt im Eingabefeld platzieren

Antworten mit Zitat Zum Seitenanfang

Hallo und guten Morgen. Ich hab mal eine Frage an Euch.

Und zwar, ich möchte einen Suchformular so gestalten, dass der "Absendebutton" sich direkt im Eingabefeld befindet und nicht irgendwo nebenan, wie es normalerweise üblich ist. Könnt ihr mir evtl. ein Paar Tipps geben, wie man sowas hinbekommt? Als Anhang habe ich eine Skizze eingefügt, damit man noch besser versteht was ich eigentlich will.




Uploaded with ImageShack.us

Danke schon mal im Voraus für die Hilfe

Gruß

Viktor
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 03.09.2010 09:22
Titel

Antworten mit Zitat Zum Seitenanfang

Du mußt Dir für solch ein Vorhaben eine entsprechende Grafik vorbereiten. Diese gibst du dem form-tag zB als Background-Image.

Code:
<form>
  <fieldset>
    <input type="text" id="search" />
  </fieldset>
</form>


Dein Input-Feld muß Du dann natürlich noch so gestalten das es nicht länger als die Grafik ist und nicht auffällt.
2 Möglichkeiten hast Du dabei. Entweder ohne Submit-Button, und Du vertraust darauf das Deine User die Eingabe mittels [Enter] bestätigen. Oder Du nimmst den Submit Button dazu, und mußt diesesn ebenso gestalten das er nicht zu sehen aber klickbar ist.


Hier hat es auch noch ein paar Beispiele

http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/

http://www.webdesignerwall.com/tutorials/beautiful-css3-search-form/


Zuletzt bearbeitet von Kash am Fr 03.09.2010 09:26, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
_Paul_

Dabei seit: 26.11.2007
Ort: Berlin
Alter: 36
Geschlecht: Männlich
Verfasst Fr 03.09.2010 11:51
Titel

Antworten mit Zitat Zum Seitenanfang

Alternativ kannst du einfach dem Form-Element die Eigenschaft position: relative geben und den submit-button positionieren (position: absolute;), so mach ichs immer. Hält auch Text- und Komplett-Zoom stand.

Zuletzt bearbeitet von _Paul_ am Fr 03.09.2010 11:51, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 03.09.2010 11:51
Titel

Antworten mit Zitat Zum Seitenanfang

Ich würde form die border geben, und darin den submit-Button als schwarzes Quadrat stylen. Das Eingabefeld steht ohne border links daneben.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 03.09.2010 11:52
Titel

Antworten mit Zitat Zum Seitenanfang

heiko_rs hat geschrieben:
Ich würde form die border geben, und darin den submit-Button als schwarzes Quadrat stylen. Das Eingabefeld steht ohne border links daneben.


Wenn es so aussehen soll wie er zeigt, dann wäre das das einfachste.

@TE: Kannst Du uns mal das fertige Layout des Suchformulares zeigen?
  View user's profile Private Nachricht senden
victor1623
Threadersteller

Dabei seit: 03.09.2010
Ort: Magdeburg
Alter: 32
Geschlecht: Männlich
Verfasst Fr 03.09.2010 12:03
Titel

Antworten mit Zitat Zum Seitenanfang

Die Variante von heiko_rs habe ich auch gemacht. Aber auch die Lösung von _Paul:_ ist recht interessant...muss ich auch mal ausprobieren! vielen Dank für eure Hilfe! Ihr habt mir sehr geholfen. Schönes Forum hier ))

Gruß Viktor
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 03.09.2010 12:27
Titel

Antworten mit Zitat Zum Seitenanfang

victor1623 hat geschrieben:
Aber auch die Lösung von _Paul:_ ist recht interessant

Wie man die Elemente nebeneinander stellt, ist allerdings ziemlich egal *zwinker* Ob per float oder position, oder durch ihr default-inline-block-Verhalten.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Illustrator - Objekte direkt nebeneinander platzieren
Suchformular Offline
Mit dem Absendebutton eine Variable weitergeben?
Abfrage bei Eingabefeld
Textvorgabe im Eingabefeld löschen
JS: Eingabefeld löschen Button
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.