Оқиға

Css пішінін жасау. HTML пішіндерін жасау

Негізгі HTML тегтерін қарастыра отырып, біз пішіндер сияқты маңызды элементке тоқталмаймыз. Көбінесе веб-беттер кері байланысты қажет етеді. Мысалы, сайтта сауалнама толтыру, тіркелу, авторизация, түсініктемелер және т.б. Барлық осы жағдайларда пайдаланушы беттегі арнайы аймақтарды (форма өрістерін) толтырады, содан кейін деректер серверге жіберіледі. Пішіндер кері байланыс жасау үшін қолданылады. Пішін - бұл фрагмент HTML құжатыпайдаланушы енгізуі үшін.

Суретте оқу орнының сайтындағы студенттерді тіркеу формасы көрсетілген.

Пішінді жасау үшін контейнер қолданылады

пішінмен жіберілген деректерді өңдейтін сервердегі бетті көрсететін әрекет төлсипатымен.

Қарапайым форманың құрылымы:

пішін элементтері...

Әрбір пішінде пішін толтырылғаннан кейін деректерді жіберу үшін жіберу түймесі болуы керек.

Түйме құрылымы:

Сонымен, барлық дерлік пішін элементтерін жазу үшін тег қолданылады type атрибуты арқылы. Пішіндерден барлық деректерді қалпына келтіретін түймені жасау үшін келесі құрылым пайдаланылады:

Мәтіндік өрісті (мәтіндік өріс) құру үшін мәтіндік параметр бар. Ол үшін келесі параметрлер пайдаланылады: name – өріс атауы; өлшем – символдардағы өріс үшін; maxlength – өрістегі символдардың максималды мүмкін саны; мән - әдепкі бойынша пішінде көрсетілетін ақпарат

Екі мәтін өрісі бар пішін жазбасының мысалы:

Пішіннің нәтижесі суретте көрсетілген.

Мәтін өрісіне енгізу қажет болса көп саныақпарат, мысалы, түсініктеме мәтіндік аймақ (textarea) түрінде пайдаланылады, ол тег арқылы жасалады келесі атрибуттармен: name – аймақ атауы; cols - аймақ бағандарының саны; rows - жолдар саны; орау - қорды орау тәсілі (on - орау сызықтары, өшіру - сызықтарды орамаңыз).Жоғарыдағы кодқа мәтіндік аймақ өрісін қосамыз:Пікір: <textarea name="area" cols=”25” rows=”5” wrap=”on”>

Мәтін аймағы бар кодтың нәтижесі суретте көрсетілген.

Пішіндердің келесі элементі берілген мәндер жиынынан таңдау жасауға мүмкіндік беретін тізімдер болып табылады. Тегтер тізім пішінін жасауға мүмкіндік береді

Бет жүктелген кезде элемент ерекшеленуі үшін бұл тегте қажет

Ұқсас таңдау әдісі құсбелгі мен радиобатырма пішін элементтері болып табылады. Бұл элементтердің айырмашылығы мынада: құсбелгі бірнеше таңдау жасауға мүмкіндік береді, ал радио түймесі жалғыз.

Құсбелгі мен радио түйме жазбасының құрылымы:

мәтін

Радио түймесі:

мәтін

Құрылымда көрсетілген элементтерде құсбелгі мен радио түймені бөлектеу үшін белгіленген атрибут әдепкі бойынша пайдаланылады. Құсбелгіні, радио түймені, сондай-ақ HTML кодын пайдалану мысалы суретте көрсетілген.

Басқа пішін элементі - тегтің type атрибуты арқылы көрсетілген түйме. түйме мәнімен:

Түймешік жасау үшін көрсетілген кодта onclick параметрі бар, ол әдетте осы түймені басқан кезде әрекетті орындау үшін бағдарламалау тілінде кодты көрсетеді:

Хабарламаны арнайы терезеде көрсету үшін javascript командасы, aler пайдаланылады. Мысалдың нәтижесі суретте көрсетілген.

Түймеге сурет кірістіру үшін келесі мысалда көрсетілген кодты пайдаланыңыз:

Сайттарды тіркеу және енгізу кезінде жұлдызша ретінде көрсетілетін жасырын тесті бар өріс пайдаланылады. Бұл құпия сөз пішінінің элементі:

Көбінесе сайтта тіркелу бірнеше беттерге бөлінеді және әрбір келесіде алдыңғысынан ақпарат болуы керек. Жасырын пішін элементі жіберілген ақпаратты жасыру үшін пайдаланылады:

Жасырын пішін элементі браузер терезесінде көрінбейтін болады.

Файлдарды серверге жүктеп салу үшін пішіндерде файл элементі болады. Файлдарды серверге жүктеп салуға арналған мысал коды төменде көрсетілген:

Сонымен, бұл тақырыпта компьютердегі немесе сервердегі сценарий процессорларымен бірге толыққанды веб-қосымшаларды әзірлеуге мүмкіндік беретін әртүрлі HTML беттерін құру үшін пішін элементтері қарастырылды.

Пішіндерді Интернетте әрбір дерлік сайттан табуға болады. Мысалы, сайтқа логин мен парольді енгізген кезде деректер пішіндер арқылы толтырылып, серверге жіберіледі. Сондай-ақ, әртүрлі сауалнамалар пішіннің мысалы болып табылады.

Тег синтаксисі

Тег

пішімнен алынған ақпарат өңдеуге жіберілетін сценарийдің мекенжайы (URL) тағайындалған өте маңызды атрибут әрекеті бар. Біз деректер жіберілгеннен кейін не болатынын егжей-тегжейлі қарастырмаймыз, өйткені бұл мәселелер html арқылы емес, PHP-дегі GET және POST әдістерімен шешілген.

Мысал 1. Түймелері бар html пішіні

Бұл түймелер болады:
бір түйме
Екінші түйме
Үшінші түйме
Және бұл мәтіндік өріс болады. Мысалы, мұнда сіз логинді енгізе аласыз

Және бұл үлкен мәтіндік өріс болады. Мысалы, мұнда сіз өзіңіз туралы ақпаратты енгізе аласыз

Жоғарыда айтылғандардың барлығынан кейін OK түймесі пайда болады.

OK түймесін басқаннан кейін бет жай ғана жаңартылады, өйткені. біз әрекет параметрін жазбадық

Беттегі келесіге түрлендіреді:

Мысалы, түсіндірмелер

action="" - деректерді өңдеу бір бетте болатынын көрсетеді.
- type="radio" атрибуты осы кодтан кейінгі мәтінді таңдау түймесі ретінде көрсетуді айтады. Бұл тегтегі атрибут атауы мен мәні қазір біз үшін шағын рөл атқарады, өйткені біз қазір php тілін үйренбейміз (PHP сабақтарын қараңыз).
- type="text" атрибуты оның мәтіндік өріс болатынын көрсетеді. Мұнда екі маңызды атрибут бар: атау (php үшін) және мән (әдепкі мән).
- type="textarea" атрибуты оның үлкен мәтіндік өріс болатынын көрсетеді. Алдыңғы жағдайдан жалғыз айырмашылығы - ол мәтіннің үлкен көлемін жазуға мүмкіндік береді.
- type="submit" атрибуты бұл түйме екенін көрсетеді. Мән төлсипатында түймеде жазылатын нәрсе бар.

Барлық осы элементтер туралы толығырақ 15-сабақтан оқи аласыз: элементтерді тег

, мұнда радио түймелері, тізімдер, құсбелгілер, мәтіндік өрістер, түймелер қарастырылады.

Енді тегтің барлық атрибуттарын егжей-тегжейлі қарастырайық. .

Тег атрибуттары мен қасиеттері

1. Атрибут accept-charset = "Чарсет"- сервер пішін деректерін қабылдай алатын және өңдей алатын кодтауды анықтайды. Ол әртүрлі мәндерді қабылдай алады, мысалы, CP1251, UTF-8 және т.б.

2. Атрибут әрекеті="URL" - пішіннен жіберілген деректерді өңдейтін сценарийдің мекенжайы. Бұл мәнді бос қалдырсаңыз, деректер пішін орналасқан құжатта өңделеді.

3. Атрибут автотолтыру="қосу/өшіру" - пішінді автотолтыруды орнатады немесе өшіреді. Ол екі мәнді қабылдай алады:

қосулы - автотолтыруды қосу;
өшіру - автотолтыруды өшіру;

4. Enctype="параметр" атрибуты - мәліметтерді кодтау әдісін көрсетеді. Ол келесі мәндерді қабылдай алады:

application/x-www-form-urlencoded- бос орындардың орнына + қойылады, орыс әріптері сияқты таңбалар он алтылық мәндері арқылы кодталады
multipart/form-data - деректер кодталмаған
мәтін/жазық - бос орындар + белгісімен ауыстырылады, әріптер және басқа таңбалар кодталмайды.

5. Attribute method="POST/GET" - жіберу әдісін орнатады. Ол екі мәнді қабылдай алады:

GET - деректерді жіберу мекенжай жолағы(деректерді жіберу көлеміне шектеу бар)
POST - шолғыш сұрауында деректерді серверге жібереді (деректердің үлкен көлемін жібере алады, себебі дыбыс көлеміне шектеу жоқ)

6. Атрибут аты=атрибут – форманың атын белгілейді. Белгілі бір пішінге сценарий арқылы қол жеткізуге болатын бірнеше пішін болған кезде жиі пайдаланылады.

7. Novalidate төлсипаты – дұрыс енгізу үшін пішін деректерінің кірістірілген тексеруінен бас тартады.

8. target="parameter" атрибуты - өңдеуші қайтарылған нәтижені жүктейтін терезенің немесе жақтаудың аты. Ол келесі мәндерді қабылдай алады:

_blank - бетті браузердің жаңа терезесіне жүктейді
_self - ағымдағы терезеге бетті жүктейді
_parent - бетті негізгі жақтауға жүктейді
_top - барлық кадрларды болдырмайды және бетті браузердің толық терезесінде жүктейді

Құрметті оқырман, енді сіз html пішін тегі туралы көбірек білдіңіз. Енді келесі сабаққа өтуге кеңес беремін.

Қайырлы күн, веб-әзірлеуді ұнататындар және өз веб-сайттарын жасағысы келетіндер. Бұған дейін менің барлық жарияланымдарым тілдің негізгі элементтеріне, әртүрлі мазмұндық объектілерді қалай құруға, оларды пішімдеуге, құрылымдауға және т.б. Алдыңғы тақырыптарды меңгере отырып, сіз қазірдің өзінде өте жақсы сайт жасай аласыз. Дегенмен, бүгінгі тақырып: «html-де пішіндерді құру» болмаса, ол толық болмас еді.

Тілдің бұл бөлімі өте маңызды. Сондықтан оны зерттеуге ерекше назар аударыңыз, әйтпесе сіз жасаған веб-ресурс өндіріске шығарылмайды. Осылайша, мақаланы оқығаннан кейін сіз пішіндерді не үшін пайдалану керектігін, олар қандай тегтермен жасалғанын білесіз, сонымен қатар нақты мысалдарды іс жүзінде қолдана аласыз. Бастайық!

Пішін дегеніміз не және ол қалай жұмыс істейді

Пішін- бұл сервер мен пайдаланушы арасында ақпараттық деректер алмасуға арналған ең маңызды объектілердің бірі.

Қарапайым сөзбен айтқанда, егер сіз сайтта өнімдерге тапсырыс беру, веб-ресурста тіркелуді сұрау және тіркелгілермен жұмыс істеу немесе тұтынушыларды ұсыну мүмкіндігі бар интернет-дүкен құрғыңыз келсе кері байланыскомпания менеджерлерімен, содан кейін пішінсіз жасай алмайсыз.

Пішін html тілінің арнайы элементі арқылы орнатылады .

Коды бар құжатта бірнеше тегтік мәлімдемелер болуы мүмкін екенін ескеріңіз , алайда деректерді өңдеу үшін серверге тек бір сұрау жіберуге болады. Сондықтан пайдаланушы осы үшін сақталған өрістерге енгізетін және әртүрлі пішіндерге сілтеме жасайтын ақпарат тәуелді болмауы керек. Сондай-ақ, пішіндерді бір-біріне салуға рұқсат етілмейді.

Шыдамсыз және код көрінісіне жылдам қарауға ынталы адамдар үшін мен түймесі бар пароль мәтіндік өрісі бар панельді пайдаланудың қарапайым мысалын қостым:

1 2 3 4 5 6 7 8 9 10 11 12

Мысал

Бұл шағын бағдарламада не және қалай әрекеттесетіні қазір түсініксіз болуы мүмкін, бірақ мен бүкіл мақаланы оқығаннан кейін сіз бірнеше есе қиын қосымшаларды жасай алатыныңызға кепілдік беремін.

Деректерді сервер жағына жіберу

Терілген (немесе таңдалған) ақпаратты диалогтық терезеде жіберу үшін стандартты механизмді пайдалану керек - Жіберу түймесі.

Бұл әдістің коды келесідей көрінеді:

Ұсынылған жолды іске қосқан кезде «Жіберу» жазуы бар түйме пайда болады.

Деректерді сервер жағына жіберудің тағы бір жолы тілқатысу терезесіндегі Enter пернесін басу болып табылады.

Көрсетілген ақпаратты жіберуді растағаннан кейін ол серверге бірден жіберілмейді. Біріншіден, ол «аты = мән» пішініне әкелетін браузер арқылы өңделеді.

Атрибут параметрі атқа жауап береді түрітег , ал мән үшін – пайдаланушы енгізген деректер. Әрі қарай түрлендірілген жол көбінесе атрибутта орнатылатын өңдеушіге беріледі әрекетэлемент

Әрекет параметрінің өзі талап етілмейді, ал кейбір жағдайларда ол мүлдем қажет емес. Мысалы, егер сайт беті жазылса php көмегіменнемесе js, содан кейін өңдеу орындалады ағымдағы бетжәне сілтемелер қажет емес.

Сайт жұмысының толық бейнесін жақсырақ түсіну үшін серверде деректермен жұмыс басқа тілдерді қолдана отырып орындалғанын қосқым келеді. Осылайша, сервер тілдері: Python, php, C тәрізді тілдер (C#, C, т.б.), Java және т.б.

Енді мен тоқтап, элемент туралы көбірек айтқым келеді . Түсіндірсеңіз қарапайым тіл, содан кейін мәтіндік өрістерді, радио түймелерді, әртүрлі түймелерді, жасырын өрістерді, құсбелгілерді және басқа объектілерді құру үшін қажет.

Тегті жұптастыру міндетті емес , дегенмен, пайдаланушы жазбаларын өңдеу немесе оларды, мысалы, дерекқорға енгізу қажет болса, онда сіз контейнерсіз жасай алмайсыз.

Бұл тіл элементінің негізгі атрибуттары гипермәтінді белгілеумыналар:

Мәтін- мәтіндік өріс жасайды;
Жіберу– серверге мәліметтерді жіберу батырмасын жасайды;
Сурет- суреті бар түймеге жауапты;
қалпына келтіру– пішінді тазалау батырмасын орнатады;
Құпия сөз– парольдер үшін арнайы мәтіндік өрісті орнатады;
құсбелгісін қойыңыз– жалаушалары бар алқаптарға жауапты;
Радио– бір элемент таңдауы бар өрістерге жауап береді;
түймесі- түймені жасайды;
Жасырын– жасырын өрістер үшін пайдаланылады;
Файл– файлдарды жіберуге жауапты өрісті орнатады.

Ақпаратты тасымалдау әдістері

Пайдаланушы деректерін серверге жіберудің 2 жолы бар: Алужәне Пост. Бұл әдістер бірдей әрекетті орындайды, бірақ олар бір-бірінен айтарлықтай ерекшеленеді. Сондықтан олардың кез келгенін көрсетпес бұрын, олардың ерекшеліктерімен танысайық.

	Пост	Алу
Жіберілетін құжаттардың көлемі	Сервер жағымен шектелген.	Ең көбі - 4 КБ.
Жіберілген ақпаратты көрсету жолы	Браузер кеңейтімдері немесе басқа арнайы бағдарламалық өнімдер арқылы қаралған кезде ғана қолжетімді.	Барлығына бірден қол жетімді.
Бетбелгілерді пайдалану	Сұраулар қайталанбайтындықтан бетбелгі қою опциясы жоқ (барлық беттер бір мекенжайға сілтеме жасайды).	Сұраныс бар кез келген бетке бетбелгі қоюға және біраз уақыттан кейін оған өтуге болады.
кэштеу	Алдыңғы абзац негізінде барлық сұраулар бір бетте.	Әрбір бетті бөлек кэштеуге болады.
мақсаты	Қайта жіберу үшін қолданылады үлкен файлдар(кітаптар, суреттер, бейнелер және т.б.), хабарламалар, пікірлер.	Веб-ресурста сұралған мәндерді іздеу немесе қысқа мәтіндік хабарламаларды жіберу үшін тамаша.

Шолғышпен жұмыс істеу үшін екі деректерді беру әдісінің қайсысы элементте екенін көрсету үшін берілген параметрді пайдаланыңыз әдіс(Мысалға, әдіс = "жазба").

Екінші мысалды қарастырайық. Жеке деректеріңізді (аты-жөні, туған күні) енгізіп, пароль ойлап табу керек пішінді жасайық. Мұның бәрі әдіс арқылы серверге жіберілгеннен кейін Пост.

POST әдісі

Жеке деректеріңізді енгізіңіз!

Мысалы, күнді енгізу үшін параметрлердің әрқайсысының (күн, ай және жыл) санына арналған қосқыштар, сондай-ақ ыңғайлы болу үшін күнтізбенің өзі бар ашылмалы панель бар.

Тіркеу тақтасын құру

Негізгі тегтер мен атрибуттар қамтылды. Сондықтан CSS мәнерін белгілеу және енгізуді тексеру арқылы толыққанды тіркеу формасын жасау уақыты келді. Әрине, біз сервердің олармен жұмыс істейтінін көре алмаймыз, бірақ дизайн мен маңызды мәліметтерді береміз.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

тіркеу

Мен сізге бұл бағдарлама кодын .html кеңейтімі және utf-8 кодтауы бар құжатта сақтауды және соңғысын браузер терезесінде ашуды ұсынамын. Тіркелу үшін оның барлық даңқ тақтасында пайда болғанға дейін атын, тегін, электрондық поштасын және парольді қайталай отырып енгізу өрістері бар. Бет басталған кезде курсор бірден бірінші мәтін жолағында орналасатынына назар аударыңыз. Бұл техникаға атрибут арқылы қол жеткізіледі автофокус.

Баршаңызға қайырлы күн. Алексей Гулынин байланыста. Соңғы мақалада біз талқыладық веб-сайтты кодтау мәселесі. Бұл мақалада мен бұл туралы айтқым келеді HTML тілінде пішіндерді құру. Менің ойымша, бұл HTML тіліндегі ең маңызды тақырып. Ұстазымның сөзі есімде ағылшын тілі. Ол егер сіз get етістігінің барлық сөз формаларының мағынасын білсеңіз, ағылшын тілінде тек солардың көмегімен ғана өзіңізді түсіндіре алатыныңызды айтты. Бұл HTML тіліндегі пішіндермен бірдей. Пішіндерді білсеңіз, HTML-ді жақсы білесіз. Енді, бәлкім, html пішіндері жоқ сайттар іс жүзінде жоқ. Пішіндер барлық жерде қолданылады: тіркеу, авторизация, жазылым, қонақтар кітабы, форум, өз қозғалтқышыңызды жасау кезінде және мүлдем барлық жерде. Бұл пост үлкен болады, сондықтан дайын болыңыз. Пішінді бірден мысалмен үйренуді бастайық:

HTML пішіндерін жасау

Бір қарағанда дірілдейді. Шындығында, мұнда бәрі қарапайым, оны баяу анықтайық:

Пішін құру-ден бастаңыз кілт сөз

. Тег

бірнеше атрибуттары бар. Name атрибуты пішіннің атын көрсетеді (бұл пішінді өңдеу үшін қажет, мысалы Javascript). Сіз, әрине, атауды көрсете алмайсыз, бірақ мен мұны істеуді ұсынамын. Әрекет атрибуты пішінді өңдейтін сценарийдің атын көрсетеді (әдетте PHP сценарийі) және ол мына әрекетке ұқсайды = "request.php" . Біздің жағдайда біз пішінді өңдемейміз. Әдіс төлсипаты деректерді қалай тасымалдайтынымызды анықтайды: ашық ( алу ) немесе жасырын ( жариялау ). Бірден осы екі түрлі атрибуттары бар шолғыш жолында көрсетілетін нәрсенің мысалы:

1) Пост әдісін қолданатын болсақ: mysite.ru/request.php .
2) get әдісін қолдансақ: mysite.ru/request.php?myname="Alex"&familia="Гулинин".
Менің ойымша, айырмашылықтар анық.

Пішін элементтері:

1) Сынақ өрісі. Мәтіндік өріс тегтің көмегімен жасалады , сондай-ақ пішіннің барлық элементтері. type="text" атрибуты мәтін өрісін құруға жауап береді. Name төлсипаты барлық пішін элементтері сияқты атау болып табылады. Мән төлсипаты әдепкі мән болып табылады.

2) Құпия сөз өрісі. Бірдей тегті пайдаланып орнатыңыз type="password" атрибутымен.

3) Мәтін аймағы. Тегті пайдаланып орнату . Бұл жұптық тег, мәтін аймағы тегпен жабылуы керек. Бұл элементтің бірнеше атрибуттары бар. Сондай-ақ атау төлсипатын орнатуға болады. rows атрибуты жолдар санына, cols атрибуты бағандар санына жауап береді. Қазіргі браузерлермәтінді енгізуді жеңілдету үшін мәтін аймағын кеңейте алады. Жолдар мен cols атрибуттары, былайша айтқанда, пішінді қысуға болатын ең аз мәндер болып табылады (бастапқыда, бет жүктелген кезде, мәтін аймағында жолдар мен колс атрибуттарымен көрсетілген өлшемдер болады).

4) Радио түймелер. Радио түймелердің мағынасы бірнеше мәннен бір мәнді таңдау болып табылады. Радио түймелері тегтің көмегімен де жасалады type="radio" атрибутымен. Мән төлсипаты радио түймеге сәйкес мәнді көрсетеді. Назарларыңызды мына жайтқа аударғым келеді: біздің мысалда барлық 3 түйменің атрибут мәні бірдей. Егер олардың атау төлсипаты үшін басқа мәні болса, олардың барлығын басуға болады. Тиісінше, оларды дұрыс өңдеу мүмкін болмайды. Белгіленген атрибут (оның мәні жоқ) әдепкі бойынша қай радио түймешік таңдалатынын көрсетеді.

5) Құсбелгілер. Радио түймелерден айырмашылығы, барлық құсбелгілерді басуға болады. Мысал теріп, өзіңіз көріңіз. Тегпен жасалған type="checkbox" атрибутымен. Басқа атрибуттардың мағынасы радио түймелерімен бірдей. Тек айта аламын, егер біз барлық құсбелгілерді алып тастасақ, біз жіберілеміз бос мән, яғни. біздің жағдайда бұл mycheck="" болады.

6) Ашылмалы тізім. Ашылмалы тізім тегтің көмегімен жасалады . Бұл дизайнда тегті де пайдалану керек

7) Файлды жүктеп салу өрісі. Әрине, сіз файлды бірнеше рет жүктеп салып, жібердіңіз, мысалы, профиліңізге аватарды орнату кезінде. Мұндай элемент тегтің көмегімен жүзеге асырылады type="file" атрибутымен. Ең қиыны - файлды дұрыс өңдеу, бірақ оған жеке мақала арналады.

8) Жасырын өріс. Кейде пішіннің қалған бөлігімен бірге кейбір деректерді тасымалдау қажет болады. Белгі сол үшін. type="жасырын" атрибутымен. Ол пішіннің өзінде көрінбейді, бірақ қарасаңыз көзібеттер ( оң жақ түймешікті басыңызбетте және «бастапқы кодты» таңдаңыз немесе «ctrl + u» пернелер тіркесімін басыңыз) және бұл өрісті көруге болады.

9) түймелер. Түймешіктер тег арқылы жасалады type="button" атрибутымен. Мән төлсипаты түймеде не жазылатынына жауап береді. Түймешіктер әдетте қандай да бір оқиғаны өңдеу үшін қолданылады. Түйме оқиғалары туралы келесі мақалалардың бірінен оқи аласыз.

10) нысанды тапсыру. Бұл негізінен бірдей түйме, бірақ type="submit" атрибуты бар. Түймені басқан кезде пішін тегтің әрекет атрибутында көрсетілген жол бойынша өңдеуге өтеді

HTML тіліндегі пішін пайдаланушыға бізді қызықтыратын ақпаратты енгізуге мүмкіндік беретін құжаттың бөлігі болып табылады, содан кейін оны сервер жағында қабылдауға және өңдеуге болады. Басқаша айтқанда, пішіндер пайдаланушылар енгізген ақпаратты жинау үшін қолданылады.

Ағымдағы белгі қай пішін элементіне жататынын анықтау үшін тегтің for төлсипатын пайдалану керек . for төлсипатының мәні белгі сілтеме жасайтын пішін элементінің жаһандық төлсипатының мәніне сәйкес болуы керек. Егер элемент болса for атрибутын өткізіп жіберуге болады элементтің ішінде болады .

Қолдану мысалын қарастырайық:

Тегті қолдану мысалы <label> үшін = "иә" > иә Жоқ >

Бұл мысалда біз:

Ішінде біріншіпішіндер:
- Жарияланды екірадио түймелері ( ) опциялардың шектеулі санының біреуін таңдау үшін. Бір пішіндегі радио түймелер үшін екенін тағы да ескеріңіз аты бірдей болуы керек, біз әртүрлі мәндерді көрсеттік. Үшін біріншітексерілген , ол бет жүктелген кезде элементті алдын ала таңдау керектігін көрсетеді (бұл жағдайда иә мәні бар радио түймесі ). Бұған қоса, біз элемент үшін бірегей идентификаторды анықтайтын радио түймелер үшін жаһандық атрибуттарды көрсеттік.
- Екі зат қойылды , ол біздің мәтіндік өрістеріміздің мәтін белгілерін анықтайды. Ағымдағы белгінің қай пішін элементіне жататынын анықтау үшін for төлсипатын пайдаланғанымызды ескеріңіз. for атрибутының мәні бізге қажет радио түйменің ғаламдық атрибутының мәніне сәйкес келеді.
Ішінде екіншіпішіндер:
- Жарияланды екірадио түймелері ( ) опциялардың шектеулі санының біреуін таңдау үшін. Үшін екіншіРадио түймелер үшін біз элементті бетті жүктеу кезінде алдын ала таңдау керектігін көрсететін тексерілген атрибутты көрсеттік (бұл жағдайда жоқ мәні бар радио түйме). Сонымен қатар, біз радио түймелерін белгіледік бірегей құндылықтарпішінде және бірдей атауларда.
- Екі зат қойылды , біз олардың ішіне радио түймелерімізді орналастырдық. Алдыңғы әдіске қарағанда, радио түймелер үшін (элементтің идентификаторы) жаһандық атрибуттарды және оларға сілтеме жасау үшін for төлсипатын пайдалану үшін мәтіндік белгілерді көрсетудің қажеті жоқ (байланыстыру).

Браузерде мәтіндік белгілерді пайдаланудың екі нұсқасы да (әдістері) бірдей көрінеді:

Енгізу өрістеріне арналған кеңес

Қолдану мысалын қарастырайық:

Толтырғыш төлсипатын пайдалану мысалы

В бұл мысалэлемент үшін белгіледік мәтінді теру (бір жолды мәтін өрісі) және құпия сөзді теру (құпия сөз өрісі), енгізу үшін күтілетін мәнді сипаттайтын пайдаланушыға арналған мәтіндік кеңес (толтырғыш төлсипаты).

Біздің мысалдың нәтижесі: