Return to HTML 5

HTML: 5o μάθημα

Επανάληψη

  • Πίνακες
  • Λίστες
    • επιπλέον:
      • ol>li*3
      • reversed
  • Δημιουργία favicon
  • Χρώματα
    • Να δημιουργηθεί φάκελος Lesson5 και αρχείο colors.html. Να δημιουργηθούν 5 h1 με διαφορετικό background-color και διαφάνεια.

Ύλη


Block και inline Elements


Φόρμες/ Εισαγωγή δεδομένων

Εμφανίζονται διαφορετικά σε διαφορετικούς browsers.

Προσπαθούμε ο χρήστης να γράφει όσο το δυνατόν λιγότερο.

Να σκέφτεται λιγότερο (να συμπληρώνει φυσικά τα πεδία χωρίς να προβληματίζεται) ώστε όλα να συμπληρώνονται εύκολα και γρήγορα.

και επιπλέον :

  • form. Είναι container, η ίδια η φόρμα δεν εμφανίζεται.
<form action="readFormData.php">
<label for="fname">Όνομα</label>
<input type="text" name="" id="fname" placeholder="Το όνομά σου">
</form>
    • action: που θα στείλει τα δεδομένα η φόρμα μόλις κάνω αποστολή
    • method=””:  get ή post. Πως θα στείλει τα δεδομένα η φόρμα. Εξορισμού είναι η get και όλα τα δεδομένα εμφανίζονται στη γραμμή διευθύνσεων!!!
    • το type αλλάζει και τη μορφή και τη λειτουργικότητα του input
  • input type=”text”, εξ’ορισμού μέγεθος 20 χαρακτήρες.
    • value > αρχική τιμή (εξ’ορισμού)
    • placeholder > προτεινόμενη τιμή.  Χάνει όμως την ένδειξη όταν ξεκινήσει να γράφει. Άρα θέλει κείμενο από έξω. Πρέπει να το βάζουμε, γιατί διευκολύνουμε τον χρήστη.
  • input type=”number” min max step. Δοκιμή για να βάλω αριθμό εκτός min…max
  • input type=”tel”   . Βοηθά στο κινητό εμφανίζοντας μόνα αριθμητικό πληκτρολόγιο
  • input type=”email”
  • checkbox
<input type="radio" name="glossa" id="" value="1"> html <br>
<input type="radio" name="glossa" id="" value="2"> css <br>
<input type="radio" name="glossa" id="" value="3"> javascript <br>
  • ομοίως: date, week, month, time, color, radio, file, range, reset, password, textarea
  • ΠΡΟΣΟΧΗ: tel και email σημαντικά για κινητά καθώς δεν ανοίγουν τα αλφαβητικά πλήκτρα.
  • password δεν το κρυπτογραφεί ο browser
  • Autofocus
  • button
  • disabled
  • select για την δημιουργία dropdown μενού και option
<select name="" id="" multiple>;
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3" selected>any other </option>
</select>
  • submit:  το κουμπί με το οποίο στέλνουμε τα δεδομένα της φόρμας
    • disabled
<input type="submit" value="Αποστολή">

ΑΠΑΡΑΙΤΗΤΑ χρησιμοποιούμε τα σωστά types στα inputs ανάλογα με τη λειτουργία τους


Media

https://www.w3schools.com/html/mov_bbb.mp4

Παράδειγμα:

<video width="640" height="480" controls autoplay loop muted>
  <source src="https://www.w3schools.com/html/mov_bbb.ogg">
  <source src="https://www.w3schools.com/html/mov_bbb1.mp4">
  O browser δεν υποστηρίζει βίντεο!
</video>

Permanent link to this article: http://users.sch.gr/nikmavr/%cf%80%cf%81%ce%bf%ce%b3%cf%81%ce%b1%ce%bc%ce%bc%ce%b1%cf%84%ce%b9%cf%83%ce%bc%cf%8c%cf%82/html/html-5o-%ce%bc%ce%ac%ce%b8%ce%b7%ce%bc%ce%b1/