HTML-guide til udvikling af integrationsløsninger til Borger.dk

Formularer

Formularelementer giver brugeren mulighed for at interagere med løsningen og er derfor et vigtigt element i de fleste selvbetjeningsløsninger.

Formularelementer af typen input, select, textarea skal have et associeret label.

Inputfelter

I inputfelter kan man skrive tekster og tal, der kun fylder en linje. Det mest benyttede inputfelt er typisk af typen text, men det er også muligt at benytte password, number, url, date og tel - som alle har egne karakteristika. Eksempelvis tilbyder visse browsere en datovælger ved typen date og ved number vises det numeriske tastatur på visse smartphones.

<input type="text" placeholder="Tekst">
<input type="password" placeholder="Kodeord">
<input type="number" placeholder="Tal">
<input type="url" placeholder="Url">
<input type="date" placeholder="Dato">
<input type="time" placeholder="Tidspunkt">
<input type="tel" placeholder="Telefon">
<input type="search" placeholder="Søgning">

Textarea

Med attributten rows kan man angive hvor mange linjer tekstområdet skal have.

<label for="beskrivelse">Beskrivelse</label>
<textarea id="beskrivelse" rows="6"></textarea>

Beskrivelse

Radio- og checkbokse

Checkbokse benyttes, når brugeren skal kunne vælge en eller flere værdier mellem et antal muligheder muligheder, mens radiobokse bruges, når brugeren skal vælge en værdi mellem et antal muligheder.

<label class="checkbox">
	<input type="checkbox" value=""> Afkryds her
</label>
<label class="checkbox">
	<input type="checkbox" value=""> Og her samtidigt
</label>
<label class="radio">
	<input type="radio" name="option" id="option1" value="o1" checked>
	Hvis du vælger denne, så kan du ikke samtidigt vælge den anden
</label>
<label class="radio">
	<input type="radio" name="option" id="option2" value="o2">
	Hvis du vælger denne, så kan du ikke samtidigt vælge den anden
</label>

Afkryds her Og her samtidigt Hvis du vælger denne, så kan du ikke samtidigt vælge den anden Hvis du vælger denne, så kan du ikke samtidigt vælge den anden

Det er også muligt at have flere radio- og checkbokse på samme linje. For øget kontrol benyttes klassen inline.

<p>Årstallet for slaget ved Hastings?</p>
<label class="radio inline">
 <input type="radio" name="opt" id="opt1" value="o1"> 966 
</label>
<label class="radio inline">
 <input type="radio" name="opt" id="opt2" value="o2"> 1066
</label>
<label class="radio inline">
 <input type="radio" name="opt" id="opt3" value="o3"> 1166
</label>

Årstallet for slaget ved Hastings?

966 1066 1166

Selectbokse

Selectbokse giver brugeren muligheden for at vælge en værdi fra en liste. Hvis attributtenmultiple="multiple"benyttes, er det muligt at vise flere valgmuligheder.

<label for="city">Vælg by</label>
<select id="city">
	<option>Herning</option>
	<option>Esbjerg</option>
	<option>Give</option>
	<option>Ikast</option>
	<option>Brande</option>
</select>
<label for="cities">Vælg flere byer</label> 
<select id="cities" multiple="multiple">
	<option>Herning</option>
	<option>Esbjerg</option>
	<option>Give</option>
	<option>Ikast</option>
	<option>Brande</option>
</select>

Vælg by: Vælg flere byer:

Inaktive felter

Inaktive formularfelter er felter, der ikke skal kunne udfyldes af brugeren. Et formularelement af gøres inaktivt med attributten disabled="disabled"

<label for="fornavn">Fornavn </label>
<input type="text" id="fornavn" disabled="disabled" /> 
<label for="city1">Vælg by</label>
<select id="city1" disabled="disabled">
	<option>Vælg by</option>							
	<option>Herning</option>
	<option>Esbjerg</option>
	<option>Give</option>
	<option>Ikast</option>
	<option>Brande</option>
</select>
<label class="checkbox">
		<input type="checkbox" value="" disabled="disabled"> Afkryds her for at vinde den store gevinst
</label>

Fornavn Vælg by: Afkryds her for at vinde den store gevinst

Størrelse på formularelementer

Et formularelements størrelse angives lettest ved at tilføje en størrelsesklasse.

	<label class="form-inline">input-mini <input class="input-mini" type="text" placeholder=".input-mini"></label>
	<label class="form-inline">input-small <input class="input-small" type="text" placeholder=".input-small"></label>
	<label class="form-inline">input-medium <input class="input-medium" type="text" placeholder=".input-medium"></label>
	<label class="form-inline">input-large <input class="input-large" type="text" placeholder=".input-large"></label>
	<label class="form-inline">input-xlarge <input class="input-xlarge" type="text" placeholder=".input-xlarge"></label>
	<label class="form-inline">input-xxlarge <input class="input-xxlarge" type="text" placeholder=".input-xxlarge"></label>

input-mini input-small input-medium input-large input-xlarge input-xxlarge

Et formularelements størrelse kan også angives i forhold til det element, som det ligger i.

	<label class="form-inline">span1 <input class="span1" type="text" placeholder=".span1"></label>
	<label class="form-inline">span2 <input class="span2" type="text" placeholder=".span2"></label>
	<label class="form-inline">span3 <input class="span3" type="text" placeholder=".span3"></label>
	<label class="form-inline">span4 <input class="span4" type="text" placeholder=".span4"></label>
	<label class="form-inline">span5 <input class="span5" type="text" placeholder=".span5"></label>
	<label class="form-inline">span6 <input class="span6" type="text" placeholder=".span6"></label>
	<label class="form-inline">span12 <input class="span12" type="text" placeholder=".span12"></label>

span1 span2 span3 span4 span5 span6 span12

Ønskes fuld bredde på et formularelement benyttes klassen input-block-level.

	<label class="form-inline"><input class="input-block-level" type="text" placeholder="input-block-level"></label>

input-block-level

Basisformular

En basisformular er oftest den bedste bedste løsning, fordi den simpel at benytte for brugeren. En formular bør ikke indholde for mange felter. Hvis mange felter skal udfyldes, bør den splittes op og kombineres med en forløbsindikator.

<form>
	<fieldset>
		<legend>Titel på formular</legend>
		<label for="input1">Fornavn</label>
		<input type="text" id="input1">
		<label for="input2">Efternavn</label>
		<input type="text" id="input2">
		<label class="checkbox"><input type="checkbox">Afkryds</label>
		<button type="submit" class="btn oim">Send</button>
	</fieldset>
</form>

Enkeltvis vandrette formularelementer

Hvis label skal være på samme linje som input-feltet benyttes klassen form-horizontal.

<form class="form-horizontal">
	<div class="control-group">
		<label class="control-label" for="fornavn">Fornavn</label>
		<div class="controls">
			<input type="text" id="fornavn">
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="efternavn">Efternavn</label>
		<div class="controls">
			<input type="text" id="efteranvn">
		</div>
	</div>
</form>

Flere formelementer op samme linje

Hvis der er behov for en formular med flere elementer på samme linje, så kan klassen form-inline benyttes.

<form>
	<label for="input1">Fornavn</label>
	<input type="text" id="input1">
	<label class="checkbox">Orlov ønskes<input type="checkbox"></label>
	<div class="form-inline">
		<label>Orloven begyndes den <input class="input-small" type="text"></label> og <label>afsluttes den <input class="input-small" type="text"></label><br>
		<label class="checkbox"><input type="checkbox"> Udsættelse ønskes i</label> <label><input class="input-small" type="text"> antal uger</label>
	</div>
	<button type="submit" class="btn">Send</button>
</form>

Indpasning i grid

Det er muligt at have flere elementer på samme linje og indpasset i sidens grid. For øget kontrol bruges klasserne controls og controls-row.

<form>
	<div class="controls-row controls">
		<div class="span4">
			<label for="fnavn">Fornavn</label>
			<input type="text" id="fnavn" class="input-block-level">
		</div>
		<div class="span4">
			<label for="enavn">Efternavn</label>
			<input type="text" id="enavn" class="input-block-level">
		</div>
	</div>
	<label for="age">Alder</label>
	<input type="text" id="age" class="input-mini">
	<div>
		<label class="radio inline"><input type="radio" name="opz" id="opa"> Mand</label>
		<label class="radio inline"><input type="radio" name="opz" id="opb"> Kvinde</label>
	</div>
</form>

Hjælpetekster

Det er ofte god praksis af forsyne formularelementer med hjælpetekster udover feltets label.

Der findes to typer hjælpetekster. Klassen help-inline benyttes sammen med klassen form-inline, hvis label skal stå på samme linje som inputfeltet. Klassen help-block benyttes til større tekstafsnit og kan benyttes både med og uden klassen form-inline.

<form>
	<div class="form-inline">
		<label>Navn <input type="text"></label> <span class="help-inline">Indtast dit fulde navn</span>
	</div>
	<label>Kanslergadeforligets konsekvenser</label> 
	<input type="text"> <span class="help-block">Gør rede for de væsentligste konsekvenser af Kanslergadeforliget i 1933 især med henblik på statsstøtte til boligbyggeri i provinsen.</span>
</form>

Valideringsbeskeder

Der findes fire typer valideringsbeskeder, som kan benyttes til at signalere validiteten af et input. Det drejer sig om klasserne warning, error, info og success. Klassen control-group benyttes sammen med førnævnte klasser.

<form>
	<div class="form-inline control-group warning">
		<label class="control-label">Navn <input type="text"></label> <span class="help-inline">Hvis du ikke indtaster noget i dette felt, så ender det galt</span>
	</div>
	... 
</form>

Påkrævede felter

Med klassen required kan indikeres, hvorvidt et inputfelt er påkrævet.

<form>
	<label for="input10" class="required">Fornavn</label>
	<input type="text" id="input10" aria-required="true">
	<label for="input20" class="required">Efternavn</label>
	<input type="text" id="input20"aria-required="true">
	<label class="checkbox"><input type="checkbox">Afkryds</label>
	<button type="submit" class="btn oim">Send</button>
</form>