Omogoča uporabniku vnos besedila (text, texarea...) ali izbiro (button, radio...) v elementih objekta form, lahko pa ga uporabimo tudi za prenos podatkov na strežnik.

Vsako polje v HTML dokumentu označeno s <Form> je objekt zase. Za definicijo objekta uporabimo standarden HTML stavek. Z zapisom

<FORM NAME="myForm">
</FORM>

se kreira forma z imenom myForm.

NAME="formName" specificira ime objekta form, v našem primeru myForm, ki ga lahko izpišemo s stavkom:

document.write("document.myForm.name").

Lahko definiramo več form v istem dokumentu, začetek in konec posamezne forme nam predstavljata znački <FORM> in </FORM>. Znotraj forme lahko z značko <INPUT> definiramo poljubno število enega izmed naslednjih objektov, ki so tudi lastnosti objekta form:

- Button
- Checkbox
- File
- Hidden
- Image
- Password
- Radio
- Reset
- Submit
- Text

Če npr. napišemo

<FORM NAME="myForm">
<INPUT TYPE="text" NAME="firstName" SIZE=20>
<INPUT TYPE="button" VALUE="gumb" NAME="gumb" onClick="alert('Živjo!')">
</FORM>,

Na podoben način kot smo izpisali ime forme, lahko izpišemo še ime objekta text :

document.write("document.myForm.elements[0].name").

Namesto imena elementa lahko pišemo elements[i], pri čemer je i+1 zaporedna številka elementa. V isti formi imamo lahko tudi različne tipe elementov z istim imenom NAME="elementIme". Potem se avtomatično kreira vrsta "elementIme" in na elemente se moramo sklicevati z elementIme[i], pri čemer je i ustrezen indeks.

Z uporabo značke <SELECT> lahko definiramo objekt sellect list. Če napišemo

<FORM>
 <SELECT>
   <OPTION>Jazz 
   <OPTION SELECTED>Blues
   <OPTION>Regae
 </SELECT>
</FORM>

Z značko TEXTAREA

 
<FORM>
<TEXTAREA NAME="item_description" ROWS="6" COLS="55">
</TEXTAREA>
</FORM>

Ko v neko formo vpišemo vse podatke, jih želimo posredovati naprej.

Primer

Najlažji način je pošiljanje podatkov preko elektronske pošte:

<FORM METHOD=post ACTION="mailto:tu.je@tvoj.naslov" ENCTYPE="text/plain">
Ti je všeč ta stran?
  <INPUT NAME="choice" TYPE="radio" VALUE="1">Not at all.

  <INPUT NAME="choice" TYPE="radio" VALUE="2" CHECKED>Waste of time.<br>
  <INPUT NAME="choice" TYPE="radio" VALUE="3">Worst site of the Net.<br>
  <INPUT NAME="submit" TYPE="submit" VALUE="Send">
</form>

Pri tem smo uporabili lastnost objeka Form ENCTYPE="text/plain", da pošljemo samo tekst in lahko pošto potem res preberemo.

Da omogočimo, da podatke, ki jih uporabnik vstavi, potem uporabljamo, uporabimo "Submit" gumb, ki je lahko gumb definiran kot <INPUT TYPE="SUBMIT"> ali <INPUT TYPE= "IMAGE">. Kaj se zgodi, ko uporabnik pritisne "Submit" gumb, je definirano z ACTION pripisom. Vrednost od ACTION je ponavadi URL naslov, ki kaže na nek CGI program. CGI program poteka na serverju, argumente program dobi iz forme. Vrednost od METHOD je lahko "send" ali "get". Več informacij o tem: http://hoohoo.ncsa.uiuc.edu:80/cgi/overview.html

V form znački lahko nastopa tudi onSubmit, njegova vrednost je JavaScript zapis ali funkcija, ki se izvede, ko pritisnemo "Submit" gumb. Če JavaScript zapis vrne vrednost false, se URL, določen z ACTION, ne vključi, če pa vrne karkšnokoli drugo vrednost, pa se.

OnSubmit lahko uporabimo, če hočemo npr. preveriti, ali je forma "pravilno" izpolnjena.

Primer (onSubmit)

Napišemo formo, ki vsebuje text objekt, kamor moramo vstaviti tri znake. OnSubmit oskrbnik se izvede, ko pritisnemo tipko submit. Pokliče funkcijo checkData, ki vrne vrednost true, če smo res vpisali tri znake, drugače vrne false. Pazi: funkcijo checkData pokliče onSubmit in ne sam pritisk na gumb submit.

<SCRIPT>
function checkData (){
if (document.myForm.threeChar.value.length == 3) {
   return true}
   else {
      alert("Enter exactly three characters. " + document.myForm.threeChar.value +
         " is not valid.")
      return false}
}
</SCRIPT>
<FORM NAME="myForm" onSubmit="return checkData()">
Enter 3 characters:
<INPUT TYPE="text" NAME="threeChar" SIZE=3>
<INPUT TYPE="submit" VALUE="Done" NAME="submit1"
   onClick="document.myForm.threeChar.value=document.myForm.threeChar.value.toUpperCase()">
</FORM>

Primer (submit)

Ta primer je podoben prejšnjemu. Razlika je v tem, da tukaj za pošiljanje podatkov v nadaljno obdelavo uporabimo metodo submit. Pritisk na gumb submit nam povzroči klic funkcije checkData. Če je vrednost true, funkcija checkData pošlje formo naprej v obdelavo s klicem submit metode.

function checkData (){
if (document.myForm.threeChar.value.length == 3) {
   document.myForm.submit()}
   else {
      alert("Enter exactly three characters. " + document.myForm.threeChar.value +
         " is not valid.")
      return false}
}


<FORM NAME="myForm" onSubmit="alert('Form is being submitted.')">
<B>Enter 3 characters:</B>
<INPUT TYPE="text" NAME="threeChar" SIZE=3>
<P><INPUT TYPE="button" VALUE="Done" NAME="button1"
   onClick="checkData()">
</FORM>

<SCRIPT>
function verifyInput(textObject) {
   if (textObject.value == 'CA' || textObject.value == 'AZ') {
      alert('Nice input')
   }
   else { document.myForm.reset() }
}
</SCRIPT>



<FORM NAME="myForm" onReset="alert('Please enter CA or AZ.')">
Enter CA or AZ:
<INPUT TYPE="text" NAME="state" SIZE="2" onChange=verifyInput(this)>

</FORM>

Element z imenom "nameForm" iz forme "myForm" poudarimo s funkcijo

function setfocus() {
  document.nameForm.nameElement.focus();
}

<body onLoad="setfocus()">

Da element ni več poudarjen dosežemo na podoben način z uporabo metode blur.

<INPUT
   TYPE="checkbox"
   NAME="checkboxName"
   VALUE="checkboxValue"
   [CHECKED]
   [onBlur="handlerText"]
   [onClick="handlerText"]
   [onFocus="handlerText"]>
   tekst

Primer

Če napišemo:

<B>Izberi zvrsti, ki so ti všeč:</B>
<BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B
<BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz
<BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues
<BR><INPUT TYPE="checkbox" NAME="musicpref_rave" > Rave

se nam na ekranu izpiše:

Izberi glasbo, ki ti je všeč:

R&B
Jazz
Blues
Rave

NAME="checkboxName" Ime objekta checkbox.

VALUE="checkboxValue" specificira vrednost, ki je vrnjena strežniku, ko je forma izpolnjena, če uporabnik izbere to okno. Če vrednosti ne predpišemo, je VALUE="on"

CHECKED Kontrolno okno s to oznako je na začetku označeno.

textToDisplay Besedilo poleg kontrolnega okna.

Lastnosti:

Primer

Metode:

- blur
- click
- focus

Blur in focus metodi uporabimo na isti način kot pri gumbu, preprost primer za click metodo, ki nam povzroči, da se v kontrolnem oknu pojavi kljukica, pa je tukaj.

<INPUT
   TYPE="text"
   MAXLENGTH="maxChars"
   NAME="textName"
   VALUE="textValue"
   SIZE=integer
   [onBlur="handlerText"]
   [onChange="handlerText"]
   [onFocus="handlerText"]>

Primer:

Definirajmo tekstovno polje, v katero gre naenkrat le 10 znakov, vidimo pa jih le 5.

<FORM NAME=form1>
<INPUT TYPE="text" MAXLENGTH=10 NAME="okno" VALUE="primer" SIZE=5 onChange={defval()}>
</FORM>

Lastnosti:

Metode:

- blur
- focus