{"id":913,"date":"2021-03-10T20:48:55","date_gmt":"2021-03-10T20:48:55","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=913"},"modified":"2021-03-13T19:27:05","modified_gmt":"2021-03-13T19:27:05","slug":"html-vormid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-vormid\/","title":{"rendered":"HTML vormid"},"content":{"raw":"HTML vorme kasutatakse kasutajalt sisendi k\u00fcsimiseks (n\u00e4iteks v\u00f5imaldab see kasutada otsingukasti, logida v\u00f5i registreerida end veebilehel, anda tagasisidet). Enamasti saadetakse kasutajalt saadud sisend serverisse t\u00f6\u00f6tlemiseks.\r\n

Kuidas vormid t\u00f6\u00f6tavad<\/h1>\r\nVormid koosnevad kahest osast.\r\n
    \r\n \t
  1. Esimene osa on see mida kasutaja n\u00e4eb veebilehel \u2013 HTML tekstiv\u00e4ljad, nupud, valikukastid jne<\/li>\r\n \t
  2. Teise osa moodustab andmeid t\u00f6\u00f6tlev veebiserver, mis reeglina saadab vastuse tagasi kasutajale.<\/li>\r\n<\/ol>\r\nV\u00f5tame n\u00e4iteks lihtsa registreerimisvormi:\r\n
      \r\n \t
    1. kasutaja t\u00e4idab n\u00f5utud HTML vormi v\u00e4ljad<\/li>\r\n \t
    2. vajutades nupule \u2018Registreeru\u2019 saadetakse nimi, parool ja email veebiserverile<\/li>\r\n \t
    3. veebiserverisse paigaldatud kood lisab uue kasutaja andmebaasi ja saadab kasutajale teksti \u00f5nnestumise kohta.<\/li>\r\n<\/ol>\r\n

      Vormi loomine<\/h1>\r\nVormi loomisel kasutame elementi <form><\/code>, mille algus- ja l\u00f5pum\u00e4rgendi vahele lisatakse erinevaid vormi elemente nagu tekstiv\u00e4ljad, m\u00e4rkeruudud, valikukastid jm.\r\n
      <form>\r\nvormi elemedndid\r\n<\/form><\/pre>\r\n
      Sisestusv\u00e4ljad<\/h1>\r\nVormi element\u00a0<input><\/code> on \u00fcks olulisemaid vormi elemente, mille v\u00e4limus s\u00f5ltub talle lisatud\u00a0<\/span>type<\/code> atribuudi v\u00e4\u00e4rtusest.<\/span>\r\n\r\nM\u00f5ned n\u00e4ited:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
      T\u00fc\u00fcp<\/strong><\/td>\r\nKirjeldus<\/strong><\/td>\r\n<\/tr>\r\n
      <input type=\"text\"><\/td>\r\n\u00dcherealine v\u00e4li teksti sisestamiseks<\/td>\r\n<\/tr>\r\n
      <input type=\"password\"><\/td>\r\nSalas\u00f5na v\u00e4li, teksti asemel kuvatakse t\u00e4rne<\/td>\r\n<\/tr>\r\n
      <input type=\"radio\"><\/td>\r\nRaadionupud \u00fche valiku tegemiseks mitmest<\/td>\r\n<\/tr>\r\n
      <input type=\"checkbox\"><\/td>\r\nValikukastid \u00fche v\u00f5i mitme valiku tegemiseks<\/td>\r\n<\/tr>\r\n
      <input type=\"date\"><\/td>\r\nKuup\u00e4eva valimine<\/td>\r\n<\/tr>\r\n
      <input type=\"email\"><\/td>\r\nE-maili aadressi sisestamiseks. Olenevat brauserist valideeritakse sisestatud aadress automaatselt.<\/td>\r\n<\/tr>\r\n
      <input type=\"file\"><\/td>\r\nFaili \u00fclesse laadimise v\u00f5imalus<\/td>\r\n<\/tr>\r\n
      <input type=\"range\"><\/td>\r\nNumbrivahemiku vahel valimise v\u00f5imalus<\/td>\r\n<\/tr>\r\n
      <input type=\"submit\"><\/td>\r\nNupp vormi esitamiseks<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
      Tekstiv\u00e4ljad (text fields<\/em>)<\/h2>\r\nVormile tekstiv\u00e4lja lisamiseks lisame elemendile <input><\/code> atribuudi type<\/code> v\u00e4\u00e4rtusega text<\/em>.\r\n
      <form>\r\n  <input type=\"text\">\r\n<\/form><\/pre>\r\nNii n\u00e4eks see v\u00e4lja brauseris:\r\n\r\n
      <\/form>Kuna sisestusv\u00e4lju v\u00f5ib veebilehel olla mitu ning kui me soovime sisestusv\u00e4ljale sisestatud andmed saata serverisse, peame sisestusv\u00e4ljale lisama ka name<\/code> atribuudi.\r\n
      <form> \r\n  <input type=\"text\" name=\"eesnimi\">\r\n  <input type=\"text\" name=\"perekonnanimi\">\r\n<\/form><\/pre>\r\nKui me soovime hiljem oma tekstiv\u00e4lju muuta v\u00f5i neist informatsiooni k\u00e4tte saada JavaScripti kasutades, peame neile lisama ka id<\/code> atribuudi.\r\n
      <form> \r\n  <input type=\"text\" id=\"eesnimi\" name=\"eesnimi\"> \r\n  <input type=\"text\" id=\"perekonnanimi\" name=\"perekonnanimi\"> \r\n<\/form><\/pre>\r\nSoovi korral saame tekstiv\u00e4ljale lisada ka iseloomustava sildi kasutades elementi <label><\/code>. Elemendi <label><\/code> atribuut for<\/code> v\u00e4\u00e4rtus peab olema v\u00f5rdne <input><\/code> elemendi id<\/code> v\u00e4\u00e4rtusega, millele soovime nimetuse lisada.\r\n
      <form> \r\n  <label for=\"eesnimi\">Eesnimi:<\/label>\r\n  <input type=\"text\" id=\"eesnimi\" name=\"eesnimi\"> \r\n<\/form><\/pre>\r\n