No er det en stund siden eg skrev et innlegg som ikke var inspirert av egne tanker og ønsker. Det nærmer seg skoleavslutning dette semesteret, og man er halvveis gjennom bachelor studiet. Mye nytt er lært, mye skal man ta med seg videre og kanskje man en dag får bruk for alt man har lært.
Det er veldig lett å forlove seg, eller bortlove seg når det gjelder løfter om hva man skal skrive om. En tanke eg har med denne bloggen er blant annet å skrive litt om javascript/jQuery og siden php. Eg har tidligere på denne bloggen vært innom html og css, så kanskje tiden er inne for å avansere litt, etterhvert.
Denne gangen tenker eg at vi begynner med en kjapp repetisjon på hva som trengs for å lage en webside med html.
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
Dette kjenner du sikkert igjen om du har lest tidligere innlegg. Resultatet av 7 linjer med kode er en perfekt helt hvit og fin webside.
Eventyret startet her: http://bit.ly/IpBg07
Det eg ønsker at vi lager på siden vår denne gangen er en form, eller et skjema om du vil.
En form er noe du typisk skal ha mellom taggene <body> og </body>.
Hva bruker man en form til? Du har helt sikkert vært borti de enten i form av at du skal logge på en side, bestille klær, kontaktskjema, registrere deg osv.
Det skjemaet vi skal lage denne gangen vil ikke ha noen reell funksjon eller lagringsmulighet, men det vil være rom for å leke litt med design. Funksjonalitet tar vi senere.
Også denne gangen henviser eg til w3schools for kunnskap
Når man skal lage en form bruker man taggene <form> og </form>
La oss lage en liten Login form (det finnes mange måter å lage en form på, dette er bare en måte):
Brukernavn: <input type="text" name="user" id="user">
Passord: <input type="password" name="pass" id="pass">
<input type="submit" value="Logg Inn">
Dette vil gi oss følgende html side:
<!doctype html>
<html>
<head>
<title>Enkel Login Form</title>
</head>
<body>
<form>
Brukernavn: <input type="text" name="user" id="user">
Passord: <input type="password" name="pass" id="pass">
<input type="submit" value="Logg Inn">
</form>
</body>
</html>
..og se slik ut på siden
Prøv å skriv i feltene og se ka som skjer.
Feltet med input type password vil gi deg prikker i stedet for synlig tekst.
Submit knappen vil ikke submitte noe som helst siden det ikke er knyttet kode til den.
For at du skal lære litt mer om forms kan følgende input typer være interessante
- Radio buttons
- Checkboxer
- Drop down lister
- Text area
Dette er ganske vanlige elementer å finne på en form.
Ta vare på det vi har begynt på, så blir det ikke så veldig lenge til vi skal jobbe litt videre med den.
Vi kan endre på den med CSS, vi kan få lagt inn valideringer fra Javascript og for de som har enten installert xampp eller har egen webserver så kan vi få laget en database og logget inn.
Så her har vi mye vi kan ta tak i
Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!
Ingen kommentarer:
Legg inn en kommentar