Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Lomakkeet. Kertaus. Perus HTML-elementit –Elementit

Similar presentations


Presentation on theme: "HTML Lomakkeet. Kertaus. Perus HTML-elementit –Elementit

1 HTML Lomakkeet

2 Kertaus. Perus HTML-elementit –Elementit

3 Kertaus. CSS-tyyli –Ulkoinen css-tiedosto h1 { font-family: Verdana, sans-serif; font-size: 18px; color: #990000; } – -elementissä linkitys css-tiedostoon Demo.tyyli.css

4 Lomakkeet

5 Lyhyt tekstikenttä  –type="password" –type="hidden" –Attribuutti readonly=“readonly”

6 Pitkä tekstialue Tähän oletusteksti

7 Lähetys- ja tyhjennyspainikkeet

8 Checkbox Eka Toka

9 Radio Eka Toka Kolkki

10 Valikot kevät kesä syksy talvi

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.

14 … … function tarkista() { var nim=document.PalauteForm.nimi.value; var vies=document.PalauteForm.viesti.value; if((nim.length !=0)&&(vies.length !=0)) {document.PalauteForm.submit(); }else {alert("Unohdit nimesi tai tyhjensit viestin"); } … … … … Lomakkeen tekstikentän tarkistus


Download ppt "HTML Lomakkeet. Kertaus. Perus HTML-elementit –Elementit

Similar presentations


Ads by Google