HTML formas tiek lietotas, lai izveidotu ievades laukus, kuros lietotājs var ievadīt informāciju, piemēram saziņas formas mājas lapā, kur lietotājs var ierakstīt vārdu, uzvārdu, telefonu un ziņu vai ielogošanās forma, kurā lietotājs ievada lietotājvārdu un paroli, lai ielogotos mājas lapā.
Ar HTML var izveidot tikai pašus ievades laukus un pogas. Lai ievadītā informācija tiktu nosūtīta uz serveri, jāizmanto arī PHP progrmmēšanas valoda.
Lai izveidotu formu tiek izmantots <form> pāra tags. iekš formas var ievietot <input> tagus, kas apzīmē ievades laukus. Ievades lauki var būt vairāku veidu, piemēram, teksta lauki, skaitlisko vērtību lauki, apstiprināšanas (submit) lauks.
Ievades lauku piemēri:
<input type="button"> - poga
<input type="date"> - datuma ievade
<input type="email"> - e-pasta ievades lauks
<input type="file"> - Fails
<input type="image"> - attēls
<input type="month"> - mēnesis
<input type="number"> - skaitliska vērtība
<input type="password"> - ievades lauks parolei
<input type="radio"> - radio poga
<input type="range"> - dizapazons no līdz
<input type="search"> - meklēšanas ievades lauks
<input type="submit"> - apstiprināšanas lauks
<input type="tel"> - lauks telefona numura ievadei
<input type="text"> - teksta ievades lauks
<input type="time"> - laika ievades lauks
<input type="url"> - saites ievades lauks
Lai izveidotu HTML formu, sāciet ar formas tagiem:
<form>
</form>
Iekš formas ievietosim nosaukumu laukam un teksta ievades lauku vārdam. Pievienosim label, kas būs paskaidrojošs teksts lietotājam, šajā gadījumā “Jūsu vārds”, lai lietotājs zin, ka šajā laukā jāraksta vārds.
<form>
<label>Vārds</label><br>
<input type=”text” placeholder=”Ierakstiet savu vārdu..”><br>
</form>
<br> ir jauna rinda. Ar “placeholder” var pievienot paskaidrojošu tekstu ievades laukam. To var arī nelietot, tāpat kā label. Jūs variet izmantot vai label vai placeholder vai abus, ja nepieciešams. Piemērā parādīti abi.
input type=”text” nosaka, ka šajā laukā lietotājs var ievadīt vienas rindas tekstu. Vairāku rindu tekstam var izmantot <textarea>, ko izmantosim priekš ziņas lauka:
<form>
<label>Vārds</label><br>
<input type=”text” placeholder=”Ierakstiet savu vārdu..”><br>
<label>Jūsu ziņa</label><br>
<textarea placeholder=”Ierakstiet ziņu..” style=”height:200px”>
</textarea><br>
</form>
Tālāk pievienosim pogu “nosūtīt”, izmantojot input type=”submit”:
<form>
<label>Vārds</label><br>
<input type=”text” placeholder=”Ierakstiet savu vārdu..”><br>
<label>Jūsu ziņa</label><br>
<textarea placeholder=”Ierakstiet ziņu..” style=”height:200px”></textarea><br>
<input type=”submit” value=”Nosūtīt”>
</form>
Lai noformētu formas izskatu būs nepieciešams pievienot CSS kodu, savukārt, lai forma nosūtītu datus uz serveri, būs nepieciešams izmantot PHP un nedaudz jāpapildina arī HTML kods.
Lai uzzinātu kā nosūtīt datus no HTML formas, variet iepazīties ar pamācību Kā nosūtīt datus no HTML formas.
Autors: Dagnija Ivdra
+37125693580
hello@dgwebfactory.com