Anpassen eines Formulars grafisch

Ich wurde gefragt, wie eine grafische Form anpassen, insbesondere ein Suchfeld, wie die auf diesem Blog. Die verwendete Technik, oder besser gesagt, die ich benutze, ist natürlich gültig für jede Art von Modul zu bilden. Was ändert sich nur die Komplexität der Arbeit zu tun, je nach Komplexität der Form selbst sein.

Die Grundlagen

Mit Stylesheets können Sie komplett gestalten das Layout von jedem Modul zu bilden. Eines der Hindernisse, die auftreten können, wie es oft geschieht, ist die Kompatibilität mit verschiedenen Browsern auf dem Markt und am Ende mit unterschiedlichen Ergebnissen, je nach verwendetem Browser.
Aus diesem Grund oft, entscheiden Sie sich für eine Lösung erheblich Grafiken, Bilder, die ausgenutzt werden, um das Layout der Form neu zu definieren sind. Die Bilder in der Tat, sind die einzigen Einheiten, die, außer rai Fällen bisher immer die gleichen sind auf allen Browsern angezeigt.

Keine Bilder

Vor sehen, wie das Layout eines Formulars mit den Bildern sehen wir, was "würde" mit nur CSS nicht verändern. Ein Modul ist in Form von Fällen von Gerichten maggiornza gemacht INPUT . Doch das, was wir sehen, ist in der Regel für jede andere Form anwenden zu können. Mit CSS können wir das Aussehen unseres Lagers neu INPUT handeln von seiner Größe, am Rande, im Hintergrund, die Schriftart, etc ...
Zum Beispiel können Sie die Leistung, indem Sie einfach verbessern:

1
2
3
4
5
6
input {
1px solid #aaa ; border: 1px solid # aaa;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;
}

Mozilla Firefox und Safari können Sie auch ganz einfach die Rundung der Ecken (siehe auch CSS3: hat jemand den Internet Explorer zu sehen )

1
2
3
4
5
6
7
8
input {
1px solid #aaa ; border: 1px solid # aaa;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;

; -Moz-border-radius: 6px;
; -Webkit-border-radius: 6px;

Darüber hinaus können wir fügen ein Hintergrundbild, damit es "zugänglich" die Bedeutung des Feldes selbst:

1
2
3
4
5
6
7
8
9
10
11
input {
1px solid #aaa ; border: 1px solid # aaa;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;

; -Moz-border-radius: 6px;
; -Webkit-border-radius: 6px;

url ( images/icon.png ) no-repeat ; background: url (images / icon.png) no-repeat;
20px ; padding-left: 20px;

permettiamo di posizionarla all'inizio del campo ma fuori dal testo. Wenn icon.png Symbol ist 16 Pixel breit ist, durch die padding möchte an den Anfang des Feldes, aber außerhalb des Textes.

Die Bilder in der Form

Das jüngste Beispiel gesehen wäre eine einfache Lösung führen, wenn wir das Layout unserer Branche entschließen INPUT Komplett in Grafiken. In der Tat, in der Theorie wäre es genug, um den Rand des Feldes zu beseitigen und legen Sie ein Hintergrundbild direkt in die INPUT :

1
2
3
4
5
6
7
input {
none ; border: none;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;

url ( images/custominput.png ) no-repeat ; background: url (images / custominput.png) no-repeat;

Ich sage in der Theorie, denn während diese Technik funktioniert (siehe Firefox), produziert das andere seltsame Auswirkungen auf andere Browser (Microsoft Internet Explorer).
: Um die Hoffnung auf das Hindernis wird völlig transparent Feld INPUT und das Bild wird mit dem Tag direkt mit der zugehörigen FORM :

1
2
3
4
5
6
7
8
9
10
11
12
13
input {
none ; border: none;
none ; Hintergrund: none;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;
}
Form {
block ; display: block;
200px ; width: 200px;
24px ; height: 24px;
url ( images/custominput.png ) no-repeat ; background: url (images / custominput.png) no-repeat;
}

Alle mit einem "tagging" HTML wie folgt aus:

1
2
3
< Formular >
"text" name = "cerca" / > < Eingang type = "text" name = "Suche" />
</ Form >

Je nach Wahl der Grafiken und der Komplexität der Form, brauchen Sie nur zu "stapeln" richtig und legen Sie dann das Feld INPUT Grafik als Hintergrund des Formulars E-Mail unter. Dies ist mit entsprechenden Margen, um das Feld möglichst INPUT selbst, mit unserem Layout zusammen:

1
2
3
4
5
6
7
8
9
10
input {
none ; border: none;
none ; Hintergrund: none;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;

12px ; margin-top: 12px;
24px ; margin-left: 24px;
}

5 Kommentare zu "Anpassen eines Formulars grafisch"

  1. 4. Dezember 2009 Napolux :

    Sehr gut, wie gewohnt. Wie kann man anpassen, eine Eingabedatei? Dieser Artikel ist sehr schön, aber wenn ich etwas maßgeschneiderte kleine Knöpfe wollen dazu neigen, Blitz zu verwenden.

    Antwort zitieren
  2. 4. Dezember 2009 Giovambattista Fazioli :

    @ Napolux:

    Wie kann man anpassen, eine Eingabe-Datei?

    Ein Feld Eingabedatei kann nicht direkt angepasst werden, wie durch die Verbindung, die du mich verlassen hast bewiesen. Der Flash ist die verabschiedete Lösung, auch wenn der Flash-Film versteckt ist und das Layout ist durch einen einfachen Bereich erreicht INPUT oder vollständig in Grafiken, und löst die Datei-Auswahl über die Kommunikation Javascript -> Flash. Die Auswahl der Dateien, natürlich der umgekehrte Prozess, Flash -> JavaScript.
    Darüber hinaus ist die Lösung, damit Flash multiselect Unterstützung, so glaube ich eine sehr valide Option, es sei denn, Kontraindikationen werden (siehe zum Beispiel das WordPress-Backend, wenn Sie einen Datenträger zu laden, benutzen Sie einfach Flash).
    (alias Ajax) non era ancora noto… Ansonsten - wie in den Link, den Sie in den Kommentaren links gezeigt - zwingt ein völlig HTML dell'artifizio Einsatz von versteckten Input-Datei Feld ... das erinnert mich so sehr die Verwendung von IFRAME , wenn das Objekt HTTPRequest (aka Ajax) wurde nicht bekannt ... : D

    Antwort zitieren
  3. 6. Dezember 2009 Die besten Beiträge der Woche # 49 | EmaWebDesign:: Web-Programmierung / Web Design / SEO :

    [...] 06) Anpassen eines Formulars grafisch [...]

  4. 27. Dezember 2009 francodane :

    Nicht anpassbare Eingabefelder?
    Leider habe ich verloren oder etwas oder etwas nicht stimmt, weil cmq Eigenschaften angepasst werden können.
    Was hast du Referenz?

    Antwort zitieren
  5. 27. Dezember 2009 Giovambattista Fazioli :

    @ Francodane: Ich habe nie gesagt, dass das Feld input sind nicht anpassbar. Das Feld input file type, ist jedoch eine Ausnahme ... das ist nicht in dem Sinne, dass es ein völlig anderes Layout je nach Browser zeigt anpassbar. Für andere jedoch, dass die Regel der Kompatibilität ... oder anpassen, was Sie wollen, aber stellen Sie sicher, das Ergebnis auf allen Browsern.

    Antwort zitieren

Hinterlasse einen Kommentar

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL