HTML կոճակներ ձեւերի վրա

Օգտագործելով Ներածված տողի օգտագործման ձեւերը

HTML ձեւերը ձեր կայքի ինտերակտիվությունը ավելացնելու ամենատարածված եղանակներից մեկն են: Դուք կարող եք հարցեր տալ եւ ձեր ընթերցողներին պատասխանել պատասխաններ, լրացուցիչ տեղեկություններ տրամադրել տվյալների բազայից, ստեղծել խաղեր եւ այլն: Կան մի քանի HTML տարրեր, որոնք կարող եք օգտագործել ձեր ձեւերը կառուցելու համար: Եվ ձեր ձեւը կառուցելուց հետո, կան բազմաթիվ տարբեր եղանակներ, որոնք պետք է ներկայացնեն այդ տվյալները սերվերին կամ պարզապես սկսել գործողության գործողությունը:

Սրանք մի քանի եղանակներ կարող եք ներկայացնել ձեր ձեւերը.

INPUT տարրը

INPUT տարրը ձեւը ներկայացնելու ամենատարածված ձեւն է, այն ամենը, ինչ անում եք, ընտրում է տիպը (կոճակը, պատկերը կամ ներկայացնելը) եւ անհրաժեշտության դեպքում ավելացրեք որոշակի սցենարներ `ներկայացնելու ձեւի գործողություն:

տարրը կարելի է գրել հենց այդպես: Բայց եթե անեք, դուք տարբեր արդյունքներ կունենաք տարբեր բրաուզերներում: Բրաուզերների մեծ մասը դարձնում է կոճակ, որը ասում է «Ներկայացրեք», բայց Firefox- ն ստեղծում է «կոճակը», որը ասում է «Ներկայացրեք հարցումը»: Փոփոխելու համար ինչ կոճակը ասում է, պետք է ավելացնել հատկանիշ:

value = "Ներկայացրեք ձեւը">

Այս տարրը նման է գրել, բայց եթե մյուս բոլոր ատրիբուտները թողնեք, այն ամենը, որ ցուցադրվում է բրաուզերներում, դատարկ գորշ կոճակ է: Կոճակի տեքստը ավելացնելու համար օգտագործեք արժեքի հատկանիշը: Բայց այս կոճակը չի ներկայացնի ձեւը, եթե օգտագործեք JavaScript- ը:

onclick = "ներկայացնել ();">

Այն նման է կոճակի տիպին, որն անհրաժեշտ է սցենար ներկայացնել ձեւը: Բացառությամբ, տեքստային արժեքի փոխարեն, դուք պետք է ավելացնել պատկերային աղբյուրի URL- ն:

src = "submit.gif">

BUTTON տարրը

BUTTON- ի տարրը պահանջում է թե բացման տեքստ եւ փակման պիտակ: Երբ օգտագործեք այն, ցանկացած բովանդակություն, որը կցուցադրեք պիտակի մեջ, կցվում է կոճակին: Այնուհետեւ ակտիվացրեք կոճակը սցենարով:

Ներկայացրեք ձեւը

Կարող եք պատկերները ներդնել ձեր կոճակում կամ միավորել պատկերները եւ տեքստը `ավելի հետաքրքիր կոճակ ստեղծելու համար:

Ներկայացրեք ձեւը

Հրամանների տարրը

COMMAND տարրը նոր է HTML5- ով: Այն չի պահանջում օգտագործել FORM, սակայն այն կարող է հանդես գալ որպես ձեւի ներկայացման կոճակ: Այս տարրը թույլ է տալիս ստեղծել ավելի ինտերակտիվ էջեր, առանց ձեւաթղթեր պահանջելու, եթե դուք իսկապես անհրաժեշտ է ձեւեր: Եթե ​​ցանկանում եք, որ հրամանն ինչ-որ բան ասի, դուք գրեք տեղեկությունները պիտակի հատկանիշում:

label = "Ներկայացրեք ձեւը">

Եթե ​​ցանկանում եք, որ ձեր պատվերը ներկայացվի պատկերով, դուք օգտագործում եք պատկերակը հատկանիշը:

icon = "submit.gif">

Այս հոդվածը HTML Forms Tutorial- ի մասն է : Կարդացեք ամբողջական ձեռնարկով, սովորելու համար, թե ինչպես օգտագործել HTML ձեւերը:

HTML ձեւերը ունեն մի քանի տարբեր եղանակներ ներկայացնել, ինչպես նախորդ էջում սովորել եք: Այդ մեթոդներից երկուսը INPUT պիտակը եւ BUTTON պիտակը: Այս երկու տարրերից օգտվելու լավ հիմքեր կան:

INPUT տարրը

Տեգակը ձեւը ներկայացնելու ամենահեշտ ձեւն է: Այն ոչինչ չի պահանջում պիտակի սահմաններից դուրս, ոչ էլ արժեք: Երբ հաճախորդը կտտացնում է կոճակը, այն ինքնաբերաբար ներկայացվում է: Դուք չունեք որեւէ սցենարներ ավելացնելու համար, բրաուզերները գիտեն, որ ներկայացնել INPUT պիտակը, երբ ներկայացվում է ձեւը:

Խնդիրն այն է, որ այս կոճակը շատ տգեղ է եւ պարզ: Դուք պատկերներ չեք կարող ավելացնել: Դուք կարող եք այն ոճավորել այնպես, ինչպես ցանկացած այլ տարր, բայց այն դեռ կարող է զգալ տգեղ կոճակ:

Օգտագործեք INPUT մեթոդը, երբ ձեր ձեւը պետք է հասանելի լինի նույնիսկ JavaScript- ում անջատված բրաուզերներում:

BUTTON տարրը

BUTTON տարրը առաջարկում է ավելի շատ ընտրանքային ձեւեր: Դուք կարող եք որեւէ բան դնել BUTTON տարրի ներսում եւ դարձնել այն ներկայացնել կոճակը: Առավել հաճախ մարդիկ օգտագործում են նկարներ եւ տեքստեր: Բայց դուք կարող եք ստեղծել DIV եւ այդ ամբողջ բանը ներկայացնել կոճակը, եթե ցանկանում եք:

BUTTON տարրի ամենամեծ թերությունն այն է, որ այն ինքնաբերաբար չի ներկայացնում ձեւը: Դա նշանակում է, որ այն պետք է լինի որոշակի սցենար `այն ակտիվացնելու համար: Եվ այսպես, այն ավելի մատչելի է, քան INPUT- ի մեթոդը: Ցանկացած օգտվող, որը չունի JavaScript- ը, չի կարող ներկայացնել այն ձեւը, որը միայն BUTTON տարրը ներկայացնելու համար:

Օգտագործեք BUTTON մեթոդը ձեւերի վրա, որոնք ոչ կարեւոր են: Բացի այդ, սա մի ձեւով լրացուցիչ ներկայացման տարբերակներ ավելացնելու լավ միջոց է:

Այս հոդվածը HTML Forms Tutorial- ի մասն է: Կարդացեք այն ավելի շատ բան իմանալու համար, թե ինչպես օգտագործել HTML ձեւերը