Υποθέτω λοιπόν ότι δημιουργείτε ένα επιπλέον αρχείο HTML. Εγώ το αποθηκεύω ως kontakt.html. Το kontakt.html βρίσκεται στον ίδιο φάκελο με το ήδη γνωστό index.html.
Σε αυτό το πρώτο μέρος γίνονται οι βασικές ρυθμίσεις στη φόρμα. Πράγματα όπως στρογγυλές γωνίες, χρωματικοί κυλινδρικοί, κ.λπ. θα ακολουθήσουν στο επόμενο εγχειρίδιο.
Μέσα στο kontakt.html δημιουργείτε τη φόρμα. Η φόρμα ορίζεται μέσα στην περιοχή div με κλάση content. Σκεφτείτε στη συνέχεια ποια πεδία πρέπει να δημιουργηθούν. Εγώ αποφάσισα να ζητήσω τις παρακάτω πληροφορίες:
• Όνομα
• Διεύθυνση email
• Σχόλιο
Φυσικά πρέπει να αποφασίσετε μόνοι σας ποιες πληροφορίες θέλετε να συλλέξετε. Γενικά, σας συμβουλεύω να ζητάτε μόνο τα πραγματικά απαραίτητα δεδομένα. Οι περισσότεροι επισκέπτες των ιστοσελίδων αποφεύγουν τις εκτενείς φόρμες. Κρατήστε το σύντομο.
Η βασική δομή της φόρμας μου είναι η εξής:
<div class="content">
<form class="form" action="#" method="post">
<fieldset>
<legend>Επικοινωνία μαζί μας</legend>
<ol>
<li>
<label for="name">Όνομα:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Διεύθυνση email:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comment">Σχόλιο:</label>
<textarea cols="32" rows="7" name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Υποβολή" />
</li>
</ol>
</fieldset>
</form>
</div>Η φόρμα δεν περιέχει αρχικά κάποιες ιδιαιτερότητες. Έχει εφαρμοστεί μια οριοθέτηση fieldset γύρω από τα πεδία της φόρμας. Πώς να δημιουργηθούν τα πεδία της φόρμας και το ρόλο των στοιχείων label έχει ήδη περιγραφεί επαρκώς. Σε αυτό το σημείο η πλήρης συγκέντρωση αφορά τη σχεδίαση της φόρμας.
Όταν δείτε το αποτέλεσμα στον περιηγητή, αρχικά θα είναι μια φόρμα που δεν είναι πολύ ελκυστική.
Πρέπει να βελτιστοποιηθεί φυσικά.
Αρχικά γίνονται βασικές δηλώσεις για τη φόρμα.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Εδώ ορίζονται οι εξωτερικές και εσωτερικές αποστάσεις. Επίσης, ορίζεται μια πλάτος 550 pixel για τη φόρμα.
Συνεχίζουμε με την εμφάνιση της fieldset.
fieldset {
padding: 10px 20px 25px;
}
Και εδώ ορίζονται οι αποστάσεις.
Τα πεδία της φόρμας καθευθύνονται μέσα σε ένα ταξινομημένο ol λίστα.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Για να μην είναι οπτικά αναγνωρίσιμο ως λίστα αριθμημένης λίστας, χρησιμοποιείται το list-style-type: none;. Επίσης, ορίζονται οι περιθώρια και τα εσωτερικά αποστάσεις σε 0.
Στο επόμενο βήμα ορίζονται οι στοιχεία της λίστας. Αυτά κάνουν float προς τα αριστερά και έχουν εσωτερική απόσταση 10 pixel.
li {
float: left;
padding: 10px;
}
Υπάρχει μία ειδικότητα όσον αφορά το κουμπί που βρίσκεται κάτω από τη φόρμα. Αυτό πρέπει να ευθυγραμμίζεται δεξιά.
li.button {
float: none;
clear: both;
text-align: right;
}Η Επικεφαλίδα της Φόρμας
Αφιερώνουμε τώρα χρόνο στο στοιχείο legend. Μέσω αυτού ορίζεται η επικεφαλίδα της φόρμας.
Η οριοθέτηση για την επικεφαλίδα είναι ως εξής:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}Οι Ετικέτες
Το στοιχείο label έχει ήδη αναφερθεί σε αυτήν τη σειρά. Μέσω του label μπορεί να δημιουργηθεί μια λογική αναφορά μεταξύ του ετικέτας του πεδίου και του πραγματικού πεδίου φόρμας. Υπάρχει μια ειδικότητα στον καθορισμό CSS εδώ.
label {
display: block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}
Εξοπλίζω το στοιχείο label με την χρήση του cursor. Με αυτόν τον τρόπο δείχνετε στους επισκέπτες ότι οι ετικέτες των πεδίων είναι κλικάρισμα. Μόλις κλικάρουν ένα ετικέτα πεδίου, το κέρσορας τοποθετείται αυτόματα μέσα στο αντίστοιχο πεδίο.
Σχεδίαση των Πεδίων της Φόρμας
Στο επόμενο βήμα σχεδιάζονται τα πραγματικά πεδία της φόρμας. Αρχικά γίνονται γενικές δηλώσεις για το input και το textarea.
input, textarea {
color: #3399FF;
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
Πρόκειται αποκλειστικά για θέματα σχεδιασμού. Ιδιαίτερη προσοχή πρέπει να δοθεί στα περιθώρια. Αμέσως μόλις τοποθετήσετε τον κέρσορα σε ένα πεδίο, αλλάζει το χρώμα των πλαισίων. Αυτό δεν είναι μόνο ένα αισθητικό θέμα. Πράγματι, αυτό βοηθά επίσης τους επισκέπτες κατά την συμπλήρωση της φόρμας. Έτσι βλέπουν πάντα αμέσως σε ποιο πεδίο βρίσκεται αυτή τη στιγμή ο κέρσορας.
Τώρα ακολουθούν μερικές πληροφορίες για το πολλαπλών γραμμών πεδίο κειμένου.
textarea {
width: 430px;
overflow: auto;
}
Το πλάτος αυτού του πεδίου καθορίζεται σε 430 pixel. Κάτι που μπορεί να φανεί λίγο περίεργο με την πρώτη ματιά είναι η εντολή overflow: auto σε σχέση με τα πολλαπλών γραμμών πεδία κειμένου. Αυτή η γραμμή οφείλεται σε παλαιότερες εκδόσεις του Internet Explorer. Πράγματι, αυτός ο περιηγητής εμφανιζόταν εικονικές γραμμές κύλισης ακόμα και σε πολλαπλών γραμμών πεδία κειμένου, ακόμα και όταν αυτό δεν ήταν αναγκαίο. Με το overflow: auto μπορεί να αντιμετωπιστεί αυτό το πρόβλημα.
Σχεδίαση του κουμπιού Αποστολή
Προς το παρόν, το κουμπί Αποστολή εμφανίζεται αρκετά απλό. Αυτό θα αλλάξει τώρα. Το αποτέλεσμα θα είναι ως εξής:
Στο κουμπί θα αποδοθούν διάφορες ιδιότητες.
• Χρώμα φόντου
• Εμφάνιση γραμματοσειράς
• Πλαίσιο
• Αποστάσεις
Η αντίστοιχη σύνταξη CSS εμφανίζεται ως εξής:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}
Ενδεχομένως να αξίζει να αναφερθεί εδώ η εντολή input[type="submit"]. Με αυτόν τον επιλογέα προσπελαύνονται τα στοιχεία εισόδου που διαθέτουν τον συνδυασμό χαρακτηριστικών type="submit".
