HTML-formularer

HTML-formularer bruges til at indsamle forskellige typer brugerinput.

<form>-elementet

HTML-formularer bruges til at indsamle brugerinput.

<form>-elementet definerer HTML-formularen:

Example

<form>
 .
form elements
 .
</form>

HTML-formularer indeholderformular-elementer.

Formularelementer refererer til forskellige typer input-elementer, afkrydsningsfelter, radio-knapper, submit-knapper osv.

<input>-elementet

<input> elementer er de vigtigsteformular-elementer.

Der er mange former for <input>-elementet, afhængigt af forskellige type attributter.

Disse er de typer, der bruges i dette kapitel:

Type Description
text Definer almindelig tekstinput.
radio Definer radio-knap-input (vælg én af flere valg)
submit Definer submit-knap (indsend formulæret)

Note:Du vil senere i denne vejledning lære mere om inputtyper.

Tekstinput

<input type="text"> Definer brugt tilTekstinputEn enkelt linje inputfelt:

Example

<form>
 Fornavn:<br>
<input type="text" name="firstname">
<br>
 Efternavn:<br>
<input type="text" name="lastname">
</form>

Prøv det selv

Sådan ser det ud i browseren:

First name:


Last name:

Note:Formulæret selv er ikke synligt. Bemærk også, at standardbredden for tekstfelt er 20 tegn.

Radio-knap-input

<input type="radio"> DefinerRadio-knap.

Radio-knapper lader brugeren vælge én af et begrænset antal valg:

Example

<form>
<input type="radio" name="sex" value="male" checked>Mand
<br>
<input type="radio" name="sex" value="female">Kvinde
</form>

Prøv det selv

Radio-knapper ser sådan ud i browseren:

Mand

Kvinde

Submit-knap

<input type="submit"> Definer brugt til atFormulærhåndtering(form-handler)IndsendFormulærbekendtgørelser

Formulærhåndteringen er normalt en server-side side, der indeholder script til at håndtere inputdata.

Formulærhåndteringen i formulæret action Angiv i attributterne:

Example

<form action="action_page.php">
Fornavn:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Efternavn:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Prøv det selv

Sådan ser det ud i browseren:

First name:


Last name:


Action-attribut

Action-attributDefiner handlingen, der skal udføres ved indsendelse af formulæret.

Den normale måde at indsende et formulær til en server er ved at bruge en submit-knap.

Normalt indsendes formulær til en webside på en webserver.

I de ovenstående eksempel er der specificeret en server-side script til at håndtere indsendte formulær:

<form action="action_page.php">

Hvis action-attributten udelades, sættes action til den aktuelle side.

Metode-attribut

method-atributangiver den HTTP-metode, der bruges til at submitte formularen (GET eller POST)

<form action="action_page.php" method="GET">

eller:

<form action="action_page.php" method="POST">

Når skal du bruge GET?

Du kan bruge GET (standardmetode):

Hvis formularen submittes passivt (f.eks. søgemaskineforespørgsel) og indeholder ingen følsomme oplysninger.

Når du bruger GET, er formulardata synlige i adresselinjen på siden:

action_page.php?firstname=Mickey&lastname=Mouse

Note:GET er det bedste valg til at submitte små mængder data. Browseren sætter en kapacitetsgrænse.

Når skal du bruge POST?

Du bør bruge POST:

Hvis formularen opdaterer data eller indeholder følsomme oplysninger (f.eks. adgangskode).

POST er mere sikker, fordi de data, der submittes, er usynlige i adresselinjen på siden.

Navn-atribut

Hver inputfelt skal have en name-atribut for at blive submittet korrekt.

Dette eksempel vil kun submitte "Last name" inputfeltet:

Example

<form action="action_page.php">
Fornavn:<br>
<input type="text" value="Mickey">
<br>
Efternavn:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Prøv det selv

Brug <fieldset> til at kombinere formulardata

<fieldset> Elementer kombinerer relaterede data i formularen.

<legend> Elementet <fieldset> definerer titlen for elementet.

Example

<form action="action_page.php">
<fieldset>
<legend>Personlig information:</legend>
Fornavn:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Efternavn:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Prøv det selv

Denne HTML-kode ser sådan ud i en browser:

Personal information:
First name:


Last name:


HTML Form Properties

HTML <form> element, with all possible properties set, looks like this:

Example

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

Below is a list of <form> properties:

Properties Description
accept-charset Specify the character set used in the submitted form (default: page character set).
action Specify the address (URL) to which the form is submitted (submission page).
autocomplete Specify whether the browser should automatically complete the form (default: enabled).
enctype Specify the encoding of the submitted data (default: url-encoded).
method Specify the HTTP method used when submitting the form (default: GET).
name Specify the name of the form to be identified (for DOM use: document.forms.name).
novalidate Specify that the browser does not validate the form.
target Specify the target of the address in the action attribute (default: _self).

Note:You will learn more about properties in the following chapters.