Html lomakkeet
This presentation is the property of its rightful owner.
Sponsored Links
1 / 13

HTML Lomakkeet PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on
  • Presentation posted in: General

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; }

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html lomakkeet

HTMLLomakkeet


Kertaus perus html elementit

Kertaus. Perus HTML-elementit

  • Elementit

    <!DOCTYPE …

    <html>

    <head>

    <title>

    <body>

    <h1>

    <p>

Demo.pohja.html


Kertaus css tyyli

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


Lomakkeet

Lomakkeet

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

</form>


Lyhyt t ekstikent t

Lyhyt tekstikenttä

  • <input type="text" name="nimi" id=“nimi” size=“10” maxlength=“20” value=“etunimi”/>

    • type="password"

    • type="hidden"

    • Attribuutti readonly=“readonly”


Pitk tekstialue

Pitkä tekstialue

<textarea name="palaute" id=“palaute” rows=“4” cols=“20”>

Tähän oletusteksti

</textarea>


L hetys ja tyhjennyspainikkeet

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

Checkbox

<input type="checkbox"name=“valinta1" id=“valinta1” value="yksi“/>Eka

<input type="checkbox" name=“valinta2" id=“valinta2” value="kaksi" checked= “checked”/>Toka


Radio

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

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

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


Teht v 2

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

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.


  • Login