<div style="position:absolute; top:10px; right:200px; width:448px; border:1px solid blue;"><marquee behavior="slide" direction="right" scrollamount="4" loop="5"><a href="https://easywd.vitsolutions.lv/" target="_self" title="Labs Resurss"> <img src="../easywd.png" border="0" width="448" height="174"></a></marquee></div><link rel="stylesheet" type="text/css" href="http://www.easywd.lv/css/menu_f1.css"><link rel="shortcut icon" href="http://www.easywd.lv/css/favicon.ico">

 

HTML formas, ļoti svarīgs elements jebkurai mājas lapai


HTML Formas

HTML formas tiek izmantotas, lai nodotu (parsūtīt leitotāja) datus uz serveri.

HTML forma var saturēt ievades elementus, piemēram, teksta lauks, izvēles rūtiņas, radio pogas, "Nosūtīt" pogas un vairāk.Forma var saturēt arī izvēles sarakstus, textarea, fieldset, leģenda, un marķējums elementiem.

<form> Tag tiek izmantota, lai izveidotu HTML formu:

<form>
.
input elements (ievades elementi)
.
</form>


HTML Formas - Input elements

Vissvarīgākais veids elements ir <input> elements.

<input> Elements tiek izmantots, lai lietotājs varētu ievadīt informāciju.

<input> Elements var atšķirties dažādos veidos, atkarībā no tipa atribūta. <input> Elements var būt tipa teksta laukā, rūtiņu, paroles, radio pogas, iesniegšanas pogas, un vairāk.

Visbiežāk lietotie ievades veidi ir aprakstīti zemāk.


Teksta lauki

<input type="text"> definē vienu līniju ievades lauku, kur lietotājs var ievadīt tekstu:

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Kā iepriekšējais HTML kods  izskatās pārlūkprogrammā:

<form>First name:
Last name:

Piezīme: forma pati par sevi nav redzama. Tāpat ņemiet vērā, ka noklusējuma platums teksta laukam ir 20 rakstzīmes. 


Paroles lauks

<input type="password"> definē paroli:

<form>
Password: <input type="password" name="pwd">
</form>

Kā HTML kods iepriekš izskatās pārlūkprogrammā:

Parole: 

Piezīme:paroles laukā rakstzīmes tiek maskētas (parādīts kā zvaigznītes vai aplīši).


Radio pogas

<input type="radio"> nosaka pogu. Radio pogas ļauj lietotājam izvēlēties tikai vienu no ierobežota skaita izvēles:

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Dotajā piemērā tiks izveidotas divas radiopogas, kur
parametra nosaukums būs name="sex" un parametra vērtība
value="male".

Kā HTML kods iepriekš izskatās pārlūkprogrammā:

Vīrietis
Sieviete

Izvēles rūtiņas

<input type="checkbox"> nosaka rūtiņu. Izvēles rūtiņas ļauj lietotājam izvēlēties neko vai vairākas iespējas ierobežotu skaitu izvēlē.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
Dotajā piemērā tiek izmantoti checkbox, parametra nosaukums ir
name="vehicle" un parametra vērtība ir value="Bike"

Kā HTML kods iepriekš izskatās pārlūkprogrammā:

Man ir velosipēds
Man ir auto

Iesniegt (submit) poga

<input type="submit"> nosaka pogas tipu (submit, tas ir nosūtīt datus uz serveri).

Submit poga tiek izmantota, lai nosūtītu formas datus uz serveri. Dati tiek nosūtīti uz lapu, kas norādīts formas darbības (action) atribūtā. Fails, kurš  noteikts action atribūtā parasti dara kaut ko ar saņemto ievadi, turpmāk es izveidošu vienu apstrādes failu, kādā citā
rakstā:

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Dotajā piemērā, tiek izveidota forma, kura ievadītos datus nosūtīs, apstrādes failam, kas ir definēts ar
atribūtu action="mans_apstrades_fails.php/asp" Dotajā
formā mēs redzam lauku kur ievadīt lietotājvārdu,
iesaku izmēģināt izvadi kas ir lejā šim piemēram, jo
ievadot jebkādu vārdu un nospiežot pogu "Submit",
jūs redzēsiet, kā notiek apstrāde.

Kā HTML kods iepriekš izskatās pārlūkprogrammā:

<form action="html_form_action.asp" method="get" name="input">Username:

Ja jūs veida dažas rakstzīmes teksta laukā, un noklikšķiniet uz pogas "Iesniegt", pārlūkprogramma nosūta savu ieguldījumu lapā sauc par "html_form_action.asp". Lapa parādīs saņemto ievadi.


Piemēri

Vairāk Piemēri, Ļoti iesaku apskatīt piemērus kas ir zemāk, jo formām ir ļoti plašas iespējas un to
visu nav iespējams ievietot vienā rakstā, bet zemāk ir
daudz labu un noderīgu piemēru!!!




Radio pogas

Kā izveidot radio pogas.

Izvēles rūtiņas
Kā izveidot rūtiņas. Lietotājs var izvēlēties vai noņemiet izvēles rūtiņu.

Vienkāršu nolaižamo sarakstu
Kā izveidot vienkāršu nolaižamo sarakstu.

Nolaižamais saraksts ar iepriekš izvēlēto vērtību
Kā izveidot nolaižamo sarakstu ar iepriekš izvēlēto vērtību.

Textarea
Kā izveidot multi-line teksta ievades kontrole. In teksta zonas lietotājs var uzrakstīt neierobežotu skaitu rakstzīmju.

Izveidot pogu
Kā izveidot pogu.

Piemēri

Form Piemēri

Fieldset ap form-data
Kā izveidot apmali ap elementu formā.

Veidlapa ar teksta laukiem un jāiesniedz pogu
Kā izveidot veidlapu ar divām teksta laukiem un pogas Iesniegt.

Forma rūtiņas
Kā izveidot veidlapu ar diviem rūtiņas un pogas Iesniegt.

Veidlapa ar radio pogām
, kā izveidot formu ar divām pogām, un pogas Iesniegt.

Nosūtīt e-pastu no formas
, kā nosūtīt e-pastu no formas.


HTML Form tegi

Jauns : Jaunas tagus HTML5.

TagDescription
<form> Defines an HTML form for user input, sākas forma
<input> Defines an input control, ievades lauks, var būt <input type="text"
input type="password", ="radio", ="checkbox"
<textarea> Defines a multiline input control (text area) (teksta lauks)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist>New Specifies a list of pre-defined options for input controls
<keygen>New Defines a key-pair generator field (for forms)
<output>New Defines the result of a calculation
Komentāri (0)  |  2013-11-17 23:16  |  Skatīts: 2663x

Atpakaļ