HTML: 4o μάθημα (Semantics, forms, inputs)

Ύλη

HTML Semantic Elements

• https://www.w3schools.com/html/html5_semantic_elements.asp
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
• https://www.w3.org/TR/2011/WD-html5-20110405/sections.html

Αρχικά να γίνει μια αναφορά σχετικά με τα headings
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

• Μόνο ένα h1 σε κάθε σελίδα
• Δεν παραλείπουμε επίπεδα headings (π.χ. μια σελίδα να περιέχει h1 και μετά h3 χωρίς να έχει h2) γιατί μπερδεύει τους αυτόματους εκφωνητές (readers)

Φόρμες συμπλήρωσης στοιχείων- Forms

1. Η καλή χρήση των inputs  κάνει τη διαφορά  και στη σχεδίαση ( UI ) και στην ευχρηστία ( UX )
2. Εμφανίζονται διαφορετικά σε διαφορετικούς browsers.
3. Προσπαθούμε ο χρήστης να γράφει όσο το δυνατόν λιγότερο.
4. Nα συμπληρώνει φυσικά τα πεδία χωρίς να προβληματίζεται  ώστε όλα να συμπληρώνονται εύκολα και γρήγορα.

• http://mobileinputtypes.com/
• https://better-mobile-inputs.netlify.app/http://mobileinputtypes.com/
• https://css-tricks.com/better-form-inputs-for-better-mobile-user-experiences/
• https://better-mobile-inputs.netlify.app/
  • επίδειξη όλων των types
  • χρήση του inputmode για υπερκάλυψη π.χ. numeric να χρησιμοποιεί tel
    

Αντιπαράδειγμα καλού UX

• https://www.nngroup.com/articles/principles-visual-design/
• 4 Foundational UI Design Principles | C.R.A.P.  https://www.youtube.com/watch?v=uwNClNmekGU

<form>

• https://html5-tutorial.net/forms/introduction/
• https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form

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

Οι φόρμες 99% στέλνουν τα στοιχεία στον web server και απαιτούν δυναμικές ιστοσελίδες. Στο παρακάτω παράδειγμα στέλνει τα δεδομένα της φόρμας στη σελίδα action.php στον server.

<form action="/action_page.php">
...
</form>

Ωστόσο αρκετές φορές χρησιμοποιούνται από μια ιστοσελίδα με javascript για να γίνει πιο προσωποποιημένη η επίσκεψη του χρήστη π.χ. για να αλλάξει την εμφάνιση της σελίδας, για να εμφανίσει μόνο μερικά δεδομένα ή για να εμφανίσει το όνομα του χρήση όταν τελειώσει ένα online παιχνίδι. Σε αυτή την περίπτωση τα δεδομένα δεν αποθηκεύονται στον server παρά μόνο στον browser του χρήστη.

autocomplete=”on” : ο browser συμπληρώνει αυτόματα ότι έχει ξαναβάλει ο χρήστης.

Elements που περιέχονται σε ένα <form>

Οι φόρμες χρησιμοποιούν το element <form> το οποίο είναι container για τα στοιχεία της φόρμας τα οποία περιέχει και μπορεί να είναι τα elements:

• <input> το πιο σημαντικό element μιας φόρμας
• <label> είναι η ετικέτα για τα περισσότερα elements της φόρμας. Την χρησιμοποιούν οι screen readers και εκφωνούν το περιεχόμενό της όταν κάνει κλικ στο συνδεδεμένο element ο χρήστης. Επίσης σε περίπτωση μικρών στοιχείων της φόρμας, όταν κάνουμε κλικ στο label τους τότε επιλέγεται και το element (π.χ. checkbox). Το for (του label) και το id (του συνδεδεμένου element) πρέπει να είναι τα ίδια!

<label for="onoma">Όνομα</label> 
<input type="text" name="" id="onoma">

Ακόμη ένα παράδειγμα με:

<form action="readData.php" method="get">
  <label for="onoma">Όνομα: </label>
  <input type="text" name="" id="onoma" placeholder="Το όνομά σου με κεφαλαία">
</form>

• Το element <form> είναι container, η ίδια η φόρμα δεν εμφανίζεται αλλά τα περιεχόμενά της.
  
  • action: που θα στείλει τα δεδομένα η φόρμα μόλις κάνω αποστολή
  • method=””:  get ή post. Πως θα στείλει τα δεδομένα η φόρμα. Εξορισμού είναι η get και όλα τα δεδομένα εμφανίζονται στη γραμμή διευθύνσεων!!!
  • το type αλλάζει και τη μορφή και τη λειτουργικότητα του input
• input type=”text”, εξ’ορισμού μέγεθος 20 χαρακτήρες.
  • value > αρχική τιμή (εξ’ορισμού)
  • placeholder > προτεινόμενη τιμή.  Χάνει όμως την ένδειξη όταν ξεκινήσει να γράφει. Άρα θέλει κείμενο από έξω. Πρέπει να το βάζουμε, γιατί διευκολύνουμε τον χρήστη.

• <select> Δημιουργεί πτυσσόμενο μενού όπου εμφανίζονται εξαρχής δύο επιλογές (size=”2″) από τις τρεις αλλά μπορούν να επιλεχθούν περισσότερες από μία (multiple):

<label for="glopro">Επιλέξτε γλώσσα προγραμματισμού:</label><br>
<select name="glossa" id="glopro" size="2" multiple>
    <option value="html">html</option>
    <option value="css">css</option>
    <option value="javascript">javascript</option>
</select>

• <textarea>
• <button>  Σημείωση: με type=”submit” στέλνει την φόρμα στον server όπως το <input  type=submit>. Mε type=”button” δεν στέλνει τίποτε στον server και το χρησιμοποιούμε για να ελέγχουμε τα δεδομένα της φόρμας με javascript. Πάντα συμπληρώνουμε το attribute type!
• <fieldset>
• <legend>
• <datalist> . Πάει παρέα με <input> του οποίου το list attribute είναι ίδιο με το id attribute του datalist
• <output>
• <option>
• <optgroup>

Το πιο σημαντικό element είναι το input.

To <input> element

Όπως το δηλώνει και το όνομα, τα input elements είναι ουσιαστικά πεδία της φόρμας στα οποία ο χρήστης εισάγει δεδομένα. Υπάρχουν αρκετά και διαφορετικά <input> τα οποία τα δηλώνουμε με το attribute type. Εάν δεν βάλουμε το attribute name τότε το περιεχόμενο του value δεν στέλνεται.
<input type=”button”>
<input type=”checkbox”>  Σημ.: μπορούν να επιλεγούν από όλα έως κανένα. Για αυτό και δεν χρειάζονται ομαδοποίηση όπως το radiobutton.  Για κάθε ένα φεύγει στο server το ζευγάρι (τιμή του name)=(τιμή του value)
<input type=”color”>
<input type=”date”>
<input type=”datetime-local”>
<input type=”email”>
<input type=”file”>
<input type=”hidden”>
<input type=”image”>
<input type=”month”>
<input type=”number”>   min, max, step. Δοκιμή για να βάλω αριθμό εκτός min…max
<input type=”password”> Σημ.: ο κωδικός δεν φαίνεται αλλά δεν κρυπτογραφείται!
<input type=”radio”>    Σημ: μόνο ένα  radiobutton μπορεί να επιλεγεί. Ομαδοποιούνται όσα έχουν το ίδιο “name”.  Φεύγει στο server το ζευγάρι (τιμή του name)=(τιμή του value)
<input type=”range”>
<input type=”reset”> ΔΕΝ το βάζουμε! Αν πατηθεί αρχικοποιεί τη φόρμα και χάνεται ότι έχει βάλει ο χρήστης!
<input type=”search”>
<input type=”submit”> Σημ.: στο value αποθηκεύουμε το όνομα του button. Σε αντίθεση με το element button στέλνει τα δεδομένα της φόρμας στον server, ο οποίος επιστρέφει κάτι
<input type=”tel”> Βοηθά στο κινητό εμφανίζοντας μόνα αριθμητικό πληκτρολόγιο
<input type=”text”> (default value)
<input type=”time”>
<input type=”url”>
<input type=”week”>

• ΠΡΟΣΟΧΗ: tel και email σημαντικά για κινητά καθώς εμφανίζουν  μόνο τα απαραίτητα πλήκτρα.
• ΑΠΑΡΑΙΤΗΤΑ χρησιμοποιούμε τα σωστά types στα inputs ανάλογα με τη λειτουργία τους

• Autofocus
• button
• disabled