Link als submit button

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Phil333, 7. Mai 2009 .

Schlagworte:
  1. 7. Mai 2009
    Hallo an alle!

    Ich habe folgendes Problem:
    Auf meiner Seite ist ein Formular, das werte aus einer Datenbank in hidden-felder schreibt.
    Klickt man auf einen submit button, so wird das formular (an sich selbst) abgeschickt (und ausgewertet).

    Leider passt so ein button kein stück in mein design.
    Mittels CSS verändere ich bestimmte links so, das sie gut aussehen.

    Leider entfällt bei links aber die übertragungsmöglichkeit mittels POST. (oder?)
    Eine GET variante kommt nicht in Frage, weil man beim aktuallisieren der Seite das Formular dann mehrmals abschicken würde.
    Auch eine JS lösung ist aufgrund der Abschaltbarkeit mittels des Besuchers nicht werwünscht.

    Habt ihr eine Idee, wie ich die Inhalte der hidden-felder an das gleiche Formular zurück schicke mitheilfe eines links?
    Oder eventuell andere lösungsvorschläge?

    Vielen Dank
     
    + Multi-Zitat Zitieren
  3. 7. Mai 2009
    AW: Link als submit button

    öhm... bist du dir darüber im Klaren, dass du auch Buttons mittels CSS verändern kannst? Damit ist eine ganze Menge möglich. Kannst sie prinzipiell genauso beliebig verändern, wie Links auch.
     
    + Multi-Zitat Zitieren
  4. 7. Mai 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Link als submit button

    Den unterschied wirst du nicht sehen!

    Bild

    CSS:
    Code:
    a, button {
 font: normal normal normal 11px/normal tahoma,arial;
 color: #00f;
 }
button.aslink {
 padding: 0;
 margin: 0;
 border: none;
 background-color: transparent;
 cursor: pointer;
 text-decoration: underline;
 }
    HTML:
    Code:
    <a href="#">Button oder Link?</a>
<button class="aslink">Button oder Link?</button>
     
    + Multi-Zitat Zitieren
  5. 7. Mai 2009
    AW: Link als submit button

    hmm also meinen link verändere ich so:

    HTML:
    ul#button{
 list-style-type: none;
 margin: 0px;
 width: 152px;
}

ul#button li {
 display: block;
 height: 30px;
 width: 152px;
 font-weight: bold;
}

ul#button li a:link,
ul#button li a:active,
ul#button li a:visited {
 display: block;
 height: 25px;
 width: 150px;
 background-image: url('design/button.gif');
 background-repeat: repeat-x;
 padding: 2px 0px 0px 0px;
 border: 1px groove #8F8F8F;
 font-weight: bold;

 color: #6e6e6e;
 text-decoration: none;
}

ul#button li a:hover,
ul#button li a:focus {
 display: block;
 height: 24px;
 width: 150px;
 background-image: url('design/button_active.gif');
 background-repeat: repeat-x;
 padding: 3px 0px 0px 0px;
 border: 1px groove #8F8F8F;
 font-weight: bold;
 color: #4F4F4F;
 text-decoration: none;
}
    wie mach ich den button jetzt so?
     
    + Multi-Zitat Zitieren
  6. 7. Mai 2009
    AW: Link als submit button

    Den :hover-Effekt wirst du so tatsächlich nicht hinkriegen, zumindest nicht, wenn du Browser-kompatibel bleiben willst. Aber könntest du vielleicht einen Screenshot davon zeigen, wie der Button aussehen soll?
     
    + Multi-Zitat Zitieren
  8. 7. Mai 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Link als submit button

    ja der screenshot ist hier:
    Bild

    zum input type image...
    damit bekommt man doch auch keine hover hin oder?
     
    + Multi-Zitat Zitieren
  10. 8. Mai 2009
    AW: Link als submit button

    stimmt nicht...

    ich hab lange gebraucht, aber scheue mich nicht der Welt meine geniale Lösung zu zeigen ^^
    (sorry, aber es wird auch echt mal zeit, das ich was hinbekomme und anderen was neues zeigen kann )

    mit CSS kann man folgende schöne sache machen:

    HTML:
    button.meinsupermegahypergeilerbutton{
 display: block;
 height: 20px;
 width: 50px;
 background-image: url('button.gif');
 background-repeat: repeat-x;
 padding: 1px 0px 0px 0px;
 border: 1px groove #8F8F8F;
 font-weight: bold;
 color: #6e6e6e;
 text-decoration: none;
}

button.meinsupermegahypergeilerbutton:hover{
 display: block;
 height: 20px;
 width: 50px;
 background-image: url('button_active.gif');
 background-repeat: repeat-x;
 padding: 3px 0px 0px 0px;
 border: 1px groove #8F8F8F;
 font-weight: bold;
 color: #4F4F4F;
 text-decoration: none;
}
    in html kann man dann den button so hinbuchsieren und somit sogar bilder reinbekommen:

    HTML:
    <button type='submit' name='istdasnichtschoen' value='ja' class='meinsupermegahypergeilerbutton'>
<img src='mini_bild.png' alt='kleines Bild' border='0'>Text</button>
     
    + Multi-Zitat Zitieren
  11. 8. Mai 2009
    AW: Link als submit button

    Jaja, das geht schon. Firefox und einige andere Browser lassen sowas auch mit sich machen. Aber die Pseudoklasse :hover ist eigentlich nur für Links vorgesehen und von daher wird diese Variante nicht von allen Browsern unterstützt. Kannst es ja mal ausprobieren
    Aber ich denke schon, dass das so ein guter Kompromiss ist, oder? Einige Browser kriegen halt nicht das Hover-Bild angezeigt, aber es gibt wirklich schlimmeres.
     
    + Multi-Zitat Zitieren
  12. 8. Mai 2009
    AW: Link als submit button

    laut w3c ist :hover bei allen elementen erlaubt ^^
    der ie interpretiert :hover nur bei links, stimmt schon, aber das der ie kein html und css kann is ja allg. bekannt
     
    + Multi-Zitat Zitieren
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten