html lomakkeet
Download
Skip this Video
Download Presentation
HTML Lomakkeet

Loading in 2 Seconds...

play fullscreen
1 / 13

HTML Lomakkeet - PowerPoint PPT Presentation


  • 95 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' HTML Lomakkeet' - florence-vance


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
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.
ad