1 / 13

HTML Lomakkeet

HTML Lomakkeet. Kertaus. Perus HTML-elementit. Elementit <!DOCTYPE … <html> <head> <title> <body> <h1> <p>. Demo.pohja.html. Kertaus. CSS-tyyli. Ulkoinen css-tiedosto h1 { font-family: Verdana, sans-serif; font-size: 18px; color: #990000; }

florence-vance
Télécharger la présentation

HTML Lomakkeet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTMLLomakkeet

  2. Kertaus. Perus HTML-elementit • Elementit <!DOCTYPE … <html> <head> <title> <body> <h1> <p> Demo.pohja.html

  3. Kertaus. CSS-tyyli • Ulkoinen css-tiedosto h1 { font-family: Verdana, sans-serif; font-size: 18px; color: #990000; } • <head>-elementissä linkitys css-tiedostoon <link href="tyyli.css" rel="stylesheet" type="text/css" /> Demo.tyyli.css

  4. Lomakkeet <form name=“lomake" id=“lomake" method=”post" action=”http://palvelin.fi/kasittelysivu.asp"> </form>

  5. Lyhyt tekstikenttä • <input type="text" name="nimi" id=“nimi” size=“10” maxlength=“20” value=“etunimi”/> • type="password" • type="hidden" • Attribuutti readonly=“readonly”

  6. Pitkä tekstialue <textarea name="palaute" id=“palaute” rows=“4” cols=“20”> Tähän oletusteksti </textarea>

  7. Lähetys- ja tyhjennyspainikkeet <input type=“submit” value="Lähetä!“ name=“go” id=“go” onclick=“tarkista();return false” /> <input type=“reset” value="Tyhjennä!“ name=“ups” id=“ups” />

  8. Checkbox <input type="checkbox"name=“valinta1" id=“valinta1” value="yksi“/>Eka <input type="checkbox" name=“valinta2" id=“valinta2” value="kaksi" checked= “checked”/>Toka

  9. Radio <input type="radio"name=“kysely“ id=“1” value="yksi“/>Eka <input type="radio" name=“kysely" id=“2” value="kaksi“ checked=“checked” />Toka <input type="radio" name=“kysely" id=“3” value="kolme“/> Kolkki

  10. Valikot <select name=”Vuodenaika" size=1 multiple=“multiple”> <option value=“kevat”>kevät <option value=“kesa”> kesä <option value=“syys”> syksy <option value=“talvi”> talvi </select>

  11. Tehtävä 1. Peruslomake • Tee lomake, jossa • tekstikenttä • tekstialue (8x3 merkkiä) • readonly tekstikenttä oletustekstillä ”Hei” • Lähetyspainike • Katso selaimella lomake • Lisätehtävä 1. • tee lomake, jolla voi rekisteröityä verkkopalveluun (henkilötiedot, käyttäjätunnus ja salasanat vahvistuksineen) sekä lähetys- ja tyhjennyspainikkeet. Lisäksi piilotetussa kentässä viet palvelimelle tiedon, että rekisteröinti on tapahtunut kampanjatarjouksella nr.38769

  12. Tehtävä 2 • Tee lomake lounasvaraukseen • aikooko osallistua ruokailuun? • valitseeko liha-, kala- vai kasvisvaihtoehdon? • mahdolliset allergiat ruoka-aineille? • lähetä- ja tyhjää-painikkeet

  13. Tehtävä 3. • Tee vuodenajoista luettelo, jossa kaikki vuoden ajat ovat näkyvillä • Lisätehtävä 1. Tee useamman vuodenajan valinta kerrallaan mahdolliseksi • Dreamveawer’ssa on JumpMenu-toiminto (Insert-Form Objects – Jump Menu), joka tekee valintaluettelovalinnasta linkin. Tee valintaluettelo, jossa voi valita Malmin 2.asteen tai amk:n www-sivustot.

More Related