HTML un CSS iesācējiem

HTML & CSS iesācējiem (daļa 13): Formas (1)

Visi pamācības video

Formas definēšana notiek ar form-elementu. Visas elementi, kas ir iekšā form, pieder pie attiecīgās formas.

<form>
…
</form>

Ievadīšanas <form> sākumā tiek sagaidīts action-atribūts. Tādējādi tiek norādīts, kas jādara ar šīs formas datiem. Parasti šeit tiek izmantota PHP lietojumprogramma.

<form method="post" action="form.php">
…
</form>



Pārliecinieties, ka norādītā datne patiešām ir atrodama. Tāpēc ir jāiestata pareizais ceļš.

Vai varat norādīt arī e-pasta adresi, ne tikai skriptu.

<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain">
…
</form>



Šajā gadījumā formas dati tiek nosūtīti pa e-pastu. Tas nav pārāk eleganti, tāpēc gandrīz vienmēr tiek izmantota skriptu versija. Taču, ja jums pašlaik nav pie rokas neviena skripta, jūs varat izmantot formas nosūtīšanu pa e-pastu, ja nepieciešams.

Vēl viens svarīgs atribūts form-elementam ir method. Ar to noteikt nosūtītās formas saturu izsūtīšanas HTTP metodi. Ir pieejamas divas dažādas variants.

post = Šeit formu dati tiek nosūtīti divos soļos uz norādīto adresi. Vispirms pārlūks sazinās ar norādīto adresi. Ja tas izdodas veiksmīgi, formas dati tiek nodoti skriptam.

get = Šajā metodē formas dati tiek pielikti pie URL beigām, kas ir piešķirtas action atribūtam. Formas dati tādējādi ir redzami arī pārlūkprogrammas adreses joslā.

Protams, rodas jautājums, kuru no šiem diviem veidiem izvēlēties formas datu nosūtīšanai. Pamatā varat izmantot abus. Tomēr īpaši, ja ir liels datu apjoms un jāaugšupielādē faili uz servera, jums tomēr jāizmanto post.

Vienkārši formas lauki

Līdz šim tika definēta tikai formas ārējā struktūra. Pārlūkā tomēr vēl nav redzams pats veidlapas elements.

<form method="post" action="form.php">
…
</form>



Tagad jāaizpilda forma ar saturu/dzīvību.

<input type="text" name="vorname" />



input-elementam ir pievienota atribūta-vērtības kombinācija type="text". Turklāt katram ievades laukam jābūt piešķirtam iekšēju identifikatoru. Šis identifikators dokumentā jābūt unikālam. To var izmantot galvenokārt, ja tiek apstrādāti formas dati ar skriptu. Identifikatorā neizmantojiet atstarpes vai speciālos simbolus.


HTML un CSS iesācējiem (daļa 13): Formas (1)

Pavisam neizskatās īpaši spektakulāri. Tomēr, ja noklikšķināt uz teksta lauka, pamanīsiet, ka tur jau var veikt ievades.

Lai apmeklētāji zinātu, ko ierakstīt laukā, protams, ir nepieciešams arī nosaukums.

Vārds: <input type="text" name="vorname" />



Arī šeit pārlūkā atkal redzams vēlamais rezultāts.

HTML un CSS iesācējiem (sērija 13): Veidlapas (1)

Ar atribūtu size jūs varat noteikt lauka platību.

Vārds: <input type="text" name="vorname" size="30" />
<br />
Pasta indekss: <input type="text" name="plz" size="5" />



Ar size-atribūtam ir jāpiešķir gewünschte laukuma platums.

HTML un CSS iesācējiem (daļa 13): Formas (1)

Šajā kontekstā 5 tieši atbilst pieciem rakstzīmēm. Šajā sakarā nozīmīgs ir arī maxlength atribūts. Tas norāda maksimālo atļauto rakstzīmju skaitu, kas var būt ievadītas laukā. Arī par to šeit piemērs:

Vārds: <input type="text" name="vorname" size="30" maxlength="40" />



Ja norādītais vērtība maxlength ir lielāka par vērtību size, tad garākās ievades automātiski rādīsies laukā.

Ar atribūtu value jūs varat panākt iepriekš iestatītu lauka vērtību.

Vārds: <input type="text" name="vorname" value="Tavs vārds" />



Piesaistītā vērtība ir redzama kā iepriekšējais ievades lauks.

HTML un CSS iesācējiem (daļa 13): Formas (1)



Lietotāji var dzēst šo iepriekšējo vērtību.

Jūs varat novērst vērtību dzēšanu no laukiem. Šajā gadījumā tiek definēts ievades lauks, kas būtībā vairs nav ievades lauks. Patiesībā šādi lauki bieži tiek izmantoti izvades mērķiem. Interesanti tas varētu būt, piemēram, lai rādītu ar skriptu noteiktas vērtības. Pie šāda varat iedomāties kalkulatoru. Tomēr varat arī manuāli iepriekšēji aizpildīt lauku ar tekstu, ko apmeklētāji vairs nevar mainīt. (Piezīme: Eiro zīme PDF skatījumā diemžēl netiek pareizi parādīta).

<input name="cena" type="text" value="€ 699.-" readonly />



Lai iestatītu lauku tikai lasīšanai, tai jāpiešķir atribūts readonly. Arī šeit skatieties rezultātu:

HTML un CSS iesācējiem (13. daļa): Formas (1)



Iepriekš definētais teksts tiek parādīts tieši. Tomēr to nevar dzēst.

Definēt paroles laukus

Jums protams ir zināmi paroles lauki. Visur, kur reģistrējaties, jums ir jānorāda parole. (Parasti to ir jāizdara pat divas reizes).

HTML un CSS iesācējiem (daļa 13): Veidlapas (1)

Ievadītie datus ievadlaukā nevar redzēt, tie tiek automātiski aizstāti ar zvaigznēm/punktiem pārlūkprogrammā. Šīs variantas priekšrocība: personai, kas varētu nemanot pāri jums ievadot paroli, nebūs iespējams atšifrēt paroli. Tomēr ir malds, ka paroles lauki automātiski ir droši. Patiesībā paroles, veicot normālu HTTP, nosūtot formas datu pieteikumu, tiek pārraidītas skaidrā tekstā.

Paroles laukus definē šādi:

<input type="password" name="parole" />



Type-atribūtam tiek piešķirts vērtība password. Arī šeit skatieties rezultātu.

HTML un CSS iesācējiem (daļa 13): Formas (1)



Ja tur kaut ko ierakstat, pārlūkprogrammas to padara neredzamu jau ievades laikā.