HT14 - F3

FORMULÄR, LÄNKAR, BILDER, WEBSHARE

Dagens föreläsning • Inför laborationen • Repetition • Formulär •
Bilder/Länkar (adressering) • Webshare • Eftermiddagens gästföreläsning

Inför laborationen • Imorgon 13-17 • Vem kommer att vara
där? • Michelle Pantorp (Sal C117, 13-15) • Fredrik Hall (Sal C117, 15-17) • Jenny Hellqvist (Sal C119, 13-15) • Anton Tibblin (Sal C119, 15-17) • Laborationen: http://ia.webbintro.se/exercises/1/

Resultat • En webbläsare visar oss en webbsida efter att
ha renderat ett HTML-dokument

Element? • Det finns olika element som representerar olika innehåll,
t.ex. rubriker, paragrafer, listor m.m. • Grundprincipen är att det finns en start- och ett sluttagg. Det innehåll som finns mellan dessa taggar tilldelas elementets formatiering. • Kan även ha attribut

HTML som märkspråk

Ett HTML-dokuments struktur <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8"> <title>Min
sida</title> </head> <body>  </body> </html> Element som ingår i ett HTML-dokument: - <html>, rotelementet - <head>, dokumenthuvud (info om dokumentet) - <title>, dokukmentets titel - <body>, dokumentets innehåll

HTML-dokumentet i helhet

Vad är ett element • Komponent med vilka ett HTML-dokument
är uppbyggda • Är av en viss typ (elementets namn) • Kan ha egenskaper (attribut) och/eller innehåll • Definieras med taggar

Tabeller - uppbyggnad • En tabell är, precis som i
excel, uppbygg av rader och kolumner • Kan bestå av: - Tabellhuvud/tabellkropp/tabellfot - Rubrik - Rader - Kolumner

Taggar för tabeller • <table> Skapar en tabell • <caption>
Beskrivning/rubrik för tabell • <tr> tabellrad (table row) • <th> Rubrik-kolumn (table header) • <td> Data-kolumn (table data) • Obs, alla taggarna har start- och slutttagg.

FORMULÄR I HTML

Översikt - olika element i ett formulär Knapp Text-fält (stort)
Text-fält Checkboxar Radioknappar Drop-down meny

När används formulär?

Varför används formulär? • Ett sätt att skicka data från
klienten (webbläsaren) till en server - Spara data - Validera data - Analysera data

Att skapa ett formulär i HTML • Taggen <form> omsluter
ett formulär. <form> har olika attribut: • ”action” - Var formuläret ska skickas • ”method” - På vilket sätt den data som användaren angett ska skickas. Antingen GET eller POST

GET/POST • GET innebär att man skickar med den information
som användaren angett genom URL (adressen till sidan) • POST innebär att man skickar informationen ”bakom kulisserna” • Standard är att man skicka mer GET (om inget annat anges)

Att skicka data med formulär • Data struktureras upp med:
- Namn, hur man identifierar det man skickat - Värde, den information man skickar • T.ex. firstName=Anton lastName=Tibblin course=DA156A

Inhämtning av data • Detta kan göras av taggen <input>
som kan representera olika delar av ett formulär • Notera att <input> är en öppen tagg och saknar sluttagg • Attribut: - Name Namnger input-elementet - Value Ev. värde på en knapp/i ett textfält - Type Vilken typ elementet ska vara t.ex. knapp/textfält/radioknapp/checkbox osv.

Exempel av input-taggen <input type=”text” name=”firstName” value=”Förnamn här”> <input type=”password”
name=”password” value=”Lösen”> <input type=”button” value=”Min knapp”> <input type=”submit” value=”Skicka”> <input type=”radio” name=”choice”> <input type=”checkbox” name=”choice2”>

Andra attribut för <input>-taggen • För checkboxar & radioknappar –
om boxen ska vara inkryssad som standard: checked=”checked” <input type="checkbox" checked="checked"> <input type="radio" checked="checked">

Gömda fält • Man kan även skicka vidare information från
förmulär genom gömda fält. • Det innebär att fältet ligger ”osynligt” i bakgrunden. • Även osynlig fält kan ha namn och värde • T.ex. <input type=”hidden” name=”namn” value=”anton”> • Detta kommer alltså inte att synas på HTML-sidan

Textarea – För längre texter • Har till skillnad från
<input> en start- och en sluttag. • Attribut: - name (samma funktion som för <input>) - rows, antalet rader (höjd på text-rutan) - cols, antalet kolumner (bredd på text-rutan) • <textarea cols=”10” rows=”3” name=”textfield”></textarea> • <textarea cols=”10” rows=”3” name=”textfield”>Hej</textarea>

Select – Drop down-meny • Menyn definieras genom taggen <select></select>
• Varje alternativ i drop down-menyn skapas genom taggen <option></option> • För att kunna veta namn och värde på det som skickas gör man: <select name=”namn”> <option value=”anton”>Anton</option> <option value=”kalle”>Kalle</option> <option value=”Johan”>Johan</option> </select>

Etiketter för formulärselement • Beskriver imatningsfälten • Ökar användbarheten <label>Namn</label>
<input type=”text” name=”namn”> Ännu bättre: <label for=”namn”>Namn</label> <input type=”text” name=”namn” id=”namn”>

LÄNKAR & BILDER

Referenser, sökvägar • Relativa sökvägar • Utgår från HTML-filens plats
• Absoluta sökvägar • En absolut webbplats

WEBSHARE Demo

GÄSTFÖRELÄSNING Jonas Söderström Sal: ORE439 (Orkanen)

HT14 - F3

HT14 - F3

Anton Tibblin

More Decks by Anton Tibblin

Other Decks in Education

Featured

Transcript

FORMULÄR, LÄNKAR, BILDER, WEBSHARE

Dagens föreläsning • Inför laborationen • Repetition • Formulär •

Inför laborationen • Imorgon 13-17 • Vem kommer att vara

Resultat • En webbläsare visar oss en webbsida efter att

Element? • Det finns olika element som representerar olika innehåll,

HTML som märkspråk

Ett HTML-dokuments struktur <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8"> <title>Min

HTML-dokumentet i helhet

Vad är ett element • Komponent med vilka ett HTML-dokument

Tabeller - uppbyggnad • En tabell är, precis som i

Taggar för tabeller • <table> Skapar en tabell • <caption>

FORMULÄR I HTML

Översikt - olika element i ett formulär Knapp Text-fält (stort)

När används formulär?

Varför används formulär? • Ett sätt att skicka data från

Att skapa ett formulär i HTML • Taggen <form> omsluter

GET/POST • GET innebär att man skickar med den information

Att skicka data med formulär • Data struktureras upp med:

Inhämtning av data • Detta kan göras av taggen <input>

Exempel av input-taggen <input type=”text” name=”firstName” value=”Förnamn här”> <input type=”password”

Andra attribut för <input>-taggen • För checkboxar & radioknappar –

Gömda fält • Man kan även skicka vidare information från

Textarea – För längre texter • Har till skillnad från

Select – Drop down-meny • Menyn definieras genom taggen <select></select>

Etiketter för formulärselement • Beskriver imatningsfälten • Ökar användbarheten <label>Namn</label>

LÄNKAR & BILDER

Referenser, sökvägar • Relativa sökvägar • Utgår från HTML-filens plats

WEBSHARE Demo

GÄSTFÖRELÄSNING Jonas Söderström Sal: ORE439 (Orkanen)