2 of 13

HTML құжаттарымен әрекеттесу кезінде жиі жасалатын әрекеттердің бірі құжаттың әртүрлі өрістеріне деректерді енгізу болып табылады. Мысалы, іздеу жолағына деректерді енгізу. Іздеу жүйелерін (мысалы, Google немесе Yandex) пайдаланып ақпаратты осылай іздейсіз: сұрауды енгізіңіз, ол серверге (сайт орналасқан компьютер) жіберіледі және нәтижеде сіз іздеу нәтижесін аласыз.

Формалар

Кез келген пішін негізгі тегтен басталады, оның <form>ішінде толтырылатын өрістер мен әрекет түймесі орналасады.

<Form> тегінің басты атрибуты action болып табылады. Ол файлға жеткізетін жол.Форма батырмасынан кейін тікелей ақпараттар сонда жөнеледі.

</form>

3 of 13

Мәтін енгізу өрістері

HTML тіліндегі пішіндердің негізгі элементі енгізу өрісі болып табылады. Ол <input> тегі-нің көмегімен жүзеге асырылады және деректерді енгізу үшін әртүрлі өрістерді орнатуға мүмкіндік береді: мәтін, құпия сөздер, құсбелгілер, радио түймелер, жіберу түймелері, файлды жүктеп салу, күнді енгізу және т.б. HTML5 стандартынан бастап өрістер тізімі көптеген жаңа опциялармен толықтырылды. Кірістердің негізгі түрлері:

Мәтін
Құпия сөздер
Құсбелгілер
радио түймелері

4 of 13

<input> тегінің қолдануының ең оңай жолы – мәтін жазу өрісін дайындау. Әсіресе <input> барлық іздеу шарттарында қолданылады. Қарапайым мәтін енгізу өрісін жасау үшін, форманың ішіне жұпсыз <input> тегін жазып type атрибуна text мәнін енгіземіз.

</form>

5 of 13

Label тегі

Өрістерді енгізу барысында оның мақсатын анықтау үшін <label> тегі қолданылады.

Бұл абзацқа ұқсас жұпты тег, бірақ форма тек жазатын өріс сипатына ғана қатысты сілтеме болып табылады.

<form>

<label>Есіміңізді еңгізіңіз</label>

<label>Нөмеріңізді еңгізіңіз</label>

<label>Почта</label>

</form>

6 of 13

Негізінде жәй ғана <label> тег-ін енгізе салу жеткіліксіз, оны енгізгеннен кейін,

маңызды өріс формасымен байланыстыру керек. Бұл олардың өзара байланысы үшін маңызды. Себебі енгізілген өріс өзіне байланысты өріске байланыспаса мәселе күрделене түседі.

<label> тегі-мен байланыстың әрдайым екі жолының бірі таңдалады:

Id атрибуты бойынша байланыс. Ол үшін <input> тегі id атрибутын белгілі бір атаумен белгілейді. Мысалы: id=“name”.

Ал, <label> -де for атрибуты үшін, дәл <input> тегінің id атрибутындағыдай белгілі бір атаумен белгіленеді. Мысалы: for=“name”.

<form>

<label for="phone">Номер ензіңіз</label>

</form>

7 of 13

Placeholder атрибуты

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

Бұл үшін <input> жұпты тегінде placeholder атрибуты колданылады. Атрибут мәні, мәтін өрісінің ішінде жазылып тұрады.Мысалы:

<form>

<label for="name">Есіміңізді еңгізіңіз</label>

</form>

8 of 13

Ескерту

Тақырып бойынша қолданылған мысалдардан басқа қажетті атрибут мәндерін енгізе аламыз.Егер қандай да бір құпия сөз (пароль) керек болса оны ағылшындағы сөздік бойынша password,почта керек болса email немесе @ символы секілді мысал мәндерін қолдана аласыз.

9 of 13

Тізімдер

Әртүрлі пішіндерде пайдаланушы жиі әртүрлі опциялардың ішінен таңдауға мәжбүр болады. Бұл біз іздегіміз келетін санаттар, әртүрлі іздеу опцияларын таңдау болуы мүмкін. Ең көп таралған шешім – таңдау тізімі бар тізімдерді пайдалану болып табылады.

Құрылымы: ондай тізімді жасау үшін <select> тегінің ішіне кірістірілген <option> тегі орналасады.(Асылында бұл дәл алдыңғы сабақтарда өткеніміздегі ul/ol <li> жұпты тег тізімнің сандық немесе символдық белгілеуліре ұқсайды.)

10 of 13

Көбінесе тізімдегі бірінші элемент бүкіл ашылмалы тізімді басқару үшін пайдаланылады. Мұндай жағдайда disabled атрибут оның таңдалуын блоктау үшін пайдаланылады.

Егерде disabled атрибутын пайдаланбайтын болсаңыз сұрағыңыз таңдау шартына түсіп, вариант түрінді көрінетін болады.

<form>

<option disabled>Қай курстың студентісіз?</option>

</select>

</form>

11 of 13

<form>

<option>Қай курстың студентісіз?</option>

</select>

</form>

12 of 13

https://html5book.ru/html5-forms/

Ескерту

https://developer.mozilla.org/ru/docs/Web/HTML/Element/select

Жұмысыңызды қызық әрі ерекшелендіретін әртүрлі атрибуттар мен мәндерін қойып тексеріп көріңіз

13 of 13

Жіберу формасы

Пішінді жасаудың соңғы қадамы нәтижені серверге жіберу үшін түймені қосу болып табылады. Ол үшін <button> жұп тегі арқылы жіберу түймешігін жасайық:

<form>

<button> Жіберу </button>

</form>

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

</form>