Υποενότητα 3.2: Κουμπιά - Φόρμες

Εισαγωγή δεδομένων χρήστη

Η είσοδος δεδομένων χρήστη σε μια ιστοσελίδα μπορεί να διευκολυνθεί μέσω τριών προσεγγίσεων:

• <a> tags για την παροχή συνδέσμων - hyperlinks
• <button> tags για τη δημιουργία κουμπιών - buttons
• <form> για τη δημιουργία φορμών - forms
  • <input>  για τη δημιουργία φορμών στοιχείων εισόφου στις φόρμες

Κουμπιά - Buttons

• Απλή αλληλεπίδραση
  • Κλικ στο κουμπί
• Η συμπεριφορά του κουμπιού εξαρτάται από το πού βρίσκεται:
  
  • Μέσα σε μια φόρμα, παίρνει ένα συγκεκριμένο ρόλο
  • Γενικού σκοπού έξω
• <a> πορεί επίσης να μορφοποιηθεί χρησιμοποιώντας  CSS για να μοιάζει με κουμπί

Φόρμες - Forms

Στοιχεία φόρμας - Form elements:

• <input>
  • type: text, password, submit, radio, checkbox, button, color, date, datetime, email, month, number, range, search, tel, time, url, week
• <textarea>
• <button>
• <select>

Κουμπιά - Buttons

Σε αυτό το μάθημα, θα εξετάσουμε την εισαγωγή χρηστών για έναν ιστότοπο μέσω της χρήσης της λειτουργίας Υποστήριξη κουμπιών στο Bootstrap - Buttons support in Bootstrap.

Ρύθμιση για το μάθημα

• Download το αρχείοcontactus.html και μετακινήστε το στο φάκελοleChocolat. Αυτό το αρχείο έχει ήδη διαμορφωθεί με κάποιο περιεχόμενο.
• Ρυθμίστε τους συνδέσμους στις γραμμές πλοήγησης για τις τρεις σελίδες, index.html, aboutus.html και contactus.html, ώστε να μπορούμε να πλοηγηθούμε εύκολα από τη μια στην άλλη.
• Επίσης, ορίστε σωστά τους συνδέσμους στο footer για να οδηγούν τις κατάλληλες σελίδες.

Προσθήκη μίας γραμμής κουμπιών - Button Bar

Τώρα θα προσθέσουμε περιεχόμενο στο αρχείο contactus.html για να μάθουμε περισσότερα σχετικά με τα κουμπιά και τις γραμμές κουμπιών. Πηγαίνετε στο div όπου καθορίζουμε  "Button group goes here", και αντικαταστήστε το με τον ακόλουθο κώδικα για να δημιουργήσετε μια γραμμή κουμπιών που περιέχει τρία κουμπιά:

Buttons source:

Σημειώστε πώς ορίζουμε τη γραμμή κουμπιών χρησιμοποιώντας την κλάση btn-group class, και στη συνέχεια προσθέτουμε τα τρία κουμπιά χρησιμοποιώντας την ετικέτα <a> .

Στην περίπτωση αυτή, τα τρία κουμπιά είναι υπερσύνδεσμοι που προκαλούν μια ενέργεια και έχουν ένα href σχετικό με αυτούς. Έτσι, αποφασίσαμε να χρησιμοποιήσουμε την ετικέτα <a> αντί της ετικέτας <button> . Σημειώστε πώς οι  <a> έχουν μορφοποιηθεί χρησιμοποιώντας την btn class .

Κάνετε μια Git commit με το μήνυμα "Buttons"

Forms -Προσθήκη φόρμας

Prerequisites for this page: Forms

Σε αυτό το μάθημα, θα εξετάσουμε την εισαγωγώ δεδομένων των χρηστών για έναν ιστότοπο μέσω της υποστήριξης στο Bootstrap για τις φόρμες- Forms support in Bootstrap. 

Προσθήκη μιας βασικής φόρμας

Θα προσθέσουμε μια απλή φόρμα στη σελίδα στην τοποθεσία που προσδιορίζεται από το "Form goes here". Προσθέστε τον ακόλουθο κώδικα στη σελίδα για να δημιουργήσετε μια απλή οριζόντια φόρμα με δύο πεδία:

Basic form source:

Αυτό δημιουργεί μια φόρμα με δύο στοιχεία στη φόρμα. Σημειώστε ότι η κλάση row  στη φόρμα μας επιτρέπει να χρησιμοποιήσουμε το σύστημα πλέγματος Bootstrap. Ως εκ τούτου, μπορούμε να σχεδιάσουμε το περιεχόμενο χρησιμοποιώντας τις column classes ανάλογα με την περίπτωση.

... Input Group with addons...

θα δούμε τη χρήση μιας input-group μαζί με input-group-addons.Ας προσθέσουμε πεδία για να αναζητήσουμε τον αριθμό τηλεφώνου και το ηλεκτρονικό ταχυδρομείο του χρήστη:

View source:

Σημειώστε τη χρήση της input-group και της input-group-addon κλάσης.

...Checkbox and Select...

Θα δούμε την προσθήκη ενός πλαισίου ελέγχου - checkbox και ενός στοιχείου επιλογής  στη φόρμα. Σημειώστε τη μορφοποίηση αυτών των στοιχείων χρησιμοποιώντας τις κλάσεις Bootstrap

View source:

...Textarea...

Στη συνέχεια, προσθέτουμε μια textarea για τους χρήστες να υποβάλουν τα σχόλια τους ως εξής:

View source:

...Submit Button...

Τέλος, προσθέτουμε το κουμπί υποβολής - submit στη φόρμα ως εξής:

View source:

Commit

Κάντε μια Git commit με μήνυμα "Forms"

Περαιτέρω μελέτη

Official resources

• Bootstrap Buttons
• Bootstrap Button Groups
• Bootstrap Forms
• Bootstrap Input groups