Forms
Download
1 / 26

sa st 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 'sa st 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 l.jpg

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

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


Slide2 l.jpg
Εισαγωγή στην Ενότητα

  • Tι είναι οι Forms;

  • Πως χρησιμοποιούνται στο web;

  • Mark-up εντολές για εισαγωγή forms

  • Δεν θα μιλήσουμε για μεθόδους συγγραφής CGI scripts που χρησιμοποιούνται με forms

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


Forms3 l.jpg
Περί forms

  • Οι Forms  υποβολή πληροφοριών στον web administrator με

    • Πλαίσια κειμένου, πλήκτρα, checkboxes, menu και κυλιόμενες λίστες

    • Πχ. εταιρίες τις χρησιμοποιούν για παραγγελίες, δημοσκοπήσεις, ταυτοποίηση χρηστών, και για παροχή σχολίων από τους χρήστες

  • Η form συλλέγει στοιχεία από το χρήστη

  • Για την επεξεργασία χρειάζεται το Common Gateway Interface (CGI)

  • Δεν χρειάζεστε CGI για τις απλές forms που θα δούμε στο μάθημα

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


Form browser l.jpg
Form στον browser

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


Slide5 l.jpg
Παράδειγμα, form με πλαίσια κειμένου

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

    <form method="post" action="mailto:[email protected]" enctype="text/plain">

    Enter first name:

    <input type="text" name="first" size="15" />

    <br />

    Enter last name:

    <input type="text" name="last" size="20" />

    <br /><br />

    <input type="submit" value="Send" />

    <input type="reset" value="clear" />

    </form>

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


Tags form post action l.jpg
Επεξηγώντας τα tags: form, post, action

  • <form>…</form>

    • Το βασικό 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 l.jpg
Επεξηγώντας τα tags: enctype

  • enctype="text/plain"

    • Πως θα υποβληθούν τα δεδομένα

    • Υποβολή σε email  text/plain

  • Η form που φτιάξαμε ζητάει από ένα χρήστη να βάλει όνομα και επώνυμο και μετά να πατήσει το submit

  • Στο email θα ληφθεί

    • first=Rodia

    • last=Rascolnikov

  • Εάν το enctype παραληφθεί, τα δεδομένα θα σταλούν σε μία γραμμή ως

    • first=Ralph&last=Phillips.

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


Text boxes l.jpg
Περισσότερα: Text boxes

  • <input type="text" name="fieldname" size="15" />

  • size="number"

    • Μέγεθος πεδίου textbox=15 χαρακτήρες15 χαρακτήρες εμφανίζονταιδεν περιορίζει αυτούς που μπορούν να εισαχθούν

  • value="text"

    • εμφανίζεται κείμενο στο text box.

  • maxlength="number"

    • Μέγιστος αριθμός χαρακτήρων που μπορεί να εισαχθεί στο text box

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


Passwords l.jpg
Πλαίσια κειμένου για κωδικούς (passwords)

  • <input type="password" name="password" size="10" />

  • Τα πλαίσια κωδικών (password boxes) επιτρέπουν την εισαγωγή κωδικού

  • Αυτός θα επεξεργαστεί από CGI script για να επιτρέψει ή όχι πρόσβαση χρήστη

  • Στο password box εμφανίζονται αστερίσκοι (*) για ασφάλεια

  • Ελάχιστη ασφάλεια γιατί το password υποβάλλεται στον sever ως απλό κείμενο

  • Όποιος έχει πρόσβαση στο δίκτυο μπορεί να δει τα passwords

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


Checkbox l.jpg
Checkbox

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

    Τι κατοικίδια έχετε;<br />

    <input type="checkbox" name="bird" />πουλιά <br />

    <input type="checkbox" name="cat" />γάτες <br />

    <input type="checkbox" name="dog" />σκυλιά <br />

    <input type="checkbox" name="rept" />ερπετά <br />

    <input type="checkbox" name="fish" />ψάρια <br />

  • checked="checked“

    • Η ιδιότητα checked σε ένα στοιχεία εισόδου(input element) σημαίνει ότι έχουμε εξ’ορισμού επιλογή

    • Μπορεί να χρησιμοποιηθεί σε πολλά text boxes αλλά μόνο σε ένα radio button

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


Checkbox11 l.jpg
Checkbox

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


Radio buttons l.jpg
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 l.jpg
Radio buttons

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


Radio buttons14 l.jpg
Radio buttons, κώδικας

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

<br />

<input type="radio" name="campus" value="central" />

Κεντρικά <br />

<input type="radio" name="campus" value="latsia" />

Λατσιά <br />

<input type="radio" name="campus" value="panep"/>

Πανεπιστιμιούπολις<br />

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


Slide15 l.jpg
Συνημμένα αρχεία

  • H form για attachments θα επιτρέψει στον χρήστη να στείλει αρχείο

  • Αυτό χρειάζεται και CGI script

  • Υποβολή βιογραφικού:

    • <input type="file" name="resume" />

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


Submit and reset l.jpg
Υποβολή και καθαρισμός (submit and reset)

  • Κάθε form πρέπει να παρέχει στο χρήστη τη δυνατότητα να υποβάλλει πληροφορίας

  • Επίσης χρήσιμο είναι και ο καθαρισμός

  • <input type="submit" value="Send Info" />

  • <input type="reset" value="Clear Form" />

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


Slide17 l.jpg
Υποβολή με εικόνα

  • Χρήση εικόνας για το πλήκτρο υποβολήταιριάζει με το site

  • To εξ’ορισμού πλήκτρο είναι γκρί

  • Για παράδειγμα μπορείτε να έχετε το

  • <input type="image" name="feedback" src="image.gif" width=119 height=22 border="0" alt="send info" />

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


Slide18 l.jpg
Πλήκτρα

  • Μπορείτε να έχετε πλήκτρα

  • Συνήθως υπάρχει από κάτω ένα CGI script που επεξεργάζεται την πληροφορία

  • Εναλλακτικά χρησιμοποιούνται για πλοήγηση όταν συνδυάζονται με με το onClick της JavaScript

  • <input type="button" name="home" value="Go Home" onClick="parent.location='http://www.cs.ucy.ac.cy'" />

  • Μπορείτε να φτιάξετε μία ολόκληρη toolbar από buttons, όπου το κάθε button θα έχει και δική του εικόνα

  • <button name=“ucyink" value="usyhome" type="button"

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

    <img src=“ucy.gif" /></button>

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

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


Slide19 l.jpg
Μενού (συνέχεια)

  • Τα drop-down menu επιτρέπουν επιλογή από ένα menu

  • Tα drop down καταλαμβάνουν λιγότερο χώρο από τα checkboxes ή τα radio buttons

  • Tα Drop-down δεν χρησιμοποιούν το input element

  • Αντίθεταχρησιμοποιούν το selectκαιτο option element

    <select name="schools" size="1">

    <option value="usf" label=“Τμήμα Πληροφορικής">

    Τμήμα Πληροφορικής </option>

    <option value="ucf" label=" Τμήμα Μαθηματικών ">

    Τμήμα Μαθηματικών</option>

    <option value="uf" label=«Τμήμα Βιολογίας">

    Τμήμα Βιολογίας</option>

    </select>

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


Slide20 l.jpg
Παράδειγμα Μενού (συνέχεια)

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


Slide21 l.jpg
Μενού (συνέχεια)

  • 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 l.jpg
Περιοχή κειμένου

  • Οι χρήστες μπορούν να υποβάλλουν κείμενο με το text type input

  • Για περισσότερο χώρο υπάρχει το text area

  • <textarea name="comment" rows="5" cols="50">

  • Type your comment then click the submit button.

  • </textarea>

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


Slide23 l.jpg
Tabs

  • Στις web form κίνηση από πεδίο σε πεδίο με το Tab

  • Τα πεδία του form θα ενεργοποιηθούν με τη σειρά που τα έχετε καταγράψει στο xhtml κείμενο

  • Αλλά, μπορείτε να αλλάξετε τη σειρά με το tabindexattribute

  • Αυτό μπορεί να εφαρμοστεί σε πίνακες αν ο χρήστης πρέπει να βάζει πληροφορίες ανά στήλη

    <input tabindex="1" type="text" name="last" size="20" />

    <input tabindex="2" type="text" name="first" size="15" />

    <input tabindex="3" type="submit" />

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

  • Από το 13

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



Slide25 l.jpg

<form method="post" action="mailto:[email protected]" enctype="text/plain">

Last name, First name, Middle Initial<br />

<input type="text" name="last" size="20" />

<input type="text" name="first" size="15" />

<input type="text" name="mi" size="1" maxlength="1" />

<br /><br />

Web Address:<br />

<input type="text" name="web" size="40"value="http://" />

<br /><br />

What are your hobbies?<br />

<input type="checkbox" name="dancing" />Dancing

<input type="checkbox" name="swimming" />Swimming

<input type="checkbox" name="inline" />Inline Skating

<input type="checkbox" name="reading" />Reading

<br /><br />

What is your marital status?<br />

<input type="radio" name="status"

value="decline" checked="checked" />Decline to answer

<input type="radio" name="status"

value="single" />Single

<input type="radio" name="status"

value="married" />Married

<input type="radio" name="status"

value="partner" />Living with Partner

<br /><br />

Gender:

<select name="gender" size="1">

<option value="decline">Decline</option>

<option value="female">Female</option>

<option value="male">Male</option>

</select>

<br /><br />

Please leave a comment:<br />

<textarea name="comment" rows="5" cols="35"> </textarea>

<br /><br /><hr />

<input type="submit" Value="Submit Entry" />

</form>

κώδικας,προηγούμενης form

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


Slide26 l.jpg

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


ad