Formanı təqdim edərkən, standart olaraq növdən istifadə olunur. HTML-də formalar. Forma elementi qrupunun başlığı

Çox vaxt veb saytlarda HTML formaları yerləşdirilmiş səhifələrə rast gələ bilərsiniz. Veb formaları - rahat yol saytınızın ziyarətçilərindən məlumat almaq. Buna misal olaraq -, - ziyarətçilərə və sayt tərtibatçılarına rəy təqdim edir. Formalar CMS hazırlayarkən sayt tərtibatçıları üçün də əlverişlidir ki, bu da saytın əsas xüsusiyyətini - aktuallığını qorumağa imkan verir. Bu məqalə HTML formalarının yaradılmasının əsaslarına, onların işlənməsinə və məlumatların ekrandakı formalardan PHP skriptlərinə necə ötürülməsinə yönəldilmişdir.

1) Sadə bir forma yaratmaq

etiketlər

formanın başlanğıcını və sonunu təyin edin. Formanın başlanğıc etiketi
iki atribut ehtiva edir: hərəkətüsul. Fəaliyyət atributunda skripti emal etmək üçün çağırılmalı olan skriptin URL-i var. Atribut üsul brauzerə formanı təqdim etmək üçün hansı növ HTTP sorğusundan istifadə edəcəyini bildirir; mümkün dəyərlər POSTGET.

Şərh

POST və GET metodları arasındakı əsas fərq məlumatın ötürülmə üsuludur. GET metodunda parametrlər vasitəsilə ötürülür ünvan çubuğu, yəni. əslində sorğunun HTTP başlığında, POST metodunda isə parametrlər HTTP sorğusunun gövdəsindən keçirilir və heç bir şəkildə ünvan sətri şəklində əks olunmur.

$text = nl2br($_POST["mytext"]);
?>

Tapşırıq: Tutaq ki, biz 2000-dən 2050-ci ilə qədər olan bir açılan siyahı yaratmaq istəyirik.
Həll: Yaratmaq lazımdır HTML forması SELECT elementi və PHP ilə - formanı emal etmək üçün skript.

Müzakirə:

İki fayl yaratmaqla başlayaq: form.htmlaction.php. Faylda form.html açılan siyahısı olan html formasını ehtiva edəcək. Üstəlik, siyahıdakı dəyərlər iki şəkildə göstərilə bilər:

I. Məlumatların əl ilə daxil edilməsi:

II. Döngü vasitəsilə məlumatların daxil edilməsi:

Gördüyünüz kimi, döngə ilə ikinci nümunə daha yığcamdır. Məncə, forma işləyicisi skriptini verməyə dəyməz, çünki o, mətn sahəsi kimi işlənir, yəni. siyahı dəyərləri superqlobal massivdən əldə edilə bilər $_POST.

Təsvir:

Faylı serverə göndərmək üçün HTML formasını yaradaq.




Bu html formasının elementi var gözdən keçirin, serverə yükləmək üçün faylı seçmək üçün dialoq pəncərəsini açır. Düyməni basaraq "Faylı köçür", fayl işləyici skriptinə ötürülür.

Sonra bir skript işləyicisi yazmalısınız action.php. İşləyicini yazmadan əvvəl, faylı hansı qovluğa köçürəcəyimizə qərar verməlisiniz:

if(isset($_FILES [ "mənim faylım" ])) // Əgər fayl varsa
{
$kataloq = "../şəkil/" ; // Bizim kataloq
əgər (is_dir ($kataloq)) // Əgər belə bir kataloq varsa
{
$myfayl = $_FILES [ "myfayl" ][ "tmp_name" ]; // Temp faylı
$myfayl_name = $_FILES [ "mənim faylım" ][ "ad" ]; // Fayl adı
if(! surəti ($myfile, $kataloq)) əks-səda "Faylı kopyalama xətası". $myfayl_name // Əgər faylın surəti uğursuz olarsa
}
else mkdir("../image/"); // Əgər belə bir kataloq yoxdursa, onu yaradacağıq
}
?>

Şərh

İstifadəçilərin serverinizə hər hansı fayl yükləməsinə inanırsınızsa, son dərəcə diqqətli olmalısınız. Təcavüzkarlar şəkil və ya fayla “pis” kodu yeridə və onu serverə göndərə bilərlər. Belə hallarda faylların yüklənməsinə ciddi nəzarət etməlisiniz.

Bu nümunə serverdə qovluq yaratmağı və faylı həmin qovluğa köçürməyi nümayiş etdirir.

Mən də bir elementlə nümunə göstərmək istərdim onay qutusu. Bu element digər elementlərdən bir qədər fərqlənir ki, əgər elementlərdən biri deyilsə onay qutusu'a seçilmirsə, super qlobal dəyişən $_POST boş bir dəyər qaytaracaq:


Mavi
Qara


if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Ən azı 1 element seçilibsə
əks-səda "Dəyər seçin";
?>

HTML-də forma, istifadəçiyə bizi maraqlandıran məlumatları daxil etməyə imkan verən sənədin bir hissəsidir, sonra server tərəfində qəbul edilə və işlənə bilər. Başqa sözlə desək, formalar istifadəçilərin daxil etdiyi məlumatları toplamaq üçün istifadə olunur.

Cari etiketin hansı forma elementinə aid olduğunu müəyyən etmək üçün etiketin for atributundan istifadə etməlisiniz

İstifadə nümunəsini nəzərdən keçirək:

</span> Tag istifadə nümunəsi <label><span>
>

Bu nümunədə biz:

  • İçəri birinci formalar:
    • Göndərilib iki radio düymələri ( ) məhdud sayda seçimlərdən birini seçmək üçün. Bir daha qeyd edək ki, eyni formada olan radio düymələri üçün eyni ada malik olmalıdır, fərqli dəyərlər göstərdik. üçün birinci yoxlanılır, bu, səhifə yüklənərkən elementin əvvəlcədən seçilməli olduğunu müəyyən edir (bu halda, bəli dəyəri olan radio düyməsi ). Bundan əlavə, biz element üçün unikal identifikatoru təyin edən radio düymələri üçün qlobal atributlar təyin etdik.
    • İki maddə yerləşdirdi
  • İçəri ikinci formalar:
    • Göndərilib iki radio düymələri ( ) məhdud sayda seçimlərdən birini seçmək üçün. üçün ikinci Radio düymələri üçün biz yoxlanılmış atributu təyin etdik, bu elementin səhifə yüklənməsində əvvəlcədən seçilməli olduğunu göstərir (bu halda no dəyəri olan radio düyməsi). Bundan əlavə, biz forma və eyni adlar daxilində radio düymələri üçün unikal dəyərlər təyin etdik.
    • İki maddə yerləşdirdi

Brauzerdə mətn etiketlərindən istifadə üçün hər iki seçim (metod) eyni görünür:

Daxiletmə sahələri üçün ipucu

Bir istifadə nümunəsinə baxaq:

Yer tutucu atributundan istifadə nümunəsi <span>
daxil ol: type="text" name="giriş" yer tutucusu= "Girişinizi daxil edin">

Şifrə: type = "parol" adı = "parol" yertutan = "Şifrənizi daxil edin">

IN bu misal element üçün təyin etdik mətn yazın (bir sətirli mətn sahəsi) və parol yazın (parol sahəsi), daxiletmə üçün gözlənilən dəyəri təsvir edən istifadəçi üçün mətn göstərişi (yer tutucu atribut).

Nümunəmizin nəticəsi:

Mövzu ilə bağlı suallar və tapşırıqlar

Növbəti mövzuya keçməzdən əvvəl praktiki tapşırığı yerinə yetirin:

  • Əldə olunan biliklərdən istifadə edərək aşağıdakı sifariş formasını yaradın:

Nüans: seçimin nəzərdə tutulduğu sahələrdə yalnız elementin özünə deyil, mətnə ​​klikləməklə seçim etmək mümkün olmalıdır.

Təlimi tamamladıqdan sonra, hər şeyi düzgün etdiyinizə əmin olmaq üçün nümunəni ayrı bir pəncərədə açaraq səhifə kodunu yoxlayın.

HTML alətlərindən istifadə edərək, veb səhifəyə gələn ziyarətçi tərəfindən məlumat daxil etmək üçün formalar yarada bilərsiniz.

Tag

Formanın təsviri qoşalaşmış teqlər arasında yerləşdirilir ... . Bir neçə forma eyni vaxtda bir səhifəyə yerləşdirilə bilər, lakin onlar digərinin içərisinə daxil edilə bilməz.

Etiket Atributları
accept-charset Bu formanı emal edən server tərəfindən qəbul edilən giriş kodlaşdırmalarının siyahısı. Saytın səhifələrinin bir kodlaşdırmada olduğu və məlumatların başqa bir şəkildə göndərilməsi lazım olduğu bir vəziyyətdə kömək edir. Və ya brauzer kodlaşdırmanı səhv olaraq avtomatik aşkar etdikdə. Misal üçün: qəbul-charset="cp1251" və ya qəbul-charset="utf8". fəaliyyət Formanı emal edəcək proqramın adı. enctype Məzmun növü (kodlaşdırma üsulu). Məsələn, əgər formada fayllar varsa, o zaman enctype="multipart/form data".
(Defolt enctype="application/x-www-form-urlencoded"). metodu Məlumatların formadan emal proqramına ötürülməsi üsulu. Aşağıdakı dəyərləri qəbul edə bilər: almaq və ya post. İstifadə almaq brauzer istifadəçidən alınan məlumatları kodlayır və atribut dəyərinə əlavə edir hərəkət ad = dəyər cütləri. Məlumat atribut dəyərindən ayrılır hərəkət sual işarəsi (?). İstifadə post məlumatlar ayrıca ötürülür. ad Formanın adı. Formaya nömrə ilə deyil, adla müraciət etmək üçün JavaScript-i təyin edin. novalidate Bu atributun mövcudluğu o deməkdir ki, forma verilənləri təsdiq edilməməlidir. formanı təsdiqləmək üçün JavaScript işləyicisini göndərin. JavaScript işləyicisi yerli olaraq işə salındığından, proses kifayət qədər sürətlidir. Bu, axmaq istifadəçinin bir daha hansısa sahəni səhv doldurması səbəbindən şəbəkə üzərindən dəfələrlə məlumat göndərməkdən daha yaxşıdır. hədəf Qəbul edilmiş məlumatın göndəriləcəyi çərçivə (çərçivə tərkibli sənədlərdə göstərilmişdir).
Misal
...Forma elementləri...

Konteyner

öz-özünə mövcud deyil. Göndərilən məlumatlar xüsusi forma elementlərində - idarəetmə elementlərində yerləşir. Məhz onlarla istifadəçi məlumat daxil etməklə qarşılıqlı əlaqə qurur.

Forma elementləri

Düymə

Tag