Υποενότητα 9.1: Το HTML των φορμών

Οι Labels είναι σημαντικές για προσβάσιμες και εύχρηστες φόρμες.

Όταν προσθέτετε μια ετικέτα- label δεν βλέπετε καμία αλλαγή στη σελίδα HTML. Δεν είναι εύκολο να κατανοήσουμε τη λειτουργία της παρατηρώντας την έξοδο HTML.

Η σημασία της ετικέτας label έγκειται στο γεγονός ότι μας επιτρέπει να χρησιμοποιούμε σήμανση- markup για τη δημιουργία πιο προσβάσιμων / φιλικών προς το χρήστη πεδίων φόρμας.

Στην πράξη, αυτό σημαίνει ότι συνδυάζουμε κείμενο με πεδία εισαγωγής και, συνεπώς, αν ο χρήστης κάνει κλικ στον τίτλο ενός πεδίου εισαγωγής, η σελίδα θα μεταβεί αυτόματα σε αυτό το πεδίο.

Labels - Γιατί;

• Συνδέει το κείμενο με στοιχεία εισόδου input
• Βοηθάει τους αναγνώστες οθόνης- screen readers!
• Βοηθά με τα "clicks" και "touch" στις οθόνες!

Labels - Πώς;

• id value attribute στην input
• Στοιχείο label για την input label
• for attribute στην label για να συνδεθεί η label με την input μέσω του id

<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" placeholder="Your name goes here" minlength="10" required/>

First name: