CSS Style σε φόρμες

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Expl0it
Honorary Member
Δημοσιεύσεις: 2364
Εγγραφή: 25 Αύγ 2003 23:24
Τοποθεσία: home/sweet/home

CSS Style σε φόρμες

Δημοσίευση από Expl0it » 17 Απρ 2004 05:02

Συνήθως οι φόρμες που χρησιμοποιούμε στις σελίδες μας, δίχνουν κάπως βαρετές :P
Μπορεί να αλλάξετε το background, το χρώμα των γραμμάτων ακόμα να προσθέσετε φωτογραφίες ως buttons σε μια προσπάθεια να κάνετε την φόρμα λίγο ποιό ωραία ! Τώρα όμως μπορείτε να αλλάξετε τα χρώμματα των πραγματικών στοιχείων της φόρμας. Αυτά είναι τα Text Input Field, τα Drop Down Menus και τα Buttons ! Οι παρακάτω κώδικες λειτουργούν μόνο με Netscape 6+ ή IE 4+.

Buttons :

Κώδικας: Επιλογή όλων

<form>
<input type="submit" style="background-color&#58; #CED6FF" value="Πατήστε αυτό το ωραίo button">
</form >
Text Input Field:

Κώδικας: Επιλογή όλων

<form>
<input type="text" name="coloredRed" size="24" style="background-color&#58; #0080FF" value= "Ωραίο Χρώμμα">
</form>
Drop Down Menus:

Κώδικας: Επιλογή όλων

<form>
<select name = "colorpretty" style="background-color&#58; #2BD926">
<option> Επιλογή 1 </option>
<option> Επιλογή 2 </option>
<option> Επιλογή 3 </option>
</select>
</form>
LET THE C0DER IN YOUR LIFE
Fatal Error: Unable to read 3555 bytes in /root/head/brain/task.php on line 0

Εικόνα

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

CSS Style σε φόρμες

Δημοσίευση από xmavidis » 17 Απρ 2004 10:20

Μπράβο ρε Filter!
Αν έχω μετρήσει καλά 5+ tuts σήμερα!!!
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
beredim
Δημοσιεύσεις: 26
Εγγραφή: 28 Ιαν 2004 10:04

CSS Style σε φόρμες

Δημοσίευση από beredim » 09 Ιούλ 2005 00:30

Filter έγραψε: Drop Down Menus:

Κώδικας: Επιλογή όλων

<form>
<select name = "colorpretty" style="background-color&#58; #2BD926">
<option> Επιλογή 1 </option>
<option> Επιλογή 2 </option>
<option> Επιλογή 3 </option>
</select>
</form>
Με βάση το παραπάνω λοιπόν έκανα το εξής:

Κώδικας: Επιλογή όλων

<form>
<select name = "colorpretty">
<option style="background-color&#58; black; color&#58; red;"> Επιλογή 1 </option>
<option style="background-color&#58; blue; color&#58; white;"> Επιλογή 2 </option>
<option style="background-color&#58; green; color&#58; white;"> Επιλογή 3 </option>
</select>
</form>
Τα χρωματάκια εμφανίζονται όταν ανοίξει το μενού στις διάφορες επιλογές, αλλά η κάθε φορά επιλεγμένη επιλογή εμφανίζεται με το style του select. Πώς θα κάνουμε το style του select να αλλάζει κάθε φορά με βάση το style αυτού που επιλέξαμε?????

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS Style σε φόρμες

Δημοσίευση από skeftomilos » 09 Ιούλ 2005 06:46

Υποθέτω με JavaScript :).

Κώδικας: Επιλογή όλων

<script type="text/javascript">
  function sync_color&#40;element&#41; &#123;
    var selected = element.options&#91;element.selectedIndex&#93;
    element.style.color = selected.style.color
    element.style.backgroundColor = selected.style.backgroundColor
  &#125;
</script>
... και καλούμε τη ρουτίνα sync_color() στο συμβάν onChange του select:

Κώδικας: Επιλογή όλων

<select name="colorpretty" onChange="sync_color&#40;this&#41;">
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
beredim
Δημοσιεύσεις: 26
Εγγραφή: 28 Ιαν 2004 10:04

CSS Style σε φόρμες

Δημοσίευση από beredim » 09 Ιούλ 2005 11:47

Να 'σαι καλά skeftomilos. Δουλεύει αρκετά καλά με το script που έγραψες. Είναι βέβαια λίγο buggy, καθώς στο μεν internet explorer το προεπιλεγμένο option εμφανίζεται και αυτό με τα σωστά χρώματα, όμως όταν κάνεις κλικ σε κάποιο άλλο εμφανίζεται ένα γκρι overlay από πάνω μέχρι να χαθεί το focus του select, ενώ στον firefox αν και δεν εμφανίζει αυτό το άσχημο γκριζο overlay η προεπιλεγμένη selected option εμφανίζεται με το style του option και όχι του select.

Κώδικας: Επιλογή όλων


form>
<select name = "colorpretty" onChange="sync_color&#40;this&#41;">
    <option selected style="background-color&#58; black; color&#58; red;"> Option 1 </option>
    <option style="background-color&#58; blue; color&#58; white;"> Option 2 </option>
    <option style="background-color&#58; green; color&#58; white;"> Option 3 </option>
  </select>
</form>

Αν και κινδυνεύουμε να βγούμε off-topic καθώς είμαστε σε html/css section του forum, θα το εκτιμούσα αν κάποιος μπορούσε να εξαλείψει και τα bug που ανέφερα. Επίσης, αν υπάρχει και λύση του προβλήματος σε html/css αντί για javascript...

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS Style σε φόρμες

Δημοσίευση από skeftomilos » 10 Ιούλ 2005 12:23

Το "bug" του Firefox λύνεται μάλλον εύκολα. Αρκεί να καλέσουμε τη sync_color() μόλις φορτωθεί η σελίδα:

Κώδικας: Επιλογή όλων

<body onLoad="sync_color&#40;document.forms&#91;0&#93;.colorpretty&#41;">
Αυτό με την προϋπόθεση ότι έχουμε μόνο μία φόρμα στη σελίδα, ή έστω ότι αυτή είναι η πρώτη. Διαφορετικά πρέπει να δώσουμε ένα όνομα στη φόρμα για να είμαστε σίγουροι, π.χ.:

Κώδικας: Επιλογή όλων

<body onLoad="sync_color&#40;document.forms&#91;'pretty'&#93;.colorpretty&#41;">
  <form name="pretty">
Αλλά ακόμα απλούστερο απ' όλα αυτά είναι απλά να κάνουμε copy-paste το style του αρχικά επιλεγμένου option:

Κώδικας: Επιλογή όλων

<select name="colorpretty" style="background-color&#58; black; color&#58; red;" onChange="sync_color&#40;this&#41;">
  <option style="background-color&#58; black; color&#58; red;">Επιλογή 1</option>
Όσο για το "bug" του IE τα πράγματα είναι πιο δύσκολα γιατί το γκρι overlay είναι ο τρόπος του να μας δείξει το επιλεγμένο στοιχείο. Δε βλέπω πώς μπορεί αυτό να αλλάξει οπότε η μόνη λύση είναι να υποχρεώσουμε το στοιχείο select να χάσει το focus. Περιέργως η μέθοδος blur() δε λειτουργεί στο select του IE (αυτό είναι bug!), αλλά μπορούμε να καλέσουμε διαδοχικά focus() και blur() σε κάποιο άλλο στοιχείο text της φόρμας:

Κώδικας: Επιλογή όλων

function sync_color&#40;element&#41; &#123;
  var selected = element.options&#91;element.selectedIndex&#93;
  element.style.color = selected.style.color
  element.style.backgroundColor = selected.style.backgroundColor
  var text_element = element.form.something
  text_element.focus&#40;&#41;
  text_element.blur&#40;&#41;
&#125;
... με την προϋπόθεση πως υπάρχει στη ίδια φόρμα ένα ...

Κώδικας: Επιλογή όλων

<input type="text" name="something">
Όμως ακόμα κι αυτό δεν αρκεί, γιατί αν ο χρήστης φτάσει στο select πατώντας tab θα εμφανιστεί το γκρι overlay. Το ίδιο συμβαίνει αν πατήσει στο select αλλά επιλέξει το ήδη επιλεγμένο option (οπότε το onChange δεν τρέχει :(). Ακόμα χειρότερα είναι τα πράγματα με τον Opera 8.0, στον οποίο δεν αρέσει καθόλου το όλο concept με τα πολύχρωμα options και τα δείχνει όλα ίδια. :(:( Μπροστά σε αυτά τα προβλήματα νομίζω ότι η μόνη πραγματικά αξιόπιστη λύση είναι η υλοποίηση ενός dropdown εξ ολοκλήρου με JavaScript, κάτι όμως που θέλει πολύ πολύ πολύ δουλειά για να γίνει σωστά και μάλλον δεν αξίζει τον κόπο (θα ήταν και non-responsive έτσι κι αλλιώς).
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS Style σε φόρμες

Δημοσίευση από skeftomilos » 14 Ιούλ 2005 17:46

Ένα όχι πολύ γνωστό tag για τη βελτίωση της εμφάνισης ενός στοιχείου select είναι το optgroup. Αυτό που κάνει είναι να ομαδοποιεί τα options προσθέτοντας λεζάντες στη λίστα (μη επιλέξιμες). Ένα παράδειγμα:

Κώδικας: Επιλογή όλων

<html>
  <head>
    <title>OptGroup</title>
  </head>
  <body>
    <h2>OptGroup</h2>
    <form>
      <select id="favcity2" name="favcity2">
        <optgroup label="Europe">
          <option value="1">Amsterdam</option>
          <option value="4">Moscow</option>
          <option value="5">Dresden</option>
        </optgroup>
        <optgroup label="North America">
          <option value="2">New York</option>
          <option value="6">Salt Lake City</option>
          <option value="7">Montreal</option>
        </optgroup>
        <optgroup label="South America">
          <option value="8">Buenos Aires</option>
          <option value="9">Asuncion</option>
        </optgroup>
        <optgroup label="Asia">
          <option value="10">Hong Kong</option>
          <option value="11">Tokyo</option>
          <option value="12">New Delhi</option>
        </optgroup>
      </select>
    </form>
  </body>
</html>
... και το αποτέλεσμα σε IE 6, Firefox 1.0, Opera 8.0:

Εικόνα Εικόνα Εικόνα

Επίσης βρήκα εδώ μία εφαρμοσμένη ιδέα για την αλλαγή της εμφάνισης των checkboxes και των radiobuttons. Η ιδέα είναι πολύ καλή αλλά για την υλοποίηση έχω μερικές αμφιβολίες. Ο JavaScript κώδικας είναι σχετικά λίγος (8 KB). Όσοι θαρραλέοι και περιπετειώδεις προσέλθετε!

Εικόνα
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

CSS Style σε φόρμες

Δημοσίευση από Cmg__ » 19 Ιούλ 2005 03:14

Νομίζω πως το να επιλέξεις pic για checkboxes γινεται και με HTML. με την ιδιότητα SRC στο ΙΝPUT, ή κανω λάθος??? :oops: :oops: :oops: :oops: :question:

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS Style σε φόρμες

Δημοσίευση από skeftomilos » 20 Ιούλ 2005 18:10

Καλή η ιδέα σου Σιμιτζούλι :P αλλά απ' ό,τι φαίνεται δεν ισχύει. Να τι λέει το HTML 4.0 Specification στη σελίδα 213 για το attribute src των στοιχείων input:
When the type attribute has the value "image", this attribute specifies the location of the image to be used to decorate the graphical submit button.
Δηλαδή το src είναι μόνο για graphical submit buttons, όχι για checkboxes δυστυχώς. :(
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

CSS Style σε φόρμες

Δημοσίευση από Cmg__ » 21 Ιούλ 2005 02:25

μαλιστα :D !!!! Όπως πάντα αναλυτικότατος ο κος Skeftomilos :P !
κάτι άσχετο: όταν λες spesification 213 εννοείς στo site της w3c ή ειναι δουλειά του Mr Mosxos?

johntas
Δημοσιεύσεις: 23
Εγγραφή: 01 Ιούλ 2005 21:58

CSS Style σε φόρμες

Δημοσίευση από johntas » 17 Αύγ 2005 12:02

iparxoun eidikoi editors gia css js arxeia klp?
egw mexri twra ta anoigw me to notepad alla de mou bgazei taksinomimena ta periexomena kai epipleon exei kati perierga tetragwnakia
twra kapoios tha mou pei na stamatisw na pernw css apo allou kai na ftiaksw ta dika mou, ela omws pou eimai arketa asxetos gia na kanw kati tetoio :roll:

Άβαταρ μέλους
shadow
Script Master
Δημοσιεύσεις: 606
Εγγραφή: 14 Απρ 2005 18:30

CSS Style σε φόρμες

Δημοσίευση από shadow » 17 Αύγ 2005 12:21

Απο editors για css,js υπαρχουν ενα σωρο... Το θεμα ειναι να βρεις αυτον που θα σε βολέψει εσενα καλύτερα.Αυτούς που εχω χρησιμοποιήσει εγώ είναι το editplus και το ultraedit, στους οποιους επιλέγεις το highlight του file(php, css, js, etc). Βεβαια ειναι και το homesite της macromedia
Close your eyes
For your eyes will only tell the truth and the truth isnt what you want to see
In the dark, is it easy to pretend that the truth is it ought to be.
Programmers are programmers because they like to code

johntas
Δημοσιεύσεις: 23
Εγγραφή: 01 Ιούλ 2005 21:58

CSS Style σε φόρμες

Δημοσίευση από johntas » 17 Αύγ 2005 14:04

exm ...kanena free iparxei? :roll:

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

CSS Style σε φόρμες

Δημοσίευση από cherouvim » 17 Αύγ 2005 15:36

Καλή ιδέα επίσης είναι να ομαδοποιούμε τα controls με τα <fieldset> και <legend> tags όπως φαίνεται στην παρακάτω εικόνα.
Εικόνα

Κώδικας: Επιλογή όλων

<fieldset>
  <legend>title</legend>

  content

</fieldset>

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

CSS Style σε φόρμες

Δημοσίευση από Cmg__ » 17 Αύγ 2005 17:57

akrivws cherouvim.!
johntas, giati den einai jaba ayta poy soy edwse h shadow?

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες