[HTML/CSS] Input submit styling

[JKVA]

Voor mijn huidige project lopen we tegen een probleem aan bij het stylen van de GUI.

De designer heeft de volgende button style opgegeven.


Zoals je kunt zien, zitten er ronde hoekjes aan en een icoontje aan de rechterkant. Dit icoon kan wisselen, dus er staat niet altijd een pijltje.
Ook hebben we strenge accessibility eisen, dus een Firefox+JavaScript only oplossing kan niet.

De eerste oplossing was een <input type="submit" />, maar dit was een probleem qua styling, aangezien je voor de ronde hoekjes eigenlijk een sub element wilt hebben. Vandaar dat we het <button /> element geprobeerd hebben, maar deze zorgde voor problemen in Internet Explorer, aangezien het form niet gesubmit werd. Dit zou ik kunnen fixen met JavaScript, maar dat gaat weer ten koste van de accessibility.

Al met al kunnen we dus geen echte oplossing verzinnen.

<input type="submit" />
+ zorgt netjes voor een form submit
- qua styling krijgen we het bovenstaande niet voor elkaar

<button />
+ Gemakkelijk te stylen
- zorgt niet voor een form submit in sommige browsers

Ook op internet kan ik geen passende oplossing vinden. Alle voorbeelden gebruiken OF <button /> OF <a />, maar ik heb geen enkel voorbeeld gezien met <input type="submit" /> waarmee een vergelijkbaar resultaat bewerkstelligd wordt.

We hebben zitten denken aan truukjes, zoals het standaard gebruiken van een submit, en deze in een button veranderen met JavaScript, maar dit valt naar mijn idee in de categorie hacken. Ook een sIFR achtige oplossing waarmee we de submit veranderen in een SWF lijkt me niet echt een nette oplossing.

Hebben jullie een idee?

Ps. Ter info, het gaat hier om een erg kritische applicatie waar security/integriteit problemen niet welkom zijn.

[daniëlpunt]

Heb je al een <button type="submit"> geprobeerd? Volgens mij zou die wel moeten werken in IE.

[crisp]

<input type="image"> gebruiken

[Fuzzillogic]

daniëlpunt schreef op maandag 10 november 2008 @ 10:42:
Heb je al een <button type="submit"> geprobeerd? Volgens mij zou die wel moeten werken in IE.

Ja, maar houd er dan wel rekening mee dat IE <button> verkeerd heeft geimplementeerd. (Ok, voor wie komt dat als een verrassing? ) IE6 en 7 posten namelijk niet het value-attribuut, maar de inner text. Dus met <button value="aap">noot</button> wordt niet "aap" gepost, maar "noot".

[Noork]

Je kan ook gewoon een afbeelding doen met een onclick="form.submit();" Keuzes genoeg. Over het stylen van buttons kun je waarschijnlijk ook voldoende vinden op Google.

[Janoz]

@Noork: Gebruik dan de oplossing van crisp. Die heeft hetzelfde effect zonder dat hij van javascript afhankelijk is.

[JKVA]

daniëlpunt schreef op maandag 10 november 2008 @ 10:42:
Heb je al een <button type="submit"> geprobeerd? Volgens mij zou die wel moeten werken in IE.

Wow, dat zijn snelle reacties.

Die <button type="submit" /> werkt. Ik wist niet eens dat button het type-attribuut kende... Ook vreemd dat ze op internet alleen andere voorbeelden gebruiken. Maar goed, het lijkt nu ook in IE (7) te werken.

Fuzzillogic schreef op maandag 10 november 2008 @ 10:44:
[...]

Ja, maar houd er dan wel rekening mee dat IE <button> verkeerd heeft geimplementeerd. (Ok, voor wie komt dat als een verrassing? ) IE6 en 7 posten namelijk niet het value-attribuut, maar de inner text. Dus met <button value="aap">noot</button> wordt niet "aap" gepost, maar "noot".

De value vind ik niet zo erg, zolang de "name" maar goed wordt gepost. In IE7 gaat het goed, maar in IE6 niet. Ik moet het nog ff verder debuggen, maar daar gaat het fout.

crisp schreef op maandag 10 november 2008 @ 10:43:
<input type="image"> gebruiken

Hmm, welke lijkt jou beter, image of button?

Noork schreef op maandag 10 november 2008 @ 10:50:
Je kan ook gewoon een afbeelding doen met een onclick="form.submit();" Keuzes genoeg. Over het stylen van buttons kun je waarschijnlijk ook voldoende vinden op Google.

Kan niet, want we mogen niet afhankelijk zijn van JavaScript.

[Noork]

Janoz schreef op maandag 10 november 2008 @ 11:05:
@Noork: Gebruik dan de oplossing van crisp. Die heeft hetzelfde effect zonder dat hij van javascript afhankelijk is.

Je moet er dan toch nog een action aan verbinden?

[disjfa]

Noork schreef op maandag 10 november 2008 @ 11:14:
[...]

Je moet er dan toch nog een action aan verbinden?

Nee Werkt hetzelfde als een submitbutton.

[Cartman!]

Persoonlijk zou ik gaan voor de <input type="image"> omdat dit overal correct lijkt te werken en omdat het volgens mij expliciet een formsubmit is terwijl button dit niet hoeft te zijn.

[Fuzzillogic]

Cartman! schreef op maandag 10 november 2008 @ 12:18:
Persoonlijk zou ik gaan voor de <input type="image"> omdat dit overal correct lijkt te werken en omdat het volgens mij expliciet een formsubmit is terwijl button dit niet hoeft te zijn.

Het default-type van button is submit. Niet dat IE zich daar ook maar iets van aantrekt (maar wie verbaast zich daar nog over? ) Gewoon expliciet opgeven: <button type="submit" ../>

[daniëlpunt]

Fuzzillogic schreef op maandag 10 november 2008 @ 10:44:
[...]

Ja, maar houd er dan wel rekening mee dat IE <button> verkeerd heeft geimplementeerd. (Ok, voor wie komt dat als een verrassing? ) IE6 en 7 posten namelijk niet het value-attribuut, maar de inner text. Dus met <button value="aap">noot</button> wordt niet "aap" gepost, maar "noot".

Ik heb zelf nooit de waarde van een submit button gebruikt, dus dat is niet relevant voor mij. En anders kun je nog bij beiden de zelfde waarde invullen. Ik zou dus gaan voor die <button type="submit">

[Verwijderd]

Ik zou ook voor <button type="submit"> kiezen. Het voordeel hiervan is ook nog eens dat het mooiere css oplevert, omdat je de tagname button rechtstreeks kunt gebruiken in je stylesheet, al dan niet voorzien van classnames e.d.

[crisp]

Als het enkel om een image gaat die je als submitbutton wilt laten fungeren zou ik <input type="image"> gebruiken. Bij <button> moet je in dat geval namelijk nog de defaultstyles gaan resetten waarbij de vraag is of je dat in alle browsers ook goed lukt.

[Fuzzillogic]

crisp schreef op maandag 10 november 2008 @ 12:48:
Bij <button> moet je in dat geval namelijk nog de defaultstyles gaan resetten waarbij de vraag is of je dat in alle browsers ook goed lukt.

Dat lukt prima. Button is flexibeler dan <input type="image" .. />, maar als je dan toch alleen een plaatje nodig hebt, dan is er imo weinig voorkeur voor de ene of andere oplossing.

[JKVA]

Hmm, het lijkt erop dat in IE6 bij <button type="submit" /> niet alleen de geklikte button gePOST wordt, maar ook de andere buttons in het form.

HTML:

<button type="submit" class="inputSubmit" name="action_1"><span>button 1</span></button>
<button type="submit" class="inputSubmit" name="action_2"><span>button 2</span></button>
<button type="submit" class="inputSubmit" name="action_3"><span>button 3</span></button>

Zoals je kunt zien, heb ik drie buttons in één form. Alle drie de buttons doen een iets andere actie en door de "name" te variëren, kan ik op de server herkennen op welke button geklikt is, zonder (JavaScript) truuks. Ik heb namelijk een conventie dat als er meerdere submit buttons in een form liggen, deze een "name" hebben die met "action_" begint.

Als ik in mijn Servlet de request parameters uitlees, zie ik dat alle drie de buttons mee komen in de POST, terwijl dit in andere browsers alleen de geklikte button is. Bij <input type="submit" /> komt alleen de geklikte binnen.

[Bosmonster]

Input type=image zou ik niet zo snel gebruiken, neem dan een gewone submit en style hem met de afbeelding als achtergrond. De image input is toch meer bedoeld voor serverside imagemaps.

Verder is het stylen van form-elementen cross browser gewoon een van de grootste nachtmerries (van mij in ieder geval). Het is bijna onmogelijk om in alle browsers bijvoorbeeld de button-text goed gepositioneerd te krijgen.

Al met al is het het beste is om de designer gewoon uit te leggen DAT IE MET ZN FIKKEN VAN FORM-ELEMENTEN AF MOET BLIJVEN.

[crisp]

Bosmonster schreef op maandag 10 november 2008 @ 13:51:
Input type=image zou ik niet zo snel gebruiken, neem dan een gewone submit en style hem met de afbeelding als achtergrond. De image input is toch meer bedoeld voor serverside imagemaps.

Nee, je /kan/ een <input type="image"> gebruiken als een serverside imagemap, maar verder wordt hij in de HTML specificatie aangeduidt als het equivalent van <button><img></button>.

Bij het zetten van een image als background zit je weer met het probleem wat je met je value moet doen (afgezien van browser-issues mbt styling). Een <input type="image"> geeft je de mogelijkheid om zowel een value op te geven als een tekstuele alternative.

[Tim_ko]

Kan je de button niet een class geven en dan dat plaatje met css als achtergrond plaatje gebruiken?
(of denk ik nu te simpel?)

[JKVA]

Tim_ko schreef op maandag 10 november 2008 @ 16:20:
Kan je de button niet een class geven en dan dat plaatje met css als achtergrond plaatje gebruiken?
(of denk ik nu te simpel?)

Ehm, dat kan, maar we wilden eigenlijk niet met een plaatje werken. Onder andere omdat tekst wat beter is qua accessibility. En de breedte van de plaatjes is variabel, vandaar dat een gewoon plaatje niet werkt. We hebben nu door twee plaatjes m.b.v. de sliding doors techniek te gebruiken, variabele breedte.

Op zich werkt een <button type="submit" /> goed, behalve in IE6, waar alle buttons mee worden gestuurd, in plaats van alleen de geklikte.
Dit lijkt niet overeen te komen met wat W3C zegt...
http://www.w3.org/TR/html401/interact/forms.html#h-17.5

Iemand hier een oplossing voor? Of was mijn oplossing om logica op het "name" attribuut te baseren gewoon stom? (ik hoop het niet )

[Cartman!]

Een hidden variabele zetten in je form met daarin welk form het betreft kan een oplossing zijn, je moet sowieso toch nog checken of alles wel correct ingevuld is.

[JKVA]

Cartman! schreef op maandag 10 november 2008 @ 19:44:
Een hidden variabele zetten in je form met daarin welk form het betreft kan een oplossing zijn, je moet sowieso toch nog checken of alles wel correct ingevuld is.

Volgens mij heb ik mijn probleem niet helemaal goed uitgelegd, dit keer iets vollediger.

code:

<form>
  <input text />
  <input text />
  <input text />
  <input text />

  <submit>sla op en ga naar pagina A</submit>
  <submit>sla op en ga naar pagina B</submit>
  <submit>doe nog iets anders</submit>
</form>

Ik heb dus 1 form met meerdere buttons, die elk iets anders moeten doen.

Ik had al een alternatief, namelijk je actie bepalen met radiobuttons, maar de stuurinfo in de knop zelf zetten voelt natuurlijker aan.

[crisp]

JKVA schreef op maandag 10 november 2008 @ 19:38:
[...]

Ehm, dat kan, maar we wilden eigenlijk niet met een plaatje werken. Onder andere omdat tekst wat beter is qua accessibility.

Een <img> en een <input type="image"> heeft daarvoor gewoon een alt-attribuut

[Marientjuh]

En een mooi opgemaakte button met javascript gebruiken welke hardcoded display:none; is. Dan met javascript tevoorschijn halen. En dan in een <noscript> een goede button welke de basis functionaliteit opvangt.
Hierdoor word bij een gebruiker die javascript uitgeschakeld heeft de 'oude' button weergegeven ipv de mooie button.

Tenzij je in noodsituaties ook in stijl moet blijven

[JKVA]

Aangezien het om een kritische applicatie gaat, gaan we voorlopig ff akkoord met een iets mindere styling en werken we met <input type="submit" />, aangezien we daarvan de meeste garantie hebben dat het altijd goed werkt. Als het lukt om dit element goed te stylen, zal ik de uitwerking hier nog ff posten.

In ieder geval allemaal bedankt voor het meedenken.

[Verwijderd]

gewoon ff wachten op css 3

[Sebazzz]

Verwijderd schreef op woensdag 12 november 2008 @ 16:41:
gewoon ff wachten op css 3

Zolang IE het toch niet ondersteunt kan je niks. IE ondersteunt CSS2 nog niet eens volledig
Helaas gebruiken veel mensen Ie dus je kan het niet negeren.