Forms  HTML english version

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

Για να δημιουργήσουμε μια φόρμα χρησιμοποιούμε τις ετικέτες < form >και < /form >Οι κυριότερες ιδιότητες της ετικέτας είναι οι name, method και action.

Με την ιδιότητα name δίνουμε ένα όνομα στην φόρμα ώστε να μπορούμε να αναφερόμαστε σε αυτή μέσα από τον κώδικα ενός script. 

Η ιδιότητα action περιέχει το URL του αρχείου script στον Server το οποίο θα επεξεργαστεί τα στοιχεία της Φόρμας. Το script είναι ένα πρόγραμμα το οποίο τρέχει στον Server και το οποίο μεταξύ των άλλων μπορεί να δέχεται σαν είσοδο δεδομένα τα οποία λαμβάνει ο Server από τον browser του επισκέπτη (συνήθως από μια Φόρμα). Το script , χρησιμοποιώντας μια script γλώσσα προγραμματισμού (π.χ. asp , php κτλ.) , επεξεργάζεται τα δεδομένα αυτά και έπειτα επιστρέφει στον browser μια HTML σελίδα.

Η method καθορίζει τον τρόπο με τον οποίο στέλνονται τα δεδομένα της Φόρμας στον Server όπου βρίσκεται το πρόγραμμα script που έχει δηλωθεί στην  ιδιότητα action και θα τα επεξεργαστεί και μπορεί να πάρει τις τιμές get ή post. Με την μέθοδο get τα δεδομένα προσθέτονται στο τέλος του URL που "δείχνει" η ιδιότητα action και χωρίζονται από το σύμβολο &. Με την μέθοδο post τα δεδομένα στέλνονται ξεχωριστά από το URL .

Εμείς θα χρησιμοποιούμε πάντα τη μέθοδο Post

Πριν σας δείξουμε πως φτιαχνουμε μια πλήρη φόρμα, καλό ειναι να δούμε τα βασικά κομμάτια που απαρτίζουν την φόρμα.  Συχνά θα χρησιμοποιούμε τα < input > tags για να μπορεί ο χρήστης να εισαγει δεδομένα. Μέσα στην ετικέτα θα υπάρχουν διάφορα χαρακτηριστικά που πρέπει να γνωρίζεται π.χ.

    type - καθορίζει το είδος του πεδίου εισαγωγής. Οι πιθανές επιλογές είναι text (κείμενο), πχ.  για όνομα ή επιθετο ή να υποβάλουν, τον κωδικό πρόσβασης password ή submit, κλπ.
   

name - Εκχωρεί ένα όνομα στο συγκεκριμένο τομέα, έτσι ώστε να μπορούμε να αναφερθούμε αργότερα σε αυτό.

    size - Ρυθμίζει το οριζόντιο πλάτος του πεδίου. Η μονάδα μέτρησης είναι ο κενός χαρακτήρας.

    maxlength -  υπαγορεύει το μέγιστο αριθμό χαρακτήρων που μπορούν να εισαχθούν μέσα στο πεδίο αυτό.

και η value με την οποία δίνουμε μια αρχική τιμή στο στοιχείο της φόρμας.

Εισαγωγή κειμένου και password μέσα σε μια φόρμα

HTML Κώδικας:

< form method="post" action="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">
Name: < input type="text" size="10" maxlength="40" name="name"> < br />
Password: < input type="password" size="10" maxlength="10" name="password">

< / form>

Το αποτέλεσμα στον φυλλομετρητή ειναι:

Input Forms:
Name:
Password:

Μην χρησιμοποιείτε τη λειτουργία κωδικού πρόσβασης για λόγους ασφαλείας. Τα δεδομένα στο πεδίο κωδικός πρόσβασης δεν είναι κρυπτογραφημένα και δεν είναι ασφαλές με οποιοδήποτε τρόπο.

        Τώρα θα προσθέσουμε μια  λειτουργικότητα που θα υποβάλλει τα δεδομένα στη φόρμα σας. Σε γενικές γραμμές, το κουμπί θα πρέπει να είναι το τελευταίο στοιχείο της φόρμας σας και να έχει χαρακτηριστικό όνομά  το "submit" ή "Send". Το 'Όνομα' καθορίζει ποιο είναι το όνομα του κουμπιού. Εδώ είναι μια λίστα με τα σημαντικά χαρακτηριστικά του submit:

Εκτός από την προσθήκη στο κουμπί υποβολής, πρέπει να προσθέσουμε, επίσης, και τον προορισμό για αυτές τις πληροφορίες και να καθορίστεί με ποιον τρόπο θέλουμε να ταξιδέψουν στο συγκεκριμένο μέρος.

Προσθέτοντας τα εξής χαρακτηριστικά μέσα στο tag  < form >  

    method (μέθοδος) - Εδώ θα χρησιμοποιούμε  τη λειτουργικότητα post, η οποία στέλνει τα δεδομένα χωρίς να εμφανίσει οποιαδήποτε από τις πληροφορίες για τον επισκέπτη.
   action  (δράση) - Καθορίζει το URL για να στείλετε τα δεδομένα κάπου.  Στο παράδειγμα θα στέλνει τις πληροφορίες μας σε μια ψεύτικη διεύθυνση ηλεκτρονικού ταχυδρομείου.

HTML Code:

< form method="post" action="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">
Name: < input type="text" size="10" maxlength="40" name="name"> < br />
Password: < input type="password" size="10"
maxlength="10" name="password"> < br />

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

Email Forms:
Name:
Password:

HTML Radio Buttons

Radio buttons are a popular form of interaction. You may have seen them on quizzes, questionnaires, and other web sites that give the user a multiple choice question. Below are a couple attributes you should know that relate to the radio button.

    value - specifies what will be sent if the user chooses this radio button. Only one value will be sent for a given group of radio buttons (see name for more information).
    name - defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size.

HTML Code:

< form method="post" action="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">
What kind of shirt are you wearing? < br />
Shade:

< input type="radio" name="shade" value="dark">Dark
< input type="radio" name="shade" value="light">Light < br />
Size:

< input type="radio" name="size" value="small">Small
< input type="radio" name="size" value="medium">Medium
< input type="radio" name="size" value="large">Large < br />
< input type="submit" value="Email Myself">
< / form>

Radios:
What kind of shirt are you wearing?
Shade: Dark Light
Size: Small Medium Large

If you change the email address to your own and "Email Myself" then you should get an email with "shade=(choice) size=(choice)".
HTML Check Boxes

Check boxes allow for multiple items to be selected for a certain group of choices. The check box's name and value attributes behave the same as a radio button.
HTML Code:

< form method="post" action="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">
Select your favorite cartoon characters.
< input type="checkbox" name="toon" value="Goofy">Goofy
< input type="checkbox" name="toon" value="Donald">Donald
< input type="checkbox" name="toon" value="Bugs">Bugs Bunny
< input type="checkbox" name="toon" value="Scoob">Scooby Doo
< input type="submit" value="Email Myself">
< / form>

Check Boxes:
Select the 2 greatest toons.
Goofy
Donald
Bugs Bunny
Scooby Doo
HTML Drop Down Lists

Drop down menues are created with the < select> and < option> tags. < select> is the list itself and each < option> is an available choice for the user.
HTML Code:

< form method="post" action="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">
College Degree?
< select name="degree">
< option>Choose One< / option>
< option>Some High School< / option>
< option>High School Degree< / option>
< option>Some College< / option>
< option>Bachelor's Degree< / option>
< option>Doctorate< / option>
< input type="submit" value="Email Yourself">
< / select>
< / form>

Drop Down Lists:
Education?
HTML Selection Forms

Yet another type of form, a highlighted selection list. This form will post what the user highlights. Basically just another type of way to get input from the user.

The size attribute selects how many options will be shown at once before needing to scroll, and the selected option tells the browser which choice to select by default.
HTML Code:

< form method="post" action="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">
Musical Taste
< select multiple name="music" size="4">
< option value="emo" selected>Emo< /o ption>
< option value="metal/rock" >Metal/Rock< / option>
< option value="hiphop" >Hip Hop< / option>
< option value="ska" >Ska< / option >
< option value="jazz" >Jazz< / option>
< option value="country" >Country< / option>
< option value="classical" >Classical< / option>
< option value="alternative" >Alternative< / option>
< option value="oldies" >Oldies< / option>
< option value="techno" >Techno< / option>
< / select>
< input type="submit" value="Email Yourself">
< / form>

Selection Forms:

Musical Taste

HTML Upload Forms

First of all, to actually make the upload form function correctly you must know a scripting language of some sort. PHP and PERL work fine, Javascript is also an option. We have an entire upload example demonstrated here, PHP File Upload. The HTML code for the upload form does nothing more than create an interface for the user to see and work with.

An upload form consists of three basic parts. The first being a hidden field. This hidden field does nothing more than limit the allowed file size of our uploaded file. The second part is the input field itself. In this field, the user has the option to type in the full local URL of the file or he/she may click the browse button to thumb through directory after directory. HTML codes this automatically when we place the type="file" attribute within the input tag.
HTML Code:

< input type="hidden" name="MAX_FILE_SIZE" value="100" />
< input name="file" type="file" />

Upload Form:
HTML Text Areas

Text areas serve as an input field for viewers to place their own comments onto. Forums and the like use text areas to post what you type onto their site using scripts. For this form, the text area is used as a way to write comments to somebody.

Rows and columns need to be specified as attributes to the < textarea> tag. Rows are roughly 12pixels high, the same as in word programs and the value of the columns reflects how many characters wide the text area will be. i.e. The example below shows a text area 5 rows tall and 20 characters wide. Another attribute to be aware of is the wrap. Wrap has 3 values.

    wrap=
        "off"
        "virtual"
        "physical"

Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words.
Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are.
Off of course, turns off word wrapping within the text area. One ongoing line.
HTML Code:

< form method="post" action="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">
< textarea rows="5" cols="20" wrap="physical" name="comments">
Enter Comments Here
< /textarea>
< input type="submit" value="Email Yourself">
< /form>

Text Area:
Enter Comments Here