Формалар

Сіз қандай да бір тегін пошта серверінде (Mail.ru сияқты) тіркелгеніңізде форма толтырған боларсыз. Міне бізге осы формаларды құру мен оларды қолдануды қарастыру керек.

Кезкелген форманың басты міндеті ақпаратты басқарушы скриптке беру болып табылады, ал скрипт форманың неге арналғанына қарай, сіз енгізген, толтырған ақпараттарды өңдейтін болады. Біз әзірге серверлік (CGI, PHP және т.б) скриптерді қарастырған жоқпыз, сондықтан форманы оқып-үйренуді электрондық поштамен хабарлама жөнелтуден бастаймыз.

HTML- құжатқа форманы қалай енгізуден бастайық. Форма <form> тэгіне алынады:

<form action="..." method="..." enctype="...">

action

осы форманы өңдейтін ресурсты, яғни басқарушы скриптің URL адресін көрсетеді.

method

Деректерді басқарушы скриптке жеткізу әдісін көрсетеді. Ол GET және  POST мәндерін қабылдай алады. Үнсіз келісім бойынша – GET пайдаланылады.

enctype

Деректерді жөнелту кезіндегі кодтау әдісін бекітеді. Поштамен жөнелткенде text/plain –ды пайдаланған жөн. Бұл жағдайда пошталық хабарлама мәтін түрінде жеткізілетін болады.

Толтырылған форма өрістерінен тұратын пошта хабарламасын жөнелту үшін не жазамыз? Ол жазба мына түрде болады:

<form action="mailto:muratbek2012.70@mail.ru?SUBJECT=From site" enctype=text/plain method=POST>

Бұл жерде пошта хабарламасы жеткізілетін адрес, яғни менің E-mail жазылған. Subject көмегімен хабарлама тақырыбы берілген. text/plain мәтіндік коды мен жеткізудің Post әдісі көрсетілген. Get әдісін әзірше қарастырмаймыз.

Әзірше біз бос форманы ғана құрдық. Пайдаланушы өрістерді толтыра алуы үшін, олардың қандай болатындығын біліп алайық.

Өрістің үш элементі (түрі) бар, олар: input, select, textarea. Оларға толығырақ тоқталайық.

1. Input элементі

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

Type - бұл параметр өріс типін немесе басқаша айтқанда енгізілетін ақпарат типін орнатады:

type=text

үнсіз келісім бойынша орнайды. Енгізілетін бір жолдық мәтін өрісін береді. Өрістің көрінетін символдар санымен өлшенетін өлшемі size параметрінің көмегімен беріледі. Енгізілетін жол өлшемі шектелмейді, бірақ қажет болған жағдайда оны maxlength атрибутымен шектеуге болады. Егер мәтіннің бастапқы мәні бар болса, онда ол value атрибутының көмегімен беріледі. Өріске ат name атрибуты арқылы меншіктеледі. Ол форманың дұрыс болуы үшін кезкелген өрісте болуы тиіс. Мысалы:

<input type=text size=45 name=file value=Мәтіндік өріс>

type=password

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

type=checkbox

бұл жәй логикалық параметрлер мен әр түрлі көптеген мәндерді қабылдай алатын параметрлерге арналған. Ол параметрдің атын беруде name атрибуты, ал параметрге мән беру үшін value атрибуты қолданылады. Көп мәндерді қабылдай алатын параметрлерді құруда, осы мәндерді беретін шаршылардың аттары сәйкес келулері тиіс. Шаршының бастапқы күйі, оның белгіленген, белгіленбегеніне қарамастан, checked атрибутымен беріледі. Бұл атрибуттың мәні болмайды және өзі белгілеуді анықтау үшін ғана қолданылады, яғни ол жоқ болса, онда шаршының белгіленбегенін білдіреді.

<input type=checkbox name=send value=yes checked> Менің E-mail-ды көрсет.

Шаршының мәні ол белгіленген жағдайда ғана жіберіледі, сол себептен белгіленбеген жағдайында оның мәнін беретін атрибуты болмайды.

type=radio

Бұл көбінесе радиобатырма (от англ. - radiobutton) деп аталады. Бұл тізімнен бір мәнді таңдау үшін қолданылады. Топтағы әр радиобатырма name параметрімен берілетін бірыңғай ат, сол сияқты value атрибуты беретін өз мәнін иеленуі тиіс. Бір радиобатырма checked атрибутымен белгіленгендей болуы керек.

Сіздің сүйікті теле хабарыңыз ?<br>

<input type=radio name=tel value=sam checked> Айтуға оңай

<input type=radio name=tel value=camer> Қазақстан дауысы

<input type=radio name=tel value=pole> Көзқарас

<input type=radio name=tel value=melody> Pronet

type=submit

Басқан кезде форма ішіндегілер жөнелтілетін батырма құрады. Батырманың мәтіні value атрибутымен беріледі. Егер батырманың атрибуты name болса, онда браузер деректерді жеткізу кезінде аты мен мәнінің жұбын жөнелтеді. Бұл басқарушы скриптің деректерді қандай да бір жолмен өңдеу әдісін өзгертуге пайдасы тиюі мүмкін.

<input type=submit value=Жөнелту>

type=image

Бұл жөнелтуші батырманы сурет түрінде құруға арналады. Бұл сізге браузердің құрған батырмасы ұнамаған жағдайда өте пайдалы болады. name атрибуты батырма атын береді. Суреттің URL көрсету үшін src атрибутын, сол сияқты суреттің барлық <IMG> тэгті атрибуттарын қолданады. Деректерді жөнелту кезінде браузер тышқанмен шертілген суреттегі нүктелерінің координаталарын да жібереді.

type=reset

Бұл атқаратын қызметі Submit-ке қарама-қарсы батырманы құрады. Қысқасы бұл батырма формадағы барлық мәндерді алып тастап, үнсіз келісім бойынша немесе value атрибутымен берілген мәндерді орнатады.

type=file

Бұл өріс жөнелтілген деректерге атын пайдаланушы мәтіндік өрісте теретін файлдың ішіндегілерін кірістіруге арналған. Осы заманғы, әсіресе графикалық браузерлер мәтіндік өріс жанына, басқан кезде интерактивті режимдегі файлды таңдауға болатын батырма бейнелейді. Мәтіннің ені мен ең ұзақ ұзындығын басқару үшін size мен maxlength атрибуттары, сол сияқты type=text –те қолданылады.

<input type=file name=userfile size=40 maxlength=300>

type=hidden

Бұл нәрсе парақшада бейнеленбейтін және олардың мәндерін пайдаланушы бере алмайтын деректерді шлюздерге жөнелтуде пайдаланылады. Әрдайым қызметтік ақпараттарды сақтау үшін қолданылады. Олардың name және value атрибуттары болуы тиіс.

<input type=hidden name=color value=black">

2. Select элементі.

Бұл бір немесе бірнеше элементті таңдауға болатын мәзір/меню/ құрады. Select элементінің жабушы тэгі болуы тиіс. Тэг ішіне мәзір пункттерінің мәнін беретін option элементтері орналасады. Бірнеше элементті таңдауға мүмкіндігі бар мәзір тізім түрінде бейнеленеді. Мәзір бір ғана элементті таңдаған кезде түсіп қалушы түрінде бейнеленеді. Оның мынадай атрибуттары бар.

name

жеткізу кезінде пайдаланылатын мәзір атын көрсетеді.

size

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

multiple

бұл атрибуттың тұруы мәзірдің бірнеше элементін таңдау мүмкіндігі бар екендігін көрсетеді.

option элементінің атрибуттары:

selected

мәзірдің бұл элементі құжатты жүктеу кезінде ерекшеленген ретінде танылатынын көрсетеді.

value

select тэгінде көрсетілген форма өңдеушісіне name атрибутымен бірге жеткізілетін мәнді көрсетеді.

option элементінің жабушы тэгі болмауы да мүмкін. Мысалы:

<select name=color>

<option value=red selected> Қызыл

<option value=green> Жасыл

<option value=blue> Көк

</select>

3. TEXTAREA элементі

Формада мәтіндік өріс құрады. Егер элементтің жабушы тэгі болса, онда тэгтер арасындағының бәрінің де алдындағы элементтер сияқты value атрибутындай мәні болады. Бұл элементтің мынадай атрибуттары болуы мүмкін:

name

Алдындағы элементтерге ұқсас.

rows

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

cols

Жолдағы көрінетін символдар санын орнатады.

Егер енгізілген мәтін енгізуге бөлінген аумаққа сыймаса, онда браузер ішіндегілерді айналдыру жолақтарымен қаматамасыз етуі тиіс.

<textarea name=text cols=60 rows=15>

Түсіндірмеңізді енгізіңіз

</textarea>

Ал енді пайдаланушының сіздің сайтқа кіргені жайлы хабарлама – анкетаны жөнелтуге арналған форма құрайық. Мұнда </form> жабушы тэгі міндетті.

<form action="mailto:mrharut@narod.ru?SUBJECT=From site" enctype=text/plain method=POST>

<input type=hidden name=" " value="менің сайтымнан жөнелтілген хабарлама">

<p>осы сайт материалдарының пайдасы болды ма (қызықты ма):

<select name="Ақпараттардың пайдалылығы:">

<option value="Иә" selected> Иә</option>

<option value="Жоқ"> Жоқ</option>

</select>

<p>Сайт дизайнын қалай бағалайсыз:

<select name="Дизайнды бағалау: ">

<option value="Өте жақсы" selected>Өте жақсы</option>

<option value="Жақсы">Жақсы</option>

<option value="Орташа">Орташа</option>

<option value="Нашар">Нашар</option>

</select>

<p>Сайттың навигациясы қалай:

<select name="Сайт навигациясы: ">

<option value="Өте жақсы" selected>Өте жақсы</option>

<option value="Жақсы">Жақсы</option>

<option value="Орташа">Орташа</option>

<option value="Нашар">Нашар</option>

</select>

<p>Қосымша сұрақтар: (300 таңбаға дейін):

<textarea name="Қосымша сұрақтар" cols="30" rows="10">

</textarea>

<p>

<input type=Submit value="Жөнелту" name="Submit">

<input type="reset" value="Форманы тазарту" name="reset">

</form>

Бұдан әрі форма элементтері мен оқиғалар байланысын қарастырамыз.