forms
Download
Skip this Video
Download Presentation
Εισαγωγή στις Forms

Loading in 2 Seconds...

play fullscreen
1 / 26

Εισαγωγή στις Forms - PowerPoint PPT Presentation


  • 203 Views
  • Uploaded on

Εισαγωγή στις Forms. Εισαγωγή στην Ενότητα. T ι είναι οι Forms ; Πως χρησιμοποιούνται στο web ; Mark-up εντολές για εισαγωγή forms Δεν θα μιλήσουμε για μεθόδους συγγραφής CGI scripts που χρησιμοποιούνται με forms. Περί forms.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Εισαγωγή στις Forms' - Roberta


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
forms

Εισαγωγή στις Forms

2004, Δημήτριος Βογιατζής

slide2
Εισαγωγή στην Ενότητα
  • Tι είναι οι Forms;
  • Πως χρησιμοποιούνται στο web;
  • Mark-up εντολές για εισαγωγή forms
  • Δεν θα μιλήσουμε για μεθόδους συγγραφής CGI scripts που χρησιμοποιούνται με forms

2004, Δημήτριος Βογιατζής

forms3
Περί forms
  • Οι Forms  υποβολή πληροφοριών στον web administrator με
    • Πλαίσια κειμένου, πλήκτρα, checkboxes, menu και κυλιόμενες λίστες
    • Πχ. εταιρίες τις χρησιμοποιούν για παραγγελίες, δημοσκοπήσεις, ταυτοποίηση χρηστών, και για παροχή σχολίων από τους χρήστες
  • Η form συλλέγει στοιχεία από το χρήστη
  • Για την επεξεργασία χρειάζεται το Common Gateway Interface (CGI)
  • Δεν χρειάζεστε CGI για τις απλές forms που θα δούμε στο μάθημα

2004, Δημήτριος Βογιατζής

form browser
Form στον browser

2004, Δημήτριος Βογιατζής

slide5
Παράδειγμα, form με πλαίσια κειμένου
  • Mία απλή form με για πλαίσια κειμένου (text boxes) μπορεί να γίνει ως εξής:

Enter first name:


Enter last name:



2004, Δημήτριος Βογιατζής

tags form post action
Επεξηγώντας τα tags: form, post, action
    • Το βασικό form tags λέει στον browser να επιδείξει μία form.
    • Ο τύπος των πεδίων μέσα στην form εξαρτάται από τα στοιχεία που περικλείονται μεταξύ των δύο παραπάνω tags
  • method="post"
    • Λέει στον browser πώς να στείλει την πληροφορία στον web server Post= επεξεργασία γραμμή προς γραμμή.
  • action="url ή mailto"
    • Ιδανικά το URL που βρίσκεται το CGI script (π.χ. www.domain.com/cgi-bin/orderform.pl
    • Εναλλακτικά ή διεύθυνση email στην οποία θα πάει η πληροφορία
      • Τα δεδομένα θα πάνε στο κείμενο του μηνύματος

2004, Δημήτριος Βογιατζής

tags enctype
Επεξηγώντας τα tags: enctype
  • enctype="text/plain"
    • Πως θα υποβληθούν τα δεδομένα
    • Υποβολή σε email  text/plain
  • Η form που φτιάξαμε ζητάει από ένα χρήστη να βάλει όνομα και επώνυμο και μετά να πατήσει το submit
  • Στο email θα ληφθεί
    • first=Rodia
    • last=Rascolnikov
  • Εάν το enctype παραληφθεί, τα δεδομένα θα σταλούν σε μία γραμμή ως
    • first=Ralph&last=Phillips.

2004, Δημήτριος Βογιατζής

text boxes
Περισσότερα: Text boxes
  • size="number"
    • Μέγεθος πεδίου textbox=15 χαρακτήρες15 χαρακτήρες εμφανίζονταιδεν περιορίζει αυτούς που μπορούν να εισαχθούν
  • value="text"
    • εμφανίζεται κείμενο στο text box.
  • maxlength="number"
    • Μέγιστος αριθμός χαρακτήρων που μπορεί να εισαχθεί στο text box

2004, Δημήτριος Βογιατζής

passwords
Πλαίσια κειμένου για κωδικούς (passwords)
  • Τα πλαίσια κωδικών (password boxes) επιτρέπουν την εισαγωγή κωδικού
  • Αυτός θα επεξεργαστεί από CGI script για να επιτρέψει ή όχι πρόσβαση χρήστη
  • Στο password box εμφανίζονται αστερίσκοι (*) για ασφάλεια
  • Ελάχιστη ασφάλεια γιατί το password υποβάλλεται στον sever ως απλό κείμενο
  • Όποιος έχει πρόσβαση στο δίκτυο μπορεί να δει τα passwords

2004, Δημήτριος Βογιατζής

checkbox
Checkbox
  • Checkboxes, radio buttons, και μενού επιτρέπουν στο χρήστη να επιλέξει από ένα κατάλογο

Τι κατοικίδια έχετε;

πουλιά

γάτες

σκυλιά

ερπετά

ψάρια

  • checked="checked“
    • Η ιδιότητα checked σε ένα στοιχεία εισόδου(input element) σημαίνει ότι έχουμε εξ’ορισμού επιλογή
    • Μπορεί να χρησιμοποιηθεί σε πολλά text boxes αλλά μόνο σε ένα radio button

2004, Δημήτριος Βογιατζής

checkbox11
Checkbox

2004, Δημήτριος Βογιατζής

radio buttons
Radio Buttons
  • Τα Radios buttons είναι σχεδόν όπως τα check boxes
  • Όμως στα radio buttons ο χρήστης διαλέγει μόνο ένα από τις επιλογές που έχει
  • στα Checkboxes ο χρήστης μπορεί να επιλέξει περισσότερα στοιχεία
  • Τα radio buttons για το ίδιο θέμα πρέπει να έχουν το ίδιο όνομα αλλά διαφορετικές ιδιότητες
  • The different radio buttons for the same topic must all have the same name, but the value attributes are all different

2004, Δημήτριος Βογιατζής

radio buttons13
Radio buttons

2004, Δημήτριος Βογιατζής

radio buttons14
Radio buttons, κώδικας

Σε ποιό παράρτημα του Παν.Κύπρου έχετε τα περισσότερα μαθήματα;


Κεντρικά

Λατσιά

Πανεπιστιμιούπολις

2004, Δημήτριος Βογιατζής

slide15
Συνημμένα αρχεία
  • H form για attachments θα επιτρέψει στον χρήστη να στείλει αρχείο
  • Αυτό χρειάζεται και CGI script
  • Υποβολή βιογραφικού:

2004, Δημήτριος Βογιατζής

submit and reset
Υποβολή και καθαρισμός (submit and reset)
  • Κάθε form πρέπει να παρέχει στο χρήστη τη δυνατότητα να υποβάλλει πληροφορίας
  • Επίσης χρήσιμο είναι και ο καθαρισμός

2004, Δημήτριος Βογιατζής

slide17
Υποβολή με εικόνα
  • Χρήση εικόνας για το πλήκτρο υποβολήταιριάζει με το site
  • To εξ’ορισμού πλήκτρο είναι γκρί
  • Για παράδειγμα μπορείτε να έχετε το

2004, Δημήτριος Βογιατζής

slide18
Πλήκτρα
  • Μπορείτε να έχετε πλήκτρα
  • Συνήθως υπάρχει από κάτω ένα CGI script που επεξεργάζεται την πληροφορία
  • Εναλλακτικά χρησιμοποιούνται για πλοήγηση όταν συνδυάζονται με με το onClick της JavaScript
  • Μπορείτε να φτιάξετε μία ολόκληρη toolbar από buttons, όπου το κάθε button θα έχει και δική του εικόνα

onClick="parent.location='http://www.ucy.ac.cy'">

Τα πλήκτρα δεν είναι απαραίτητο να βρίσκονται μέσα σε form

2004, Δημήτριος Βογιατζής

slide19
Μενού (συνέχεια)
  • Τα drop-down menu επιτρέπουν επιλογή από ένα menu
  • Tα drop down καταλαμβάνουν λιγότερο χώρο από τα checkboxes ή τα radio buttons
  • Tα Drop-down δεν χρησιμοποιούν το input element
  • Αντίθεταχρησιμοποιούν το selectκαιτο option element

2004, Δημήτριος Βογιατζής

slide20
Παράδειγμα Μενού (συνέχεια)

2004, Δημήτριος Βογιατζής

slide21
Μενού (συνέχεια)
  • name="text"
    • Όνομα μενού επιλογών
  • size="number"
    • Αριθμός επιλογών που θα εμφανίζονται προ της ενεργοποίησης του μενού
  • multiple="multiple”
    • Στο element select: Μετατρέπει το μενού από drop down σε scrolling
  • selected="selected"
    • Μέσα στο option element.
    • Η εξ’ορισμού επιλογή
    • Εάν το multiple attribute δεν χρησιμοποιηθεί τότε μόνο ένα element μπορεί να έχει την selected
    • Αν δεν χρησιμοποιηθεί ή selected τότε η πρώτη επιλογή είναι η εξ’ορισμού.
    • Eαν το multiple attribute είναι μέσα σε ένα select element, η selected attribute μπορεί να υπάρχει σε πολλές επιλογές
  • value="text"
    • Στο option element. Προσδιορίζει το option που επελέγη όταν υποβληθεί η form.
    • Κάθε option διαφορετική τιμή
  • label="text"
    • Στο option element. Προαιρετικό. Οι Browsers will θα το δείξουν ως option label.

2004, Δημήτριος Βογιατζής

slide22
Περιοχή κειμένου
  • Οι χρήστες μπορούν να υποβάλλουν κείμενο με το text type input
  • Για περισσότερο χώρο υπάρχει το text area

2004, Δημήτριος Βογιατζής

slide23
Tabs
  • Στις web form κίνηση από πεδίο σε πεδίο με το Tab
  • Τα πεδία του form θα ενεργοποιηθούν με τη σειρά που τα έχετε καταγράψει στο xhtml κείμενο
  • Αλλά, μπορείτε να αλλάξετε τη σειρά με το tabindexattribute
  • Αυτό μπορεί να εφαρμοστεί σε πίνακες αν ο χρήστης πρέπει να βάζει πληροφορίες ανά στήλη

  • Τα πεδία θα ενεργοποιηθούν ανάλογα με τη σειρά των τιμών tabindex
  • Από το 13

2004, Δημήτριος Βογιατζής