Link als submit button

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

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.
  3. #2 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.
     
  4. #3 7. Mai 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Link als submit button

    Den unterschied wirst du nicht sehen!

    [​IMG]

    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>
    
     
  5. #4 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?
     
  6. #5 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?
     
  7. #6 7. Mai 2009
    AW: Link als submit button

    <input type="image" ...
     
  8. #7 7. Mai 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Link als submit button

    ja der screenshot ist hier:
    [​IMG]

    zum input type image...
    damit bekommt man doch auch keine hover hin oder?
     
  9. #8 7. Mai 2009
    AW: Link als submit button

    zumindest nicht ohne javascript.
     
  10. #9 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>
     
  11. #10 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.
     
  12. #11 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 ;)
     

  13. Videos zum Thema
Die Seite wird geladen...
  • Annonce

  • Annonce