Интерактив html маягтууд. HTML дэх маягтууд. Өгөгдмөл утга

Голыг нь авч үзвэл HTML шошгоБид ийм зүйлийг хөндөхгүй байх аргагүй чухал элементхэлбэрүүд шиг. Ихэнхдээ вэб хуудсууд санал хүсэлт шаарддаг. Жишээлбэл, сайт дээр санал асуулга бөглөх, бүртгүүлэх, зөвшөөрөл авах, сэтгэгдэл бичих гэх мэт. Эдгээр бүх тохиолдолд хэрэглэгч хуудсан дээрх тусгай хэсгүүдийг (маягтын талбарууд) бөглөж, дараа нь өгөгдлийг сервер рүү илгээдэг. Үүсгэхийн тулд санал хүсэлтхэлбэрүүдийг ашигладаг. Маягт нь фрагмент юм HTML баримт бичигхэрэглэгчийн оролтод зориулагдсан.

Зураг дээр боловсролын байгууллагын вэбсайт дээрх оюутны бүртгэлийн маягтыг харуулав.

Маягт үүсгэхийн тулд савыг ашигладаг

маягтаар илгээсэн өгөгдлийг боловсруулах сервер дээрх хуудсыг зааж өгдөг action атрибуттай.

Хамгийн энгийн хэлбэрийн бүтэц:


хэлбэрийн элементүүд ...

Маягт бүрийг бөглөсний дараа өгөгдлийг илгээх товчтой байх ёстой.

Товчлуурын бүтэц:

Тиймээс бараг бүх хэлбэрийн элементүүдийг бичихийн тулд шошгыг ашигладаг -тай төрлийн шинж чанар. Маягтаас бүх өгөгдлийг дахин тохируулах товчлуур үүсгэхийн тулд дараах бүтцийг ашиглана.

Үүсгэхийн тулд текст талбар(текст талбар) байна текст параметр. Үүнд дараах параметрүүдийг ашиглана: нэр – талбарын нэр; хэмжээ - тэмдэгт дэх талбарын хувьд; maxlength - талбар дахь тэмдэгтүүдийн хамгийн их боломжит тоо; утга - анхдагчаар маягт дээр харуулсан мэдээлэл

Хоёр текст талбар бүхий маягтын оруулгын жишээ:


Нэрээ оруулна уу:



Овог оруулна уу:





Маягтын үр дүнг зурагт үзүүлэв.

Хэрэв та текст талбарт оруулах шаардлагатай бол олон тоонымэдээлэл, жишээлбэл, тайлбарыг шошгыг ашиглан үүсгэсэн текст талбар (textarea) хэлбэрээр ашигладаг.

Текстийн талбар бүхий кодын үр дүнг зурагт үзүүлэв.


дараагийн элементмаягтууд нь танилцуулсан утгуудын багцаас сонголт хийх боломжийг олгодог жагсаалт юм. Шошго нь жагсаалтын маягт үүсгэх боломжийг танд олгоно

Хуудсыг ачаалах үед элементийг тодруулахын тулд шошгон дээр байх шаардлагатай

Сонгох ижил төстэй арга бол checkbox болон radiobutton хэлбэрийн элементүүд юм. Эдгээр элементүүдийн хоорондох ялгаа нь шалгах хайрцаг нь олон сонголт хийх боломжийг олгодог бөгөөд радио товчлуур нь зөвхөн нэг юм.

Шалгах хайрцаг ба радио товчлуурын оруулгын бүтэц:

текст

Радио товчлуур:

текст

Бүтэцэд заасан элементүүдэд шалгагдсан атрибут нь шалгах хайрцаг болон радио товчлуурыг тодруулахын тулд анхдагчаар ашиглагддаг. Шалгалтын хайрцаг, радио товчлуур, мөн HTML кодыг ашиглах жишээг зурагт үзүүлэв.

Өөр нэг маягтын элемент бол шошгоны төрлийн шинж чанарыг ашиглан тодорхойлсон товчлуур юм. товчлуурын утгатай:

Товчлуур үүсгэхэд заасан кодонд onclick параметр байдаг бөгөөд энэ нь дүрмээр бол програмчлалын хэл дээр энэ товчлуур дээр дарахад үйлдэл хийх кодыг зааж өгдөг.

Зурвасыг тусгай цонхонд харуулахын тулд javascript командыг aler ашигладаг. Жишээний үр дүнг зурагт үзүүлэв.

Товчлуурт зураг оруулахын тулд дараах жишээнд үзүүлсэн кодыг ашиглана уу.

Сайтуудыг бүртгүүлэх, нэвтрэх үед далд тест бүхий талбарыг одоор тэмдэглэдэг. Энэ бол нууц үгийн маягтын элемент юм:

Ихэнхдээ сайтад бүртгүүлэх нь хэд хэдэн хуудсанд хуваагддаг бөгөөд дараагийн хуудас бүр нь өмнөх мэдээллийг агуулсан байх ёстой. Илгээсэн мэдээллийг нуухад далд хэлбэрийн элементийг ашигладаг:

Нуугдсан маягтын элемент нь хөтчийн цонхонд үл үзэгдэх болно.

Серверт файл байршуулахын тулд маягтууд нь файлын элементтэй байдаг. Сервер рүү файл байршуулах жишээ кодыг доор харуулав.

Тиймээс, энэ сэдвээр янз бүрийн HTML хуудас үүсгэх маягтын элементүүдийг авч үзсэн бөгөөд энэ нь компьютер эсвэл сервер дээрх скрипт процессоруудын хамт бүрэн хэмжээний вэб програмуудыг хөгжүүлэх боломжийг олгодог.

Интернэтээр аялж байхдаа та бүртгэлийн маягт, нэвтрэх маягт, санал хүсэлтийн маягт гэх мэт олон янзын маягтуудтай танилцсан гэдэгт би итгэлтэй байна. HTML маягтуудс.

Үнэн хэрэгтээ маягт нь янз бүрийн оролтын элементүүдээс бүрддэг: текст талбарууд, текстийн талбарууд, радио товчлуурууд, радио товчлуурууд, товчлуурууд гэх мэт.

Мөн энэ нийтлэлээс та ямар ч зүйлийг хэрхэн бүтээх талаар сурах болно.

Эхлээд энгийн зүйл үүсгэ HTML хуудас, үүнд савыг нэмнэ (tag

) нь түүний агуулгыг төв рүү чиглүүлдэг. Та үүнийг амархан даван туулж чадна гэж найдаж байна.

Одоо маягтыг харцгаая. Маягт нь шошготой эхэлдэг

, тус тус нь хаалтын тэмдэгээр төгсдөг
. Энэ шошго нь маш их хүсч буй хэд хэдэн шинж чанартай байдаг. Гэхдээ эхлээд тагийн шинж чанаруудтай энгийн маягт үүсгэцгээе
Ингэснээр та тус бүрийн зорилгыг ойлгох болно:


Энд бид дараах шинж чанаруудтай маягтын тайлбарыг эхлүүлж байна.

1) "Атрибут" нэр". Энэ шинж чанарын утга нь нэрийг илэрхийлнэ HTML маягтууд. Энэ яагаад хэрэгтэй вэ гэсэн асуулт гарч ирнэ. Хариулт нь маш энгийн: хэрэв та нэг хэлбэр биш, хэд хэдэн хэлбэр ашигладаг бол нэг хэлбэрийг нөгөөгөөс нь ялгахын тулд өөр өөр нэр зааж өгөх ёстой. Маягт руу нэвтрэхийн тулд жишээлбэл, дамжуулан нэрс хэрэгтэй болно JavaScript. Би танд ашиглахыг зөвлөдөггүй бяцхан нууцыг хэлье, гэхдээ үнэнч шударга байдлын үүднээс би танд хэлэх болно. Үнэн хэрэгтээ хэлбэрийг нэргүйгээр амархан ялгаж чаддаг тул ерөнхийдөө маягтын нэр огт шаардлагагүй юм. Гэхдээ би ХҮЧТЭЙМаягт бүрийг юу хариуцаж байгааг ойлгоход хялбар байх тул маягтуудын нэрийг өгөхийг зөвлөж байна.

2) "Атрибут" үйлдэл". Энэ атрибутын утга нь маягтыг боловсруулах скрипт файлын замыг хариуцдаг. Өөрөөр хэлбэл, маягт руу өгөгдөл оруулах нь хангалтгүй, учир нь тэдгээрийг зохих ёсоор боловсруулах шаардлагатай хэвээр байгаа бөгөөд энэ нь зүгээр л юм. үүнийг хийх арга зохицуулагч файлмөн шинж чанарын утгад байна " үйлдэл".

3) "Атрибут" арга". Энэ нь маш алдартай хоёр утгын аль нэгийг агуулж болно: " бичлэг"ба" авах". Энэ шинж чанар нь илгээх аргыг тодорхойлдог. Би дэлгэрэнгүй ярихгүй, эхний арга нь далд өгөгдөл илгээх, хоёр дахь нь нээлттэй гэдгийг л хэлье. Үүнийг илүү тодорхой болгохын тулд хоёр үсрэлтийг харцгаая. хаягууд:

а) http://mysite.ru/scipt/request.php

б) http://mysite.ru/script/request.php?a=7&b=Майкл

Эхний тохиолдолд хэрэглэгч юу илгээж байгааг харахгүй байна (арга " бичлэг"), хоёрдугаарт тэр хувьсагчдын нэрс, тэдгээрийн утгыг хардаг (арга" авах"). Та өгүүллийн төгсгөлд маягтыг хоёр өөр аргыг ашиглан илгээж, тэдгээрийн ялгааг олж харах боломжтой. Гэхдээ одоохондоо би үүнийг хэлье. ИХилүү өргөн хэрэглэгддэг арга бичлэг", өөрөөр хэлбэл далд илгээлт.

Энэ бол маягтын өөрөө тайлбар байсан бөгөөд одоо бид маягтанд элементүүдийг нэмж эхэлж болно.

Бидний нэмэх хамгийн эхний зүйл бол текст талбар юм. Шошго бүхий текст талбар нэмж байна , эс тэгвээс энэ шошгоны шинж чанарыг ашиглан " төрөл"утгатай" текст". Мөн текст талбар үүсгэхийн өмнө энэ талбар гэж юу болохыг бичихийг зөвлөж байна, жишээ нь " Таны нэр". Шошго дотор

энэ мөрийг бичнэ үү:

Таны нэр:

Дахин хэлэхэд шинж чанаруудыг задалъя:

1) "Атрибут" төрөл" нь оролтын элементийн төрлийг хариуцна. Энэ тохиолдолд бид үүнийг ердийн текст талбар гэж заасан. Дараах элементүүдэд бид энэ атрибутын утгыг өөрчлөх болно.

2) "Атрибут" нэр" нь элементийн нэрийг хариуцдаг. Энд бид энэ талбарын нэрийг зааж өгсөн Нэр.

3) "Атрибут" үнэ цэнэ" нь энэ талбарын анхдагч утгыг хариуцна.

Тэдний хэлснээр зуун удаа сонссоноос нэг удаа харсан нь дээр, тиймээс чи бичээрэй ( Тэгээд зүгээр л бичээд хуулж болохгүй!) энэ текстийг засварлагч дээр байрлуулж, үр дүнг хөтөч дээрээс харна уу.

Одоо өөр ижил төстэй талбар үүсгэцгээе, гэхдээ энгийн тэмдэгтүүдийг оруулах биш, харин нууц үг оруулах. Өөрөөр хэлбэл, бүх зүйл ижил байх ёстой, гэхдээ зөвхөн текстийг ард нуусан байх ёстой од. Тиймээс дараагийн мөрөнд шилжинэ (tag
), дараах кодыг бичнэ үү.

Таны нууц үг:

Таны харж байгаагаар одоо шинж чанарын үнэ цэнэ " төрөл"байна" нууц үг". Үлдсэн шинж чанарууд нь ердийн текст талбартай адил байна.

Дараагийн элемент бол унадаг жагсаалт юм. Энэ нь арай илүү төвөгтэй бүтээгдсэн, учир нь энд зөвхөн унждаг жагсаалт үүсгэхийг зарлахаас гадна энэ жагсаалтад элементүүдийг нэмэх шаардлагатай болно. Дараах мөрөнд (цаашид би үүнийг дурдахгүй) дараах зүйлийг бичье HTML код.

Сонголтыг сонгоно уу:

Tag . "Атрибут" нэр" гэдэг нь ойлгомжтой, учир нь би үүнийг хэд хэдэн удаа тайлбарласан. Жагсаалтын элементүүдийг таг ашиглан үүсгэсэн . Аттрибутын утга " үнэ цэнэ"хувьсагч ямар утгатай болохыг илэрхийлнэ сонголт(жишээ нь, in JavaScript), өөрөөр хэлбэл аль аль нь сонголт = 1, эсвэл сонголт = 2, эсвэл сонголт = 3. Шошгоны тайлбар дууссаны дараа нэн даруй Хэрэглэгчийн харахыг доош унах жагсаалтад оруулна уу. Дахин хэлэхэд, хөтчөөс харах нь дээр бөгөөд бүх зүйл танд шууд тодорхой болно.

Одоо шошгыг ашиглан текст талбар нэмье

Энд бид өндөртэй текст талбарыг үүсгэж байна 10 мөр (атрибутын утга " эгнээ") ба өргөн 15 тэмдэгтүүд (атрибут утга " колс").

Энэ хос шошго дотор текстийг өгөгдмөл текст хэсэгт зааж өгсөн болно. Үнэндээ энд өөр хэлэх зүйл алга. Бид цаашаа.

Дараагийн элемент бол радио товчлуур юм. Радио товчлуур нь " тойрог", үүнээс зөвхөн нэгийг нь сонгох боломжтой. Радио товчлууруудыг ашиглан үүсгэсэн HTML шошго , эс тэгвээс утгыг ашиглан " радио"шинж чанар" төрөл". Ийм юм бичье HTML код:

Нэгийг сонгох:
Сонголт 1
Сонголт 2
Сонголт 3

Энд би шинж чанарт анхаарлаа хандуулах болно " нэр", учир нь нэр өгөхөөс гадна бас нэг маш чухал онцлогтой. Хэрэв та ҮГҮЙЭдгээр гурван радио товчлуурын нэрийг ижил болго, тэгвэл тэдгээр нь бие даасан болж, нэг дор хэд хэдэн сонголтыг сонгох боломжтой болно. Үүнийг батлахын тулд нэрээ сольж, хэд хэдэн сонголтыг нэг дор сонгохыг хичээгээрэй, тэгвэл та миний үгэнд шууд итгэх болно. Тиймээс нэг бүлэг радио товчлуурууд ижил шинж чанарын утгатай байх ёстой " нэр".attribute" үнэ цэнэ"хувьсагчийн утгыг илэрхийлнэ" сонголт радио(дахин жишээ нь, in JavaScript). Шошгоны тайлбарын дараа Хэрэглэгч харгалзах радио товчлуурын хажууд харагдах текст рүү очно.

Өөр нэг хэлбэрийн элемент нь радио товчлуурууд ( шалгах хайрцаг). Тэд шошгыг ашиглан дахин үүсгэгддэг . Дараах мөрүүдийг бичье.

Та манай дүрмийг зөвшөөрч байна:

Энд бүх зүйл ил тод байгаа гэж бодож байгаа тул тайлбарлахгүй. Энэ нь хөтөч дээр хэрхэн харагдахыг харахыг зөвлөж байна. Хэрэв шалгах нүдийг тэмдэглэсэн бол хувьсагчийн утга " гэж би хэлэх болно. нөхцөл" байх болно " тиймээ", хэрэв энэ нь зогсохгүй бол энэ хувьсагчийн утга нь "", өөрөөр хэлбэл хоосон мөр болно.

Өөр нэг элемент бол файл сонгох талбар юм. Мэдээжийн хэрэг, та серверт файл байршуулж байсан бөгөөд үүний тулд файлын нэр оруулах талбарыг ашиглах шаардлагатай болдог. Энд аль хэдийн уйтгартай таг ашиглан үүсгэсэн талбар байна . Ингээд бичье:

Байршуулах файлаа сонгоно уу:

Сайн байна уу, блог сайтын эрхэм уншигчид. Судалгааны үргэлжлэлд бид маягт, оролтын шошгоны шинж чанаруудыг () авч үзэх болно, үүний тусламжтайгаар та сайтад олон төрлийн маягт үүсгэж болно.

Тодорхой вэб нөөцийн сэдэв, агуулга ямар ч байсан, энэ нь нэг хэлбэрээр эсвэл өөр хэлбэрээр таарах магадлалтай: текст талбарууд, унждаг цэсүүд, янз бүрийн товчлуурууд эсвэл унтраалгууд. Дашрамд хэлэхэд, нэг хэвлэлд би хэлбэрийг төрөлжүүлэхэд тусалдаг элементүүдийн талаар аль хэдийн ярьсан.

Олон янзын боломжит хэлбэрийн практик зорилго нь юу вэ? Юуны өмнө тэд тусгайлан үүсгэсэн скрипт (хариуцагч) -аар дамжуулан цаашдын боловсруулалт хийхийн тулд сервер рүү хэрэглэгчийн оролтыг илгээхэд шаардлагатай.

HTML маягтууд - тэдгээр нь маягт болон оролтоор хэрхэн үүсдэг

Миний эхэнд хэлсэнчлэн ямар нэгэн вэб маягт, эсвэл бүр хэд хэдэн вэб маягт нэг дор байх ёстой. Вэб нөөц нь орчин үеийн шаардлагад нийцэж байгаа тул тэдгээр нь хэр чухал болохыг ойлгохын тулд маягт, оролтын шошго дээр суурилсан маягтуудыг ашигладаг гурван объектыг хурдан харахад хангалттай бөгөөд эдгээр нь нэг нэрээр эргэлзээ төрүүлэхгүй байх болно. нэг эсвэл өөр чиглэлийн төслийн хэрэгцээний талаар:

Жишээлбэл, хэрэв та санал хүсэлтийг бий болгох тухай нийтлэлийн холбоосыг дагаж мөрдвөл (бүх хэрэглэгчдэд сайтын удирдлага руу мессеж илгээх боломжийг олгоно) нээх маягттай HTML код л байна. ) ба хаах (

) хэсэг:


Энд маягт нь вэб маягтыг суулгаж эхлэхэд чухал үүрэг гүйцэтгэдэг. Энэ нь өөрөө вэб хуудсан дээрх хэсгийг харуулахгүй, харин бусад шошго агуулсан савны үүрэг гүйцэтгэдэг.

Манай тохиолдолд (дээрх дэлгэцийн зургийг үзнэ үү) эдгээрт хэд хэдэн орно оролт(энэ HTML таг нь нэг таг, өөрөөр хэлбэл хаах бүрэлдэхүүн хэсэггүй), түүнчлэн текст талбар, өөр өөр багц шинж чанаруудтай. Тэд тус бүр нь маягтанд орсон өөрийн элементийг тодорхойлдог.

16. авто фокус(параметр байхгүй) нь вэб хуудсыг ачаалмагц тухайн талбарт анхаарлаа төвлөрүүлдэг Boolean шинж чанар бөгөөд ингэснээр өгөгдөл дээр дарахгүйгээр оруулах боломжтой. Зөвхөн төрөл "далд" гэсэн оролтод хэрэглэх боломжгүй.

17. Идэвхгүй(утгагүй) - хэрэглэгчийн хувьд нэмсэн маягтын элементийг идэвхгүй болгодог. Ихэнх тохиолдолд нэвтрэх боломжгүй элементийг идэвхжүүлэх нөхцөлийг заасан скриптүүдтэй хамт ашигладаг.

18. Маягт- элементийг савны гадна талд байрлах үед хэлбэрт холбодог

. Холбохын тулд global id атрибутыг маягтын шошгонд нэмж, маягтын атрибутыг оролтын шошгонд нэмсэн бөгөөд тэдгээрийн утгууд нь ижил байна (жишээлбэл, id = "өгөгдөл" ба form = "өгөгдөл"). .

19. олон(параметр байхгүй) - багц олон сонголттой сонголтхэрэглэгчдэд зориулагдсан бөгөөд зөвхөн type="file" болон type="email"-тэй хамт хэрэглэгддэг.

Файл байршуулах талбарыг ашиглах тохиолдолд Ctrl эсвэл Shift товчийг ашиглан компьютерээс хэд хэдэн файлыг нэг дор сонгох боломжтой. Хэрэв имэйл хаяг оруулах талбар (type="email") гарч ирвэл имэйлийг таслалаар тусгаарлан оруулна.

20. Шаардлагатай(утга байхгүй) - хэрэглэгчийн заавал өгөгдөл оруулахыг идэвхжүүлдэг. Тиймээс, шаардлагатай талбарыг хоосон орхивол хөтөч вэб маягтыг илгээхийг хориглож, бөглөх шаардлагатай тухай зохих мессежийг харуулна.

Энэ шинж чанар нь график болон стандарт товчлуурууд (type="button | image"), түүнчлэн далд оруулах талбарт (төрөл="далд") ашиглагддаггүй.

21. хэмжээ— текстийн талбарын өргөнийг тэмдэгтээр тодорхойлно (зөвхөн "имэйл | нууц үг | хайлт | утас | текст | url" параметр бүхий төрлийн элементүүдэд тохиромжтой). Өгөгдмөл утга 20 тэмдэгт.

Оролтын шошгоны дараагийн дөрвөн шинж чанар (22-25) нь -тэй бараг ижил функцтэй боловч бүрэн гүйцэд байлгах үүднээс би тэдгээрийг товч дурдъя.

22. Хамгийн их урт- текст талбарыг бөглөхдөө оруулж болох тэмдэгтүүдийн дээд хязгаарт хязгаарлалт тавьдаг. Хэрэв энэ хязгаарыг давах гэж оролдвол цаашдын оролтыг хаах болно. Энэ шинж чанар нь зөвхөн type="email | нууц үг | хайлт | утас | текст | url" бүхий текстийн элементүүдэд хамаарна.

23. мин урт- Текстийн талбарт оруулах шаардлагатай тэмдэгтүүдийн хамгийн бага тоонд хязгаарлалт тавьдаг. Хэрэв цөөн тэмдэгт агуулсан өгөгдөл илгээх оролдлого гарвал маягтын агуулгыг бөглөх шаардлагатайг харуулсан богино мессеж гарч ирэх бөгөөд аль хэдийн оруулсан тэмдэгтүүдийн тоог харуулах болно. Ашиглалтын нөхцөл нь maxlength-тэй яг ижил байна.

24. орлуулагч- Та текст талбарт шууд зөвлөгөө (энэ нь параметрийн үүрэг гүйцэтгэх болно) оруулах боломжтой бөгөөд энэ нь хэрэглэгч тэмдэгт оруулж эхлэх үед алга болно. Зөвхөн параметрээр үүсгэгдсэн талбаруудад имэйл, нууц үг, хайлт, текст, утас, urlоролтын тагийн төрлийн шинж чанар.

25. Зөвхөн унших(параметр байхгүй) - Энэ талбарт өмнө нь оруулсан текст зөвхөн унших, зөвхөн хуулбарлах боломжтой гэдгийг заана. Энэ нь ихэвчлэн энэ маягтын элементийг идэвхжүүлэх нөхцөлийг тодорхойлсон скриптүүдтэй хамт хэрэглэгддэг.

Эцэст нь, янз бүрийн хэлбэрийн элементүүдийн функцийг нөхөх хэд хэдэн шинж чанарууд:

26. загвар- түүний үнэ цэнийн үүрэг нь тогтмол илэрхийлэлийг тусгасан бөгөөд үүний үндсэн дээр мэдээлэл оруулах дүрмийг тогтоодог. Үүний зэрэгцээ, хэрэглэгчдэд талбаруудыг бөглөхөд туслах тайлбар текст нэмэх параметр нь глобал гарчгийн шинж чанарыг нэмж оруулахыг зөвлөж байна. Загвар нь зөвхөн имэйл, нууц үг, хайлт, текст, утас, url элементүүдэд хамаарна. Нэг жишээ авч үзье. Хялбаршуулсан бүртгэлийн маягтын код энд байна (-тай):

Нэвтрэх

Нууц үг

Нэвтрэх

Нууц үг

Нэвтрэх талбарт (төрөл = "текст") ердийн илэрхийлэл (5,) нь латин тэмдэгт ашиглахыг илэрхийлдэг загварын утга гэж заасан бөгөөд дор хаяж таван тэмдэгт оруулах шаардлагатай.

Текстийн талбарт нууц үг (төрөл = "нууц үг") -ийг (8,) гэж тохируулсан бөгөөд энэ нь зөвхөн латин үсгээр ямар ч тохиолдолд (том ба жижиг үсэг), мөн тоогоор оруулахыг тодорхойлдог. тэмдэгтүүд наймаас багагүй байх ёстой.

Хэрэв заасан оролтын нөхцлийг зөрчсөн бол хөтөч өгөгдөл илгээхийг зөвшөөрөхгүй бөгөөд холбогдох анхааруулгыг харуулна.


27. src— "зураг" график товчлуурыг харуулах дүрс рүү хүрэх замыг (URL, түүний утга) тодорхойлно (дээрх оролтын төрлийн параметрийн хүснэгтийг үзнэ үү).

28. алхам- тоон утгыг сонгох боломжийг олгодог элементүүдийн алхамыг тохируулна (оролтын төрөл = "огноо | огноо-орон нутгийн | сар | тоо | муж | утас | цаг | долоо хоног.").

Энэ нь ямар ч бүхэл тоо эсвэл бутархай тоог параметр болгон авч болно. Өгөгдмөл алхам = "1". Төгсгөлийн оролтын мужийг тохируулахын тулд та дээр дурдсан min ба max шинж чанаруудыг дахин ашиглаж болно. Тодорхой болгохын тулд тестийн маягтанд 2 төрлийн = "тоо" элементийг оруулъя. Эхний тохируулсан алхамын хувьд = "2", хоёр дахь алхамын хувьд = "0,1":

0-ээс 1 хүртэлх утгыг оруулна уу:

-10-аас 10 хүртэлх утгыг оруулна уу:

0-ээс 1 хүртэлх утгыг оруулна уу:

29. үнэ цэнэ- зохицуулагч руу дамжуулах маягтын элементийн утгыг тохируулна. Нэр-параметрийн хосыг сервер рүү илгээдэг бөгөөд нэр нь оролтын тагны нэрийн шинж чанараар тодорхойлогддог ба параметр нь утгын шинж чанараар тодорхойлогддог. Үүний зэрэгцээ, маягтын янз бүрийн элементүүдийн хувьд үнэ цэнэ нь өөр өөр үүрэг гүйцэтгэх болно:

  • for type="button | reset | submit" - товчлуурууд дээрх текстийн шошгыг тохируулна;
  • for type="checkbox | radio | image" - сервер дээр өгөгдөл илгээх, боловсруулах үед шалгах хайрцаг, радио товчлуур эсвэл график товчлуур бүрийг тодорхойлдог;
  • type = "нууц үг | текст" хувьд - маягтыг ачаалсны дараа энэ талбарт урьдчилсан текстийг харуулах бөгөөд үүнийг хэрэглэгч өөрчлөх эсвэл бүрмөсөн устгах боломжтой;
  • for type = "file" (файл байршуулах) нь энэ элементэд нөлөөлөхгүй тул хамаарахгүй.

Дээрх сонголт бүрийн хэрэглээний жишээ:

CMS сонгох: WP Joomla

CMS сонгох: WP Joomla

Энд утгын шинж чанарын утгаэлемент тус бүрийн хувьд дараахь зүйлийг тодорхойлно: type="text" ("таны нэр") талбарт текстийн фрагментийг гаргаж, type="radio"-оор тохируулсан радио товчлууруудыг ("1" ба "2") тус бүрийг тодорхойлох ба товчлуур дээрх шошгыг идэвхжүүлдэг ("Илгээх").

Сайхан HTML маягт үүсгэх жишээ

Дараа нь би танд стандарт текст талбар, товчлуурыг бүрдүүлдэг өөр өөр утгатай оролтын төрлийн хослолуудыг багтаасан жишээ вэб маягтыг танилцуулахыг хичээх болно. зөвхөн хулганы шууд товшилтоор зогсохгүй текстэн дээр дарж болно.

Өвөрмөц дүр төрхийг бий болгохын тулд бие даасан маягтын бүрэлдэхүүн хэсгүүдийг тус бүрд нь дараах багцаар байрлуулсан болохыг анхаарна уу:

Буцах (хамгийн их өргөн: 350 пиксел; захын зай: 50 пиксел автомат 0; дэвсгэр: 20 пиксел; дэвсгэр: # f3ebe1; фонт-бүлэг: "Освальд", sans-serif;) .form-1, .form-2, .form-3 , .маягт-4 (дээрх:15px; хүрээ:4px давхар #909090) .маягт-1, .маягт-2, .маягт-3 (хязгаарын доод талд: байхгүй) .form-1 оролт (дэлгэц: блок; захын зай- доод:10px;өргөн:100%) .in (padding-left:40px) .input (өргөн:100%) ..png) no-repeat;background-position:10px 10px) ..png) no-repeat; background-position:10px 10px) .form-4 оролт (дэлгэц:блок; өндөр:50px; үсгийн хэмжээ:24px; өргөн:100%; курсор: заагч)

Үүний үр дүнд ийм вэб хэлбэр нь дараах хэлбэрийг авдаг.

Энэ маягтыг бий болгох талаар дэлгэрэнгүй мэдээллийг үзнэ үү энэ хуудас(Дашрамд хэлэхэд, та зөвхөн текст талбарт өгөгдөл оруулах замаар тэдгээрийн ажиллагааг шалгахаас гадна HTML код болон/эсвэл CSS шинж чанарыг засварлаж, гадаад төрхийг нь бүрэн эсвэл хэсэгчлэн өөрчлөх замаар вэб маягтыг туршиж үзэх боломжтой).

Миний зорилго бол сайт дээр янз бүрийн HTML маягтуудыг үүсгэхийн тулд төрөл шинж чанар, маягтын шошгоны өөр өөр утгыг ашиглах алгоритмыг танд танилцуулах явдал байв. Даалгавраа биелүүлсэн гэж найдаж байна. Ямар ч тохиолдолд энэ олон янзын сэдвээр санал бодлоо сэтгэгдэл дээр хуваалцаарай.

Мэдээжийн хэрэг, дараагийн хэвлэлүүдэд би гипертекст тэмдэглэгээний үндсэн шошгуудын тайлбарыг үргэлжлүүлэх болно, тиймээс блогын шинэчлэлтүүдийг имэйлээр бүртгүүлэхээ бүү мартаарай. Мөн холбоо барих маягт үүсгэх тухай Евгений Поповын өөр нэг хичээлийг нэгтгэхийг үзээрэй.

Ихэнхдээ вэб сайтуудаас та HTML маягтуудыг байрлуулсан хуудсуудыг олох боломжтой. Вэб маягт нь вэбсайтын зочдоос мэдээлэл авах тохиромжтой арга юм. Үүний нэг жишээ бол зочдод болон сайт хөгжүүлэгчдэд санал хүсэлт өгөх -, - юм. Маягт нь CMS-ийг боловсруулахдаа сайт хөгжүүлэгчдэд тохиромжтой бөгөөд энэ нь сайтын гол өмч болох хамаарлыг хадгалах боломжийг олгодог. Энэ нийтлэл нь HTML маягтуудыг үүсгэх, тэдгээрийг боловсруулах, дэлгэцэн дээрх маягтаас өгөгдлийг РНР скрипт рүү хэрхэн дамжуулах талаар голчлон өгүүлдэг.

1) Энгийн маягт үүсгэх

шошго

болон
маягтын эхлэл ба төгсгөлийг тохируулах. Маягт эхлэх шошго
хоёр шинж чанарыг агуулсан: үйлдэлболон арга. Үйлдлийн шинж чанар нь скриптийг боловсруулахад дуудагдах скриптийн URL-г агуулна. Атрибут аргахөтчид маягтыг илгээхийн тулд ямар төрлийн HTTP хүсэлтийг ашиглахыг хэлдэг; боломжит утгууд POSTболон АВАХ.

Сэтгэгдэл

POST болон GET аргуудын гол ялгаа нь мэдээлэл дамжуулах арга юм. GET аргын хувьд параметрүүдийг хаягийн мөрөнд дамжуулдаг, өөрөөр хэлбэл. үнэн хэрэгтээ хүсэлтийн HTTP толгой хэсэгт, POST аргын үед параметрүүд нь HTTP хүсэлтийн биетээр дамждаг бөгөөд хаягийн мөрөнд ямар ч байдлаар тусгагддаггүй.

$текст = nl2br($_POST["mytext"]);
?>

Даалгавар:Бид 2000-аас 2050 он хүртэлх жилүүдийн жагсаалт гаргахыг хүсч байна гэж бодъё.
Шийдэл:Маягтыг боловсруулахад SELECT элемент болон PHP скрипт бүхий HTML маягт үүсгэх шаардлагатай.

Хэлэлцүүлэг:

Хоёр файл үүсгэж эхэлцгээе: form.htmlболон action.php. Файлд form.htmlдоош унах жагсаалт бүхий html маягтыг агуулна. Үүнээс гадна жагсаалт дахь утгыг хоёр аргаар тодорхойлж болно.

I. Гараар өгөгдөл оруулах:

II. Давталтаар өгөгдөл оруулах:

Таны харж байгаагаар гогцоотой хоёр дахь жишээ нь илүү нягт юм. Маягт зохицуулагчийн скриптийг өгөх нь үнэ цэнэтэй зүйл биш гэж би бодож байна, учир нь энэ нь текст талбар шиг боловсруулагдсан, i.e. жагсаалтын утгуудыг супер дэлхийн массиваас авч болно $_POST.

Тодорхойлолт:

Сервер рүү файл илгээх HTML маягт үүсгэцгээе.




Энэ html хэлбэр нь элементтэй үзэх, энэ нь серверт байршуулах файлыг сонгох харилцах цонхыг нээнэ. Товчлуур дээр дарснаар "Файлыг шилжүүлэх", файлыг зохицуулагчийн скрипт рүү дамжуулна.

Дараа нь та скрипт боловсруулагч бичих хэрэгтэй action.php. Зохицуулагчийг бичихээсээ өмнө бид файлыг аль директорт хуулахаа шийдэх хэрэгтэй.

if(isset($_FILES [ "миний файл" ])) // Хэрэв файл байгаа бол
{
$каталог = "../зураг/" ; // Манай лавлах
хэрэв (is_dir ($каталог)) // Хэрэв тийм лавлах байгаа бол
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Түр файл
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // Файлын нэр
if(! copy ($myfile, $catalog )) echo "Файлыг хуулахад алдаа гарлаа". $миний файлын_нэр // Хэрэв файл хуулж чадаагүй бол
}
else mkdir("../зураг/"); // Хэрэв тийм лавлах байхгүй бол бид үүнийг үүсгэнэ
}
?>

Сэтгэгдэл

Хэрэв та хэрэглэгчдэд ямар нэгэн файлыг сервертээ байршуулна гэдэгт итгэж байгаа бол маш болгоомжтой байх хэрэгтэй. Халдагчид "муу" кодыг зураг эсвэл файл руу оруулаад сервер рүү илгээх боломжтой. Ийм тохиолдолд та файлуудыг татаж авахдаа хатуу хяналт тавих хэрэгтэй.

Энэ жишээсервер дээр сан үүсгэж, файлыг тухайн директор руу хуулж байгааг харуулж байна.

Би бас элементтэй жишээ үзүүлэхийг хүсч байна шалгах хайрцаг. Энэ элемент нь бусад элементүүдээс ялимгүй ялгаатай юм бол аль нэг элемент биш юм шалгах хайрцаг'a сонгогдоогүй бол супер дэлхийн хувьсагч болно $_POSTхоосон утгыг буцаана:


Цэнхэр
Хар
Цагаан

if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Хэрэв дор хаяж 1 зүйл сонгогдсон бол
цуурай "Утгыг сонгох";
?>

Tag

(англи хэлнээс. хэлбэр- хэлбэр)вэб хуудсан дээр маягт тохируулдаг.

Энэ маягт нь хэрэглэгч болон серверийн хооронд өгөгдөл солилцох зориулалттай. Маягтын хамрах хүрээ нь зөвхөн сервер рүү өгөгдөл илгээхээр хязгаарлагдахгүй бөгөөд үйлчлүүлэгчийн скриптийг ашиглан та маягтын аль ч элементэд хандаж, өөрчлөх, өөрийн үзэмжээр ашиглах боломжтой.

Баримт бичиг нь хэдэн ч маягт агуулж болох боловч серверт нэг удаад зөвхөн нэг маягт илгээх боломжтой. Ийм учраас маягтын өгөгдөл нь бие биенээсээ хамааралгүй байх ёстой.

Маягтыг серверт илгээхийн тулд Илгээх товчийг ашигладаг бөгөөд маягт доторх Enter товчийг дарснаар ижил зүйлийг хийж болно. Хэрэв маягт дээр Илгээх товчлуур байхгүй бол, Түлхүүрийг оруулна уухэрэглээг дуурайдаг.

Маягтыг серверт илгээх үед өгөгдлийн хяналтыг тухайн элементийн үйлдлийн шинж чанараар тодорхойлсон програм руу шилжүүлдэг. . Өмнө нь хөтөч нь мэдээллийг нэр=утга хос хэлбэрээр бэлтгэдэг бөгөөд нэр нь тухайн элементийн нэрийн шинж чанараар тодорхойлогддог. , мөн утгыг хэрэглэгч оруулах эсвэл анхдагч маягтын талбарт тохируулна. Хэрэв өгөгдөл илгээхэд GET аргыг ашигладаг бол хаягийн мөрөнд дараах хэлбэрийг авч болно.

Http://www.htmlbook.ru/handler.php?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Сонголтуудыг дараа нь жагсаав асуултын тэмдэг, серверийн програмын хаягийн дараа зааж, амперсанд (&)-аар тусгаарлана. Орос үсгийг арван зургаатын тоололд хөрвүүлдэг (хэлбэрээр %HH , HH нь энд байна hex код ASCII тэмдэгтийн утгын хувьд зайг нэмэх (+) тэмдэгээр солино.

Савны дотор хийхийг зөвшөөрдөг бусад элементүүдийг байрлуулах, харин маягт нь өөрөө вэб хуудсан дээр ямар ч байдлаар харагдахгүй, зөвхөн доторх элементүүд нь харагдах болно.

Синтакс

...

Хаалтын шошго шаардлагатай.

ВАЙ АРИА

дүрийн өгөгдмөл утга: хэлбэр

Зөвшөөрөгдсөн үүргийн үнэ цэнэ:

  • аль нь ч биш
  • танилцуулга
  • хайх

Атрибутууд

  • accept-charset - Сервер өгөгдлийг хүлээн авч, боловсруулах боломжтой кодчиллыг тохируулна.
  • үйлдэл - Маягтын өгөгдлийг боловсруулдаг програм эсвэл баримт бичгийн хаяг.
  • autocomplete - Автоматаар бөглөх маягтын талбаруудыг идэвхжүүлнэ.
  • enctype - Маягтын өгөгдлийг хэрхэн кодлодог.
  • арга - HTTP протоколын арга.
  • нэр - маягтын нэр.
  • novalidate - Хүчинтэй оролтын маягтын өгөгдлийн суурилуулсан баталгаажуулалтыг цуцална.
  • зорилтот - Хариуцагч буцаасан үр дүнг ачаалах цонх эсвэл хүрээний нэр.

хүлээн авах тэмдэгт

Сервер нь маягтын өгөгдлийг хүлээн авч, боловсруулах кодчиллыг тохируулна.

Синтакс

...

Үнэ цэнэ

Windows-1251, UTF-8 гэх мэт кодчилолын нэр.

Өгөгдмөл утга

Хуудасны кодчилол.

үйлдэл

Маягтын өгөгдлийг серверт илгээх үед тэдгээрт хандах хандагчийг заана. Ажиллагч болгон ашиглаж болно серверийн програмэсвэл сервер талын скрипт (Parser гэх мэт) агуулсан HTML баримт бичиг. Зохицуулагч нь маягтын өгөгдөл дээр өөрийн үйлдлүүдийг гүйцэтгэсний дараа шинэ HTML баримтыг буцаана.

Хэрвээ үйлдлийн шинж чанаралга, Одоогийн хуудасдахин ачаалж, бүх маягтын элементүүдийг үндсэн утга руу нь буцаана.

Синтакс

...

Үнэ цэнэ

Утга нь бүрэн буюу харьцангуй замсервер файл руу.

Өгөгдмөл утга

автоматаар гүйцээх

Маягтын талбарыг автоматаар бөглөхийг хянадаг. Тодорхой хэлбэрийн элементүүд дээр автоматаар гүйцээх шинж чанараар утгыг дарж болно.

Автоматаар гүйцэтгэгч нь таныг анх оруулахдаа бичсэн утгуудыг санаж, маягтын талбарт дахин бичихэд тэдгээрийг орлуулдаг хөтөчөөр бүтээгддэг. Энэ тохиолдолд хөтчийн тохиргоонд автоматаар бөглөх функцийг идэвхгүй болгож болох бөгөөд энэ тохиолдолд автоматаар гүйцээх шинж чанарыг ашиглан өөрчлөх боломжгүй.

Текстийн эхний үсгийг оруулахдаа өмнө нь хадгалсан утгуудын жагсаалт гарч ирэх бөгөөд үүнээс та шаардлагатай нэгийг нь сонгож болно.

Синтакс

...

Үнэ цэнэ

  • on - Маягтыг автоматаар бөглөхийг идэвхжүүлнэ.
  • унтраах - Автоматаар гүйцээх үйлдлийг идэвхгүй болгоно. Энэ утгыг ихэвчлэн хөтөч дээр чухал өгөгдөл (нууц үг, утасны дугаар) хадгалахаас урьдчилан сэргийлэх зорилгоор ашигладаг банкны картууд), түүнчлэн ховор ордог эсвэл өвөрмөц өгөгдөл (captcha).

Өгөгдмөл утга

enttype

Маягтын өгөгдлийг сервер рүү илгээх үед хэрхэн кодлохыг зааж өгнө. Ер нь, та enctype атрибутын утгыг тохируулах шаардлагагүй, өгөгдөл нь серверийн тал дээр маш сайн ойлгогддог. Гэсэн хэдий ч, хэрэв талбарыг файл илгээхэд ашигладаг бол (оролтын төрөл = "файл") бол enctype шинж чанарыг multipart/form-data гэж тодорхойлох ёстой.

Синтакс

...

Үнэ цэнэ

  • application/x-www-form-urlencoded - + гэсэн зайны оронд орос үсэг шиг тэмдэгтүүдийг кодчилдог. арван зургаатын тоо(жишээлбэл, Анягийн оронд %D0%90%D0%BD%D1%8F).
  • multipart/form-data - Өгөгдөл кодлогдоогүй. Энэ утгыг файл байршуулах үед ашигладаг.
  • text/plain - Хоосон зайг +-р сольж, үсэг болон бусад тэмдэгтүүдийг кодлодоггүй.

Өгөгдмөл утга

application/x-www-form-urlencoded

арга

Аргын шинж чанар нь серверт хүсэлтийн аргыг хэлдэг.

Синтакс

...

Үнэ цэнэ

Аргын атрибутын утга нь том жижиг жижиг жижиг хэмжээтэй байна. Хоёр арга байдаг - авах ба нийтлэх .

  • авах - Энэ арга нь хамгийн түгээмэл аргуудын нэг бөгөөд шаардлагатай мэдээллийг олж авах, өгөгдөл дамжуулахад зориулагдсан хаягийн мөр. Энэ тохиолдолд асуултын тэмдгийн ард хаяг дээр нэр=утга гэсэн хосыг хавсаргаж, тэмдэгт (& тэмдэг)-ээр тусгаарлана. Get аргыг ашиглахад тав тухтай байдал нь бүх параметр бүхий хаягийг дахин дахин ашиглах, жишээлбэл, хөтчийн хавчуургад хадгалах, мөн хаягийн мөрөнд параметрийн утгыг өөрчлөх зэрэгт оршино.
  • дараах шуудангийн аргахөтчийн хүсэлтээр сервер рүү өгөгдөл илгээдэг. Энэ нь танд илгээх боломжийг олгоно их хэмжээнийбайгаа өгөгдөл арга авахУчир нь нийтлэлд 4к хязгаар байхгүй. Их хэмжээнийөгөгдлийг форумд ашигладаг, шуудангийн үйлчилгээ, мэдээллийн санг дүүргэх, файл илгээх үед гэх мэт.

Өгөгдмөл утга

нэр

тодорхойлдог өвөрмөц нэрхэлбэрүүд. Дүрмээр бол маягтын нэрийг скриптээр дамжуулан түүний элементүүдэд хандахад ашигладаг.

Синтакс

...

Үнэ цэнэ

Нэр нь тоо, үсэг зэрэг тэмдэгтүүдийн багц юм. JavaScript нь жижиг жижиг жижиг том үсгийн мэдрэмжтэй тул скриптээр дамжуулан маягтыг нэрээр нь авч үзэхдээ name атрибуттай ижил үсгийн алдааг ашиглана уу.

Өгөгдмөл утга

шинэчлэн батлах

Хэрэглэгчийн оруулсан өгөгдлийн зөв эсэхийг шалгахын тулд оруулсан баталгаажуулалтыг цуцална. Энэ шалгалтыг серверт маягт илгээх үед хөтөч автоматаар хийгддэг бөгөөд талбаруудад тохиолддог , , эсвэл загвар эсвэл шаардлагатай шинж чанар байгаа бол.

Синтакс

...

Үнэ цэнэ

Өгөгдмөл утга

Анхдагч байдлаар, энэ шинж чанар идэвхгүй байна.

зорилтот

Маягт боловсруулагч өгөгдлийг хүлээн авсны дараа үр дүнг HTML баримт болгон буцаана. Та эцсийн вэб хуудсыг ачаалах хүрээг тодорхойлж болно. Үүний тулд үүнийг ашигладаг зорилтот шинж чанар, фрэймийн нэрийг утга болгон тэмдэглэнэ. Хэрэв зорилтыг тавиагүй бол буцах үр дүнг одоогийн таб дээр харуулна.

Синтакс

...

Үнэ цэнэ

Утга нь хүрээний нэр, атрибутаар тодорхойлсонэлементийн нэр