F06 A table form Dagens agenda

Transkript

1 F06 A table form Dagens agenda Länkar Tabeller Formulär

2 Hyperlänkar index.html feed/news.html <a href="url">klickbar text</a> hippo.png about.html Relativ länk till webbsida via klickbar länk: <a href="feed/news.html">klickbar text</a> Absolut länk till webbsida via klickbar länk: <a href=" Länk till webbsida via klickbar bild: <a href="about.html"><img src="hippo.png" alt="en flodhäst"></a>

3 Bokmärken Ett bokmärke är en länk som tar dig till en specifik del av en sida. <a href="#about">gå till Om mig </a> <h2 id="about">om mig</h2> <p>jag föddes </p> Bokmärke på annan sida: <a href="page32.html#about">gå till Om mig på sidan 32</a>

4 Maillänk <a

5 Target Target-attributet användes förr främst tillsammans med frames. Följande värden är valida i HTML4 och HTML5: Target-värde _self _blank _parent _top Default, öppnas över aktuellt innehåll. Default Öppnar ett nytt fönster eller tab Liknar _self (främst intressant med frames) Liknar _self (främst intressant med frames) <a href="new.html" target="_blank">nytt fönster</a>

6 Tabeller Tabeller är till för att visa tabelldata: Pos Namn S V F MS Poäng 1. Liverpool Arsenal Tottenham Man Utd Tabeller är INTE till för att skapa layouter:

7 Tabeller rader <tr> Tabell <table> Pos Namn S V F MS Poäng 1. Liverpool Arsenal Tottenham cell <td> 20. Man Utd kolumner En tabell innehåller flera rader. Varje rad innehåller kolumner. I korsningen mellan en rad och en kolumn bildas en cell.

8 Tabeller <table> <tr> <th>namn</th> <th>adress</th> <th>telefon</th> </tr> <tr> <td>ellen Nu</td> <td>linnégatan 8</td> <td> </td> </tr> <tr> <td>kalle Karlsson</td> <td>kallegränd 6</td> <td> </td> </tr> <tr> <td>janne Jansson</td> <td>jannegatan 1</td> <td> </td> </tr> </table> Namn Adress Telefon Ellen Nu Linnégatan Kalle Karlsson Kallegränd Janne Jansson Jannegatan

9 body table foot head Tabeller <table> <thead> <tr> <th>namn</th> <th>adress</th> <th>telefon</th> </tr> </thead> <tfoot> <tr> <td colspan="3"> Senast uppdaterad </td> </tr> </tfoot> <tbody> <tr> <td>ellen Nu</td> <td>linnégatan 8</td> <td> </td> </tr> </tbody> </table> Namn Adress Telefon Ellen Nu Linnégatan Senast uppdaterad colspan: Låt en cell spänna över x antal kolumner. rowspan: Låt en cell spänna över x antal rader. Datum Åtgärd Tid Fixat bugg 1 1h Inloggning 5h Auktorisering 4h colspan, rowspan anges alltid på td

10 Tabellers attribut <table border="1"> </table> Attribut som valign, align, border, cellspacing, cellpaddning, width etc. är borttagna i och med HTML5. Med attribut som abbr, headers, summary etc. kan vi göra våra tabeller mer tillgängliga. Vi sparar dock detta till senare.

11 Formulär Formulär använder vi för att få in data från användaren av webbsajten/webbapplikationen.

12 <form> Formulär innesluts i formulärdeklarationen: <form action=""> <! Formulärkontroller här --> </form> Några attribut action method enctype Till vilken sida ska formulärdatat skickas? GET eller POST. Se kommande slides. Den typ av data som skickas vid metod POST: Standardvärde: application/x-www-form-urlencoded

13 action Tomt: skicka till aktuell sida <form action=""> <! Formulärkontroller här --> </form> Relativ adress <form action="myscript.php"> <! Formulärkontroller här --> </form> Användaren får upp ett förifyllt mail med datan <form <! Formulärkontroller här --> </form> Absolut adress <form action=" <! Formulärkontroller här --> </form>

14 method= GET <form method="get"> <! Formulärkontroller här --> </form> Förvalt, skickar datan i URLn Max 100 tecken. (enligt standarden) Möjlighet att bokmärka i webbläsaren? Används för att tala om var data delen av URLn börjar = Separerar formulärkontrollens namn från dess värde & Används för att särskilja olika namn/värdepar

15 method= POST <form method="post"> <! Formulärkontroller här --> </form> Skickar datan i requestens kropp Kan skicka stora mängder data Går ej att bokmärka Den skickade informationen döljs för blotta ögat Bara något säkrare än GET

16 <input /> <form method="get"> <input type="text" name="userid" /> <input type="password" name="password" /> </form> Några attribut value size maxlength Förifyllt värde Antal tecken bred som kontrollen ska vara Antal tecken som kontrollen max ska rymma

17 Olika input-typer <input type="text" /> <input type="password" /> <input type="hidden" value="123-65" /> <input type="color" /> <input type="datetime" /> <input type=" " /> <input type="number" /> <input type="range" /> <input type="search" /> <input type="tel" /> <input type="time" /> <input type="url" /> <input type="week" />

18 Radioknappar/kryssrutor <input type="radio" name="group1" value="u" /> Underkänd <input type="radio" name="group1" value="3" checked /> Godkänd <input type="radio" name="group1" value="4" /> Väl godkänd <input type="radio" name="group1" value="5" /> Mycket väl godkänd checked talar om att knappen ska vara förvald <input type="checkbox" name="g1[]" value="tentamen" /> Tentamen <input type="checkbox" name="g1[]" value="projekt" /> Projekt <input type="checkbox" name="g1[]" value="laboration" /> Laboration <input type="checkbox" name="g1[]" value="föreläsning" /> Föreläsning

19 Textrutor <textarea rows="5" cols="30"></textarea> Obs! inga blanksteg eller radbrytningar! <textarea rows="5" cols="30">här kan vi ange en text som kommer att vara förifylld i textrutan </textarea> <textarea readonly rows="5" cols="30">det är extremt viktigt att du godkänner dessa väldigt viktiga villkor. </textarea>

20 Menyer <select name="dryck"> <option value="kaffe" selected>kaffe</option> <option value="saft">saft</option> <option value="vatten">vatten</option> </select> Det finns även möjlighet att göra menyer där man kan göra flera val, men då är det bättre att använda kryssrutor.

21 Skicka våra formulär <input type="submit" value="skicka!" /> <button type="submit">skicka</button> <input type="image" src="skicka.png" alt="skicka" /> Genom att använda ovanstående metoder för att skicka så fungerar det även att trycka på enter för att skicka formuläret.

22 Skicka filer <form action="handlefile.php" action="post" enctype="multipart/formdata"> </form> <input type="file" /> <input type="submit" value="ladda upp fil" />

23 Fieldset <form action="registrer.php" action="post"> <fieldset> <legend>personlig information</legend> <input type="text" name="firstname" /> </fieldset> </form>

24 Labels <form action="registrer.php" action="post"> <fieldset> <legend>personlig information</legend> <label for="firstname">förnamn:</label> <input type="text" id="firstname" name="firstname" /> </fieldset> </form> Klickar man med musen på "Förnamn" får inputfältet automatiskt fokus.

25 Nya attribut i HTML5 Några attribut autofocus pattern placeholder required Ger ett element fokus vid sidladdning Validera enligt ett reguljärt uttryck Text som syns i fältet innan inmatning Fältet måste fyllas i

26 Några ord om frames