HTML <form> -elementti

Määrittely ja käyttötapa

<form> Tunnisteella luodaan HTML-lomaketta vastaanottamaan käyttäjän syötteitä.

<form> Elementti voi sisältää seuraavat yhden tai useamman lomakkeen elementin:

Katso myös:

HTML-opas:HTML-lomakkeet ja syötteet

HTML DOM -viittausLomake-objekti

CSS-opas: Lomakkeen tyyliä

Esimerkki

Esimerkki 1

HTML-lomake, jossa on kaksi syöttökenttää ja lähettänpainike:

<form action="/action_page.php" method="get">
  <label for="fname">Etunimi:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Sukunimi:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Lähetä">
</form>

Kokeile itse

Esimerkki 2

HTML-lomake, jossa on valintaruudut:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1">Minulla on polkupyörä</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2">Minulla on auto</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3">Minulla on laiva</label><br><br>
  <input type="submit" value="Lähetä">
</form>

Kokeile itse

Esimerkki 3

Valintapainikkeilla varustettu HTML-lomake:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Lähetä">
</form>

Kokeile itse

ominaisuus

ominaisuus arvo kuvaus
accept-charset merkistö Määrittää, mitä merkistöä käytetään lomakkeen lähettäessä.
action URL Määrittää, minne lomakkeen tiedot lähetetään, kun lomake lähetetään.
autocomplete
  • on
  • off
 Määrittää, tulisiko lomakkeessa olla automaattinen täyttöominaisuus käytössä.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Määrittää, miten lomakkeen tiedot koodataan, kun ne lähetetään palvelimelle.
method
  • get
  • post
 Määrittää HTTP-metodi, jota käytetään lomakkeessa lähetettäessä tietoja.
nimi teksti Määrittää lomakkeen nimen.
novalidate novalidate Määrittää, ei pitäisi tarkistaa lomaketta lomakkeen lähettäessä.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 Määrittää linkin resurssin ja nykyisen dokumentin välisen suhteen.
target
  • _blank
  • _self
  • _parent
  • _top
 Määrittää, missä näytetään lomakkeen lähettämisen jälkeen vastaanotettu vastaus.

globaalit ominaisuudet

<form> Tagi tukee myös HTML:n globaalit ominaisuudet。

tapahtumavaiheet

<form> Tagi tukee myös HTML:n tapahtumavaiheet。

Oletusarvoiset CSS-asetukset

Useimmat selaimet käyttävät seuraavia oletusarvoja näyttämiseen <form> Elementti:

form {
  display: block;
  margin-top: 0em;
}

Kokeile itse

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki