Υποενότητα 9.2: Το CSS των φορμών

The fieldset

Οι παρακάτω κανόνες CSS ορίζουν την εμφάνιση του fieldset. UΧρησιμοποιώντας το CSS μπορούμε να αλλάξουμε τόσο την εμφάνιση του αυτόματα δημιουργημένου κουτιού όσο και την εμφάνιση του κειμένου που περιέχεται σε αυτό το πεδίο.

Οι κανόνες CSS:

#fieldset {
  color: #6E3F19;
  font-size:1.2 em;
  font-weight: bold;
  background: #F5F5DC;
} 
/*....*/
<fieldset id="fieldset">
  /*your code goes here*/
</fieldset>

θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

The input[type=submit]

Οι παρακάτω κανόνες CSS ορίζουν την εμφάνιση του submit button. Από προεπιλογή, ένα κουμπί έχει ένα γκρίζο φόντο και ένα τετράγωνο σχήμα. Ωστόσο, χρησιμοποιώντας τους κανόνες CSS μπορούμε να δημιουργήσουμε ένα κουμπί όπως το θέλουμε.

Οι κανόνες CSS :

input[type=submit] {
  width: 16%;
  background-color: #6E3F19;
  color: #F5F5DC;
  padding: 14px 5px 14px 5px; 
  border-style : 2px dashed; 
  border-color: rgb(162, 101, 52);
  border-radius:18px;
 }

θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

The required attribute

Ίσως έχετε παρατηρήσει ότι συνήθως, τα υποχρεωτικά πεδία μιας φόρμας έχουν έναν αστερίσκο μετά τον τίτλο.

Για να δημιουργήσουμε αυτό δημιουργούμε  div και του αποδίδουμε μια  class ( στην περίπτωση αυτή η κλάση καλείται "required"). Το div περιλαμβάνει όλα τα άλλα στοιχεία.

Στο CSS, καλούμε την "class required"  και στη συνέχεια, ανάλογα με το στοιχείο που περιέχει τον τίτλο, γράφουμε την κατάλληλη έκφραση. 

Παρατηρήστε ότι εδώ χρησιμοποιούμε την έκφραση element:after αφού ανήκει στα CSS Pseudo Elements. Μια χρήση αυτών των στοιχείων είναι να εισαγάγετε περιεχόμενο πριν ή μετά από ένα στοιχείο

Οι κανόνες CSS rules:

.required label:after { content:"*"; }
.required p:after { content:"*"; }
/*...*/
<div class="required">
  /*The label and input elements*/
<div>

θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

Άσκηση

Περισσότερες πληροφορίες: https://www.w3schools.com/css/css_form.asp

Exercise

1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice09.2.html στον φάκελο "Exercises".
2. Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο. Αυτός ο κώδικας περιλαμβάνει όλα όσα εξηγήσαμε σε αυτήν την ενότητα.
3. Αποθηκεύστε το αρχείο. Είναι όλα καλά? Μπορείτε να πειραματιστείτε είτε με το CSS είτε με το HTML (π.χ. προσθέστε ένα νέο στοιχείο φόρμας).

Κώδικας: