Űrlap (HTML)

Az űrlap ( angolul  form ) a HTML-ben a dokumentum egy része, amely lehetővé teszi a felhasználó számára, hogy információkat vigyen be a rendszer általi további feldolgozáshoz. Szintaktikailag a HTML-ben egy űrlap egy elem használatával van megadva, és a normál elemek jelölésén kívül <form>tartalmaz jelöléseket a vezérlőkhöz , címkékhez és egyebekhez [1] [ 2] .  

Példa

Egy egyszerű űrlap új felhasználó adatainak megadásához [1] :

<!DOCTYPE html> < html > < head > < meta charset = "utf-8" /> < title > Bejegyzés </ title > </ head > < body > < form action = "http://example.com/app/profile.php" method = "post" > < p > < label for = "felhasználónév" > Név: </ label > < input type = "text" name = "felhasználónév" /> < br /> < label for = "nick" > Nick: </ label > < input type = "text" name = "nick" /> < br /> < label for = "email" > Email cím posta: </ label > < input type = "text" name = "e-mail" /> < br /> < label for = "sex" > Padló: </ label > < input type = "radio" name = "sex" value = "férfi" /> férfi < br /> < bemenet típusa = "rádió" név = "szex" value = "nő" /> női < br /> < bemenet típusa = "rádió" név = "szex" érték = "titkos" /> nem akarok válaszolni < input type = "submit" value = "Küldés" > < input type = "reset" value = "Törlés" > </ p > </ form > </ body > </ html >

Ebben a példában az űrlap három szövegmezőt tartalmaz egy szöveges karakterlánc beviteléhez, választógombokat a nem kiválasztásához, gombokat az űrlap elküldéséhez ( eng.  submit ) és törléséhez ( eng.  reset ).

Vezérlők

A vezérlők az űrlappal való felhasználói interakcióhoz használatosak. Az attribútum namea hatókörbe tartozó vezérlő nevét adja meg az adott űrlapon belül .

Minden űrlapelemhez tartozik egy kezdeti érték és egy aktuális érték. Néhány kivételtől eltekintve ( <textarea>, <object>) a kezdeti értéket a value. Az elemekhez társított értékek megváltozhatnak, amikor a felhasználó vagy a szkriptek (például a Javascript ) interakcióba lépnek az űrlappal. Törléskor ( eng.  reset ) az űrlapelemek kezdeti értékeket kapnak. Az összes aktív ( eng.  sikeres ) űrlapelem adatait elküldik ( eng.  submit ) név-érték párok formájában [1] [2] feldolgozásra .

Típusok

A következő vezérlők vannak definiálva HTML-ben:

  • gomb: <input>típusok eleme submit(űrlap beküldése), image(kép-gomb), reset(űrlap törlése, űrlap kiinduló állapotba hozása), button(gomb), valamint elem <button>(űrlap beküldése);
  • jelölőnégyzet (jelölőnégyzet): típus checkbox;
  • rádiógomb : típus radio;
  • menü: elem <select>elemekkel <optgroup>és <option>belül;
  • szövegsor: típus text, és elem <textarea>(többsoros szövegmező);
  • jelszó: típus password;
  • rejtett mező: típus hidden;
  • fájl: típus file.

A HTML5 további elemeket határoz meg ( még nincs több böngésző támogatása ) [3] :

  • <datalist>egy szövegsor automatikus kiegészítési lehetőségeivel rendelkező elem ;
  • <output>más mezők alapján végzett számítás eredményének eleme ;
  • a hitelesítési<keygen> mechanizmusban használható kulcspár létrehozására szolgáló elem .

A <form> elem

Az űrlapot az elem segítségével lehet beállítani <form>, amelyben a vezérlők találhatók. A HTML-ben megszokott attribútumokon kívül a <form>következő [1] [2] is jelen lehet :

  • action(action) egy kötelező attribútum (nem a HTML5-ben), amely tartalmazza az űrlapkezelő URI -jét;
  • method(űrlap beküldési módja) - egy attribútum, amely a GET (alapértelmezett) vagy POST értékeket veszi fel;
  • enctype(kódolási típus a tartalomhoz) - alapértelmezett application/x-www-form-urlencoded(mindig a GET metódushoz), de általában többrészes/form-adatot használnak ;
  • accept— a fájlok letöltéséhez szükséges MIME -típusok  listája ;
  • name - az űrlap neve;
  • onsubmit - eseménykezelő "űrlap elküldve" (szkriptekhez);
  • onreset - eseménykezelő: "űrlap törölve" (szkripteknél is);
  • accept-charsettámogatott karakterkészletek listája.

Űrlap beküldése

Az űrlap beküldésének két módja van: GET és POST. A GET módszert olyan esetekben ajánljuk, amikor a szerveroldali űrlapfeldolgozás során nincsenek mellékhatások, például keresés. Ellenkező esetben, ha kiszolgálóoldali módosításokat tartalmaznak az adatbázisok stb., a POST [1] módszert kell használni .

Lásd még

Jegyzetek

  1. ↑ 1 2 3 4 5 HTML nyelvi specifikáció Archív másolat 2012. december 4-én a Wayback Machine -nél , fordító: A. Piramidin, intuit.ru, ISBN 978-5-94774-648-8 , 17. Előadás: Űrlapok.
  2. ↑ 1 2 3 Űrlapok HTML dokumentumokban Archiválva : 2021. április 22. a Wayback Machine  W3C HTML4 specifikációjában
  3. ↑ HTML5 űrlapelemek, w3schools (lefelé mutató link) . Letöltve: 2012. december 2. Az eredetiből archiválva : 2013. május 13..