Ξεκίνησα ένα νέο project που περιλαμβάνει καλάθι αγορών, επομένως, φόρμες. Ο «web designer» έχει βέβαια τη δική του άποψη για το πως θα πρέπει να εμφανίζονται τα πεδία και τα κουμπιά οπότε έπρεπε να βρω μια λύση για όλα τα submit αλλά και τα cancel κουμπιά. Γενικώς, είμαι κατά του «styling» των πεδίων με το σκεπτικό πως θα πρέπει αυτά να ταιριάζουν με το λειτουργικό σύστημα του χρήστη ώστε να είναι σαφής η λειτουργικότητα τους αλλά ο «designer ξέρει καλύτερα»!

Αποφάσισα να χρησιμοποιήσω <button> γνωρίζοντας ήδη τις μεγάλες διαφορές στην παρουσίαση του <input> σε κάθε browser, οπότε, ξεκίνησα να προγραμματίζω στον Firefox και όλα καλά. Μέχρι που άρχισα τις δοκιμές στους άλλους browsers και «ανακάλυψα» μερικά προβλήματα.

Ορίστε λοιπόν μια απλή φόρμα για τις δοκιμές:

<form action="button.php" method="post">
<fieldset><legend>input type="submit"</legend>
	<p><input class="bgImageOk" name="input_submit_ok" type="submit" value="input_submit_ok"></p>
	<p><input class="bgImageCancel" name="input_submit_cancel" type="submit" value="input_submit_cancel"></p>
</fieldset>
<fieldset><legend>input type="image"</legend>
	<p><input name="input_image_ok" src="ok.png" type="image" value="input_image_ok"></p>
	<p><input name="input_image_cancel" src="cancel.png" type="image" value="input_image_cancel"></p>
</fieldset>
<fieldset><legend>button type="submit"</legend>
	<p><button name="button_submit_ok" type="submit" value="button_submit_ok"><img alt="" src="ok.png">OK</button></p>
	<p><button name="button_submit_cancel" type="submit" value="button_submit_cancel"><img alt="" src="cancel.png">Cancel</button></p>
</fieldset>
</form>

Και το CSS για να δούμε τις διαφορές:

button { height:32px; width:32px; }
fieldset { width:160px; }
form p { float:left; margin:0 1em 0 0; }
input { height:32px; text-indent:-100em; width:32px; }
input.bgImageOk { background-image:url(ok.png); }
input.bgImageCancel { background-image:url(cancel.png); }

Προφανώς δεν θα κερδίσουμε βραβείο design με τούτο αλλά αρκεί για να δούμε μερικά ζητήματα:

• Ο Firefox μας δείχνει ακριβώς ότι του ζητήσαμε. Είναι φανερό πως τα <input type="image"> είναι πιο κατάλληλα για κουμπιά με γραφικά αλλά, δυστυχώς, δεν έχουν το εφέ της πίεσης που είναι χρήσιμο για τον χρήστη — θα πρέπει να χρησιμοποιήσουμε Javascript.
• Ο Internet Explorer 8 έχει εξίσου προβλέψιμη συμπεριφορά αλλά -άσχετο- δείχνει σε λάθος σημείο τα <legend>. Φαντάζομαι πως θα βελτιωθεί μέχρι την τελική version.
• Οι IE 7 και 6 μας επιφυλλάσουν εκπλήξεις. Κατ'αρχάς (αν και δεν φαίνεται στο screenshot) εμφανίζουν τα <fieldset> στη σειρά. Έπειτα, με το text-indent:-100em σε κάθε <input>, απλώς δεν τα δείχνουν! Αφαιρώντας το, o IE 7 μας δείχνει το παρακάτω (έχω κάνει resize) ενώ ο IE 6, απλώς αδιαφορεί.
  
  
• Ο Safari, παρά το άθλιο rendering του κειμένου (δεν χρησιμοποιεί ClearType), δείχνει όπως θα έπρεπε.
• Τέλος, ο Opera, δεν σέβεται το text-indent:-100em (που υπάρχει για να «κρύβει» το value του πεδίου), ούτε τις διαστάσεις του <button>. Υποθέτω θα μπορώ να λύσω αυτά τα μικροπροβλήματα με άλλους κανόνες CSS αλλά δεν το ψάχνω περισσότερο διότι…

…μόλις έρθει η ώρα να πατήσω επιτέλους το submit για να στείλω (με POST) τη φόρμα, αρχίζει το «γλέντι». Ποιό από τα… 6 θα μου πείτε. Επειδή μια φόρμα με 6 submit όπως αυτή του τεστ, σπάνια θα χρειαστεί, θα αφήσω μόνο τα 2 <button> και θα προσθέσω ένα απλό πεδίο κειμένου (<input name="txt" type="text">). Επίσης, για να μπορέσω να δω τι ακριβώς στέλνει ο κάθε browser στον server, θα χρησιμοποιήσω την εντολή print_r($_POST) της PHP.

Σύμφωνα με τις προδιαγραφές, επιτρέπεται να υπάρχουν περισσότερα από ένα submit σε μία φόρμα αλλά, ενώ είναι σαφές πιο απ' όλα θα ενεργοποιηθεί με την επιλογή του, δεν είναι σαφές τι θα πρέπει να γίνεται στην περίπτωση που ο χρήστης πατήσει το Enter για να «στείλει» τη φόρμα. Εδώ πιστεύω θα πρέπει να παίζει ρόλο η σειρά εμφάνισης στον κώδικα που δίνει και ένα μικρότερο tabindex — υποθέτω λοιπόν πως θα πρέπει να σταλεί το ΟΚ. Για να δούμε τι συμβαίνει στην πράξη, πρώτα με την χρήση του Enter:

• Οι Firefox, Safari και Opera δουλεύουν όπως θα έπρεπε. Στέλνουν στον server το όνομα του πεδίου κειμένου (name="txt") και το value — που, αφού δεν πληκτρολόγησα τίποτα, είναι κενό. Στέλνουν επίσης το name και το value του πρώτου submit στη σειρά εμφάνισης.
• Οι Internet Explorer 8 (beta 1) και 7 στέλνουν μόνο το πεδίο κειμένου. Αφού δεν πατήθηκε κανένα submit, δεν στέλνουν τίποτα!
• Ο IE 6 όχι μόνο στέλνει και τα 2 <button> αλλά στέλνει τα περιεχόμενα αντί για το value τους!
• Τέλος, αν αντί για Enter, απλώς κλικάρω το κουμπί που θέλω, όλοι οι browsers πλην των Internet Explorer 7 και 6, στέλνουν το name και το value του κουμπιού που «πάτησα». Ο ΙΕ 7 όμως στέλνει πάλι τα περιεχόμενα του button ενώ ο IE 6 στέλνει τα περιεχόμενα και των δύο!

Κάπου εδώ, ένας λογικός προγραμματιστής παύει να ασχολείται με το <button> και αναζητά άλλες λύσεις για «όμορφα» κουμπιά…

…συνεχίζεται…

(Καμία ψήφος)

 Loading ...

TrackBack URL