HTML Lomakkeet Kertaus Perus HTMLelementit Elementit DOCTYPE html

Kertaus. Perus HTML-elementit – Elementit <!DOCTYPE … <html> <head> <title> <body> <h 1> <p>

Kertaus. CSS-tyyli – Ulkoinen css-tiedosto h 1 { font-family: Verdana, sans-serif; font-size: 18 px;

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

Lyhyt tekstikenttä ¬ <input type="text" name="nimi" id=“nimi” size=“ 10” maxlength=“ 20” value=“etunimi”/> –type="password" –type="hidden"

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

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

Checkbox <input type="checkbox" name=“valinta 1" id=“valinta 1” value="yksi“/>Eka <input type="checkbox" name=“valinta 2" id=“valinta 2”

Radio <input type="radio" name=“kysely“ id=“ 1” value="yksi“/>Eka <input type="radio" name=“kysely" id=“ 2” value="kaksi“ checked=“checked”

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

Tehtävä 1. Peruslomake ¬ Tee lomake, jossa – tekstikenttä – tekstialue (8 x 3

Tehtävä 2 ¬Tee lomake lounasvaraukseen – aikooko osallistua ruokailuun? – valitseeko liha-, kala- vai

Tehtävä 3. ¬Tee vuodenajoista luettelo, jossa kaikki vuoden ajat ovat näkyvillä ¬ Lisätehtävä 1.

Slides: 13

Download presentation

HTML Lomakkeet

Kertaus. Perus HTML-elementit – Elementit <!DOCTYPE … <html> <head> <title> <body> <h 1> <p> Demo. pohja. html

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

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

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

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

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” />

Checkbox <input type="checkbox" name=“valinta 1" id=“valinta 1” value="yksi“/>Eka <input type="checkbox" name=“valinta 2" id=“valinta 2” value="kaksi" checked= “checked”/>Toka

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

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>

Tehtävä 1. Peruslomake ¬ Tee lomake, jossa – tekstikenttä – tekstialue (8 x 3 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

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

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 Jump. Menu-toiminto (Insert-Form Objects – Jump Menu), joka tekee valintaluettelovalinnasta linkin. Tee valintaluettelo, jossa voi valita Malmin 2. asteen tai amk: n www-sivustot.