Formulär
Ett formulärexempel
Vi bekantar oss med grunderna.
Ett exempel på formulär:
<form method="post" action="" >
<input type="text" size="20" name="Namn" id="Namn" placeholder="Skriv in ditt namn" autofocus required>(*)<br>
<input type="password" size="20" name="Lösenord" id="Lösenord" placeholder="Ange lösenord"><br><br>
<label for="epost">Epost</label><br>
<input type="email" size="20" name="epost"><br><br><br>
<label>Vilket är godast?</label><br>
<input type="radio" name="Mat" value="Korv">Korv och pommes frittes<br>
<input type="radio" name="Mat" value="Hamburgare"> 200 g hamburgare med allt<br>
<input type="radio" name="Mat" value="Godis" checked> 2 påsar Gott & blandat<br>
<label>Vad vill du mer lära dig?</label><br>
<input type="checkbox" name="Canvas" value="Ja">Canvas<br>
<input type="checkbox" name="SVG" value="Ja">SVG<br>
<input type="checkbox" name="jQuery" value="Ja">jQuery<br><br>
<label>Synpunkter</label><br>
<textarea name="Synpunkter" rows="4" cols="20"></textarea><br> <br>
<label>Vad gillar du webbutveckling?</label><br>
<select name="Asikt" size="1" required>
<option value="nope">Välj</option>
<option value="1">Kanon</option>
<option value="2">Bra</option>
<option value="3">OK</option>
<option value="4">Trist</option>
</select>(*)<br><br>
<label>Vad gillar du denna sida?</label><br> <span class="red">(Ange 1-10, 10=Kanon, 1=Värdelös)</span><br>
<input type="text" size="2" name="grade" required>(*)<br><br>
<button type="reset">Rensa</button>
<button type="submit">Skicka</button> <br><br>
<label>(*) = Obligatorisk information</label>
</form>
@charset "utf-8";
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}
label {
font-weight:bold;
}
button {
font-size:14px;
font-weight:bold;
}
.red {
color:#f00;
}
Egenskapen "method" i form-taggen kan även sättas till "GET". Det innebär att informationen hakas på i slutet på den webbadress som man vill skicka allt till. Detta ser vi ofta på webbadresser på internet. Det kan se ut så här : www.vgy.se?elev=kalleanka&klass=10te . Nu när vi har "POST" skickas informationen i formuläret med anropet men placeras i htmlanropspaketets huvud.
Fieldset och legend
För att snygga till formuläret så finns taggarna fieldset och legend att använda.
<fieldset>
<legend>Ett litet exempel (som fungerar olika i olika webbläsare)</legend>
<label>Förnamn: </label><input type="text" name="fnamn"><br>
<label>Efternamn: </label><input type="text" name="enamn"><br>
<label>Mejladress: </label><input type="email" name="mejl" autocomplete="off"><br>
<input type="submit" value="Skicka">
</fieldset>
</form>
Autocomplete fungerar inte i alla webbläsare(fast den sägs ska göra det) och gör att den kommer ihåg tidigare inmatningar. I detta exempel så är den avstängd för mejladressen.
Den nya typen email har inbyggd valideringkontroll men fungerar inte helt perfekt i alla webbläsare.
Formulär element och attribut
För att se mer hur de ser ut se följande sida w3schools- formelement taggar . Här kan du se hur de fungerar och även testa.
Skicka innehållet som mejl
Det finns en tjänst på "bestonline" som kan ta emot innehållet från ett formulär, plocka ut informationen och skicka den som mejl till en i formuläret specificerad mejladress (enbart vgy-mejladresser). Efter det skickas man vidare till en i formuläret specificerad webbsida.
Utseendemässigt syns ingenting. Vi har här lagt till en webbadress till egenskapen action i form-taggen. Vi har också lagt till två komponenter. Två input-taggar med egenskapen "hidden", vilket betyder att de finns med i formuläret men de syns inte på själva webbsidan. Observera att de måste heta exakt så som det står här, dvs "s_email" och "s_retur". Detta för att skriptet på webbservern vet var den ska hämta dessa värden.
Du fyller i dina egna värden istället för de röda områdena. xxx@yyy.se byts ut mot den mejladress som innehållet i formuläret ska skickas till. http://www.zzzzzzzz.se är adressen till din egen "tack"-sida eller liknande sida.
Du lägger också dit en liten textruta av typen password. I den ska du skriva in ett lösenord innan du skickar iväg formuläret. (OBS! Det ska inte ligga som "default"-värde utan ska skrivas in varje gång.)
Lösenordet som du måste fylla i innan du ska skicka formuläret får du av din lärare.
...
...
<!-- Sist i formuläret -->
<input type="hidden" name="s_email" value="xxx@yyy.se">
<input type="hidden" name="s_retur" value="http://www.zzzzzzzz.se">
<input type="password" name="pw" size="10" value="">
</form>
Mer om nya taggar och "input"-typer i HTML5
Det finns många nyheter angående formulär i HTML5. Vi har några nya taggar men framför allt nya input varianter. Allt nytt är ännu inte 100% inbyggt i dagens aktuella webbläsare men eftersom det nya ska vara kompatibelt bakåt så ska det se bra ut i alla fall och för det mesta fungera också. Det nya är framför allt att det finns mycket intelligens inbyggt i de nya varianterna (typer). Sådant som vi tidigare behövde skriva javascriptkod för att kontrollera. Till exempel så behöver vi inte längre skriva javascriptkod för att testa om en mejladress är korrekt skriven utan kan istället använda den nya typen "email" som har det inbyggt.
Vi bekantar oss med de nya input varianterna.
color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
Nu fungerar inte alla i dagens webbläsare. För en bra överblick så rekommenderas följande sida w3schools- input typer . Här kan du se var de fungerar och även testa.
Nya egenskaper i HTML5
I HTML5 har det byggt in nya egenskaper för <form> och <input> taggarna. Alla browsers klarar inte av alla varianter så kontrollera alltid i flera webbläsare att det fungerar som du vill.
Nya egenskaper för form-taggen:
autocomplete, novalidate
Nya egenskaper för input-taggen:
autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, height, width, list, min, max, multiple, pattern (reguljärt uttryck), placeholder, required, step
Obs! Alla egenskaper går inte att para ihop med alla input-typer utan titta först vilka som fungerar på resktive typ.
För att se mer hur de ser ut se följande sida w3schools-attribut . Här kan du se var de fungerar och även testa.
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
http://html5.silberman.nu/forms.html (sep 2014)