HTML Obrazci

HTML Obrazci (ang. Forms) se uporabljajo za zbiranje uporabniških vnosov, ki se običajno pošljejo strežniku v obdelavo. <input> ima lahko tudi atribut <value>, ki nam pokaže vneseno vrednost. Atribut <value> se uporablja za izhod iz baze podatkov. Obrazec je zbirka za različne vrste vnosov. Oblika je vsebnik za različne vrste vnosnih elementov, kot so vnos besedila, potrditvena polja, izbirni gumbi, oddajni gumbi itd.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
  <meta charset="UTF-8">
  <title>Osnovni HTML obrazec (skrit submit)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>Osnovni HTML obrazec</h1>

  <form action="/poslji" method="post">
    <!-- Vnos besedila -->
    <label for="ime">Ime:</label>
    <input id="ime" name="ime" type="text" placeholder="Vnesi ime" required>
    <br><br>

    <!-- Geslo -->
    <label for="geslo">Geslo:</label>
    <input id="geslo" name="geslo" type="password" placeholder="Vnesi geslo" required>
    <br><br>

    <!-- Datum -->
    <label for="datum">Datum:</label>
    <input id="datum" name="datum" type="date">
    <br><br>

    <!-- Domet (range) -->
    <label for="domet">Domet (0–100):</label>
    <input id="domet" name="domet" type="range" min="0" max="100" value="50">
    <br><br>

    <!-- Potrditveno polje -->
    <label>
      <input type="checkbox" name="pogoji" value="da" required>
      Strinjam se s pogoji
    </label>

    <!-- Skrit gumb za pošiljanje (Enter v polju vseeno odda obrazec) -->
    <button type="submit" hidden>Pošlji</button>
    <!-- Alternativa: <input type="submit" value="Pošlji" hidden> -->
  </form>
</body>
</html>

REZULTAT

Iskanje: Označi zadetke Najdeno: –

Tip	Opis	Primer
Gumb	Definira gumb.	GLEJ PRIMER
Potrditveno polje	Določa potrditveno polje.	GLEJ PRIMER
Barva	Definira izbirnik barv.	GLEJ PRIMER
Datum	Definira izbirnik datuma.	GLEJ PRIMER
Datum-ura-lokalno	Definira izbirnik datuma.	GLEJ PRIMER
Elektronska pošta	Se uporablja za vnosna polja, ki morajo vsebovati poštni naslov.	GLEJ PRIMER
Datoteka	Določa polje za izbiro datoteke in gumb za oddajo za nalaganje datoteke.	GLEJ PRIMER
Skrito	Definira skrito vnosno polje.	GLEJ PRIMER
Slika	Definira sliko kot gumb za predloži.	GLEJ PRIMER
Mesec	Definira nadzor meseca in leta.	GLEJ PRIMER
Število	Določa polje za vnos številke.	GLEJ PRIMER
Geslo	Določa polje za vnos gesla.	GLEJ PRIMER
Izbirni gumb	Definira izbirni gumb.	GLEJ PRIMER
Domet	Definira kontrolnik za vnos števila.	GLEJ PRIMER
Ponastaviti	Določa gumb za ponastavitev obrazca in njihove privzete vrednosti.	GLEJ PRIMER
Iskanje	Elementi iskanja po vrsti so besedilna polja, namenjena uporabniku za vnos iskalnih poizvedb.	GLEJ PRIMER
Predloži	Določa gumb za pošiljanje podatkov obrazca v bazo podatkov.	GLEJ PRIMER
Telefonska številka	Določa polje za vnos telefonske številke.	GLEJ PRIMER
Vnos besedila	Določa enovrstično polje za vnos besedila.	GLEJ PRIMER
Čas	Definira kontrolnik za vnos časa.	GLEJ PRIMER
Spletni naslov	Določa polje za vnos spletnega naslova.	GLEJ PRIMER
Teden	Določa nadzor tedna in leta.	GLEJ PRIMER

Element <form> predstavlja del dokumenta, ki vsebuje interaktivne kontrolnike za oddajo informacij. Možno je uporabiti pseudo razred :valid in :invalid za slog <form> glede na to, ali so elementi v obrazcu veljavni.