зертханалык жумыс 1

№1 Зертханалық жұмыс
Тақырыбы: HTML5 тілінде формалар құру

Жұмыс мақсаты: HTML5 тілінде формалар құруды меңгеру
Сабақтың ұзақтығы (академиялық сағатпен): 270 минут
Қажетті ресурстар: Дербес компьютер, Microsoft Office Ортасы, Блакнот
бағдарламасы.
Қысқаша теориялық мәліметтер:
HTML формалары сайттың ең басты маңызды элементтерінің бірі болып табылады.
Формаларды пайдаланушылар енгізген деректерді серверге өңдеуге жіберу үшін
пайдаланады.
Формаларға мысал ретінде сайттарға тіркелу, пікірлер жазып жіберу, кері байланыс,
сұрақтарға жауап беру болмаса дауыс беру, файлдарды жүктеу сияқтыларды келтіруге
болады.
Сонымен, форма HTML дің жұптасқан тегтері <form> </form> арқылы құрылады.
Яғни, форманың басы <form>мен басталып, аяғы </form>мен аяқталады. Оcы екі тегтің
ортасына форманың қалған элементтері жайғасады.|
Форма параметрлері.
Бұл <form> тегінің бірнеше параметрлері бар, солардың ішіндегі ең бастылары
мыналар:
action - пайдаланушы енгізген деректерді өңдеуге жіберетін файлдың адресі.
Егер ол көрсетілмесе, осы парақша коды сол мәндермен қайта жүктеледі.
method - деректерді серверге жіберу әдістерін сипаттайды.Ол 2 әдіс - GET және
POST.
GET арқылы деректер браузердің адрестік тармағында беріледі.
POST арқылы деректер браузердің өз сұранысымен бірге серверге
жөнелтіледі
және GET ке қарағанда мөлшері көп деректер жібере алады.Сондықтан мұны
форумдарда, почта байланысында, дерекқор деректерін өңдеу үшін
пайдаланады.
target - өңделген форманың нәтижесін көрсететін web-парақша беті браузердің осы
окносына немесе жаңа окноға жүктеле ме, соны белгілейді.Оның
мәндерінің
ішіндегі көп кездесетіні төмендегідей:
_blank - парақшаны браузердің жаңа окносына жүктейді.
_self - парақша осы окноға жүктеледі.
Форма элементтері.
Бұдан әрі қарай баяндалатын форма элементері дегеніміз деректерді енгізетін өрістер
болып саналады.Олардың көбін <input> тегі арқылы сипаттайды.Ол тегтің негізгі
атрибуттары мынадай болып келеді:
name - Форма элементінің аты, өріске жазылған деректі өңдейтін сервердегі скрипте
анықталады.
type - Формадағы мәтін жазылған өрістің типін білдіреді.
Тапсырмалар
1-тапсырма. Бір тармақтан құралған мәтінге арналған өріс құру.
Бір тармақтан тұратын өріс тек бір қатарға мәтін сөздерін енгізуге мүмкіндік береді.
Бұл өрісті жасау үшін мынадай синтаксис қолданылады:
<input type = "text" параметрлер>
Оның параметрлері мына кестеде берілген:
Параметр Сипаттамасы
size Өрістің мөлшерін білдіреді.Ол мәтін әріптерінің санымен өлшенеді.
Өріске енгізілетін таңбалардың ең үлкен мөлшерін белгілейді.Одан асып
maxlength кетсе мәтінді әрі қарай жазу тоқтайды.
value Өріске берілетін алғашқы мән.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мәтінге арналған өріс</title>
</head>
<body>
<form action="myscript.php">
<br>
Аты-жөніңіз:<br>
<input type="text" name="firstname" maxlength="35" size="40">
</form>
</body>
</html>
Бұл HTML кодының нәтижесі мынадай болады:
2-тапсырма. Көп тармақты мәтінге арналған өріс құру.

Бұл форма элементі <textarea> </textarea> жұптасқан тегтерімен сипатталады.
Мұндай өрісті жасаудың синтаксисі мынадай:
<textarea параметрлер көп тармақты мәтін /textarea>
Мұндай өріске қалаған мөлшерде мәтін орналастыруға болады.
Келесі кестеде ол тегтің параметрлері берілген:
cols Өрістің мөлшерін белгілейді.
rows Өрістің қатарларының саны.
wrap Өрістегі мәтін симағанда келесі қатарға көшіреді.
readonly Өрістің мәтіні тек оқылу үшін арналған.
disabled Өрісте өзгеріске ешқандай рұқсат жоқ.
Келесі HTML кодын алдыңғыдай Notepad++ редакторына жазып, php файлы ретінде

сақтап болған соң алдыңғы кодтардың нәтижесін қарағандай оны да Денверден
шақырайық:
<!DOCTYPE html>
<html>
<head>
<title>Көп тармақты мәтінге арналған өріс</title>
</head>
<body>
<br>
Пікір қалдыру:<br>
<textarea rows="5" cols="30" name="comments"></textarea>
</form>
</body>
</html>
Оның нәтижесі былай болып шықты:
Осы жоғарыда сипатталған форманың 2 элементі де менің мақалаларымның пікірлер

жазатын бөлігінде жасалынған.
3-тапсырма. Парольге арналған өріс құру.

Бұл кәдімгі мәтінге арналған өріс.Тек одан бір айырмашылығы - жазылған мәтін
таңбалары жұлдызша арқылы белгіленеді.Яғни бұлай көрсету ол парольді ешкім көріп
қалмас үшін жасалған.
Бұл өрістің жазылу синтаксисі мынадай:
<input type="password" параметрлер>
Оның параметрлері келесі кестеде сипатталған:

Мәтінге арналған өрістің ені,ол өріске енгізілген жұлдызшалар санымен
size анықталады.
Өріске енгізілетін таңбалардың ең үлкен мөлшерін белгілейді.Одан асып кетсе
maxlength мәтінді әрі қарай жазу тоқтайды.
value Өріске берілетін алғашқы мән.
Енді осы парольге арналған өріс үшін HTML кодын жазып шығайық:
<!DOCTYPE html>
<html>
<head>
<title>Парольге арналған өріс</title>
</head>
<body>
<p><b>Логин:</b> <input type="text" maxlength="30" size="40" name="text"></p>
<p><b>Пароль:</b> <input type="password" maxlength="20" size="40"
name="pass"></p>
<p><input type="submit" value="Жіберу"></p>
</form>
</body>
</html>
Енді осы код жазылған файлды Денверде орындап, өрістерді толтырсақ нәтиже былай
болып шығады:
Жоғарыда байқаған шығарсыздар, серверге деректерді жіберуге арналған ЖІБЕРУ деп

жазылған түйме-бастырма-кнопка көрсетіліп тұр.Келесі тақырып осы туралы болады.
4-тапсырма. түйме-батырма-кнопка-button құру
Мен бұл элементтің қазақша атын түйме деп атап жүргенмін, жақында батырма деген
атауды кездестіріп енді осылай атауды жөн көрдім.Себебі менің ойымша осы қазақша
атау орынды секілді.
Web интерфейсінде форма жасалғанда осы элемент жиі кездеседі.Түріне қарап-ақ оны
үстінен шерту керек екенін сол бойда түсінуге болады.
Бұл батырма екі қызмет атқарады- деректерді серверге жіберу және экран бетіндегі
парақша өрістеріндегі таңбаларды өшіру немесе тазалау.
Оларды парақша бетінде де екі әдіспен жасауға болады - <input> және <button> тегтері
арқылы.Осылай сипатталған бұл батырмалар өздігімен еш әрекет жасай алмайды,
сондықтан олардың әрекеті өзіміз жазатын форма өңдегіштері арқылы жүзеге асырылады.
1. Батырманы <input> арқылы жасаудың синтаксисі мынадай:
<input type="button" параметрлер>
Оның параметрлері төменгідей болып келеді:

Батырманың аты, өріске жазылған деректі өңдейтін сервердегі скрипте
name анықталады.
value Батырманың атының мәні және батырманың бетінде жазылатын мәтін.
Енді осы батырмаға арналған HTML кодын жазайық және сосын оның нәтижесін
браузерде көрейік.
<!DOCTYPE html>
<html>
<head>
<title>Батырма</title>
</head>
<body>
<p><input type="button" name="justpress" value="Мені түртіп жібер"></p>
</form>
</body>
</html>
2. Енді батырманы <button> тегі арқылы жасап көрейік.

Бұл да алдыңғы <input> тегінің әрекетіне ұқсайды, бірақ мүмкіншіліктері кеңірек.Яғни
бұл батырмада кез келген HTML тегін орналастыруға болады.Мысалы төмендегідей
HTML кодын жазып, суретті мәтінмен қоса батырма ретінде пайдалануға болады.
<!DOCTYPE html>
<html>
<head>
<title>Батырма</title>
</head>
<body>
<button><img src="images/butterfly.jpg" width="28" height="30"> Батырма
сурет</button>
</form>
</body>
</html>
Нәтижесі браузерде былай болып шығады:
5-тапсырма. submit батырмасын құру.

Бұл батырма формадағы өрістерге енгізілген деректерді <form> тегіндегі action
параметрінде көрсетілген серверде орналасқан программаға жібереді.
Submit батырмасының синтаксисі <input> және <button> тегтеріне байланысты
болады.
<input type="submit" параметрлер>
<button type="submit">Батырма бетіндегі жазу</button>
Батырманың осы түріне мысал жоғарыда парольге арналған өрісте көрсетілген
болатын.
6-тапсырма. reset батырмасын құру.
Бұл батырма өрістерге алдыңғы енгізілген алғашқы мәндерін қайта енгізу не болмаса
енгізілген деректерден тазарту үшін қолданылады.
Синтаксисі жоғарыда сипатталған батырмалардағыдай:
<input type="reset" параметрлер>
<button type="reset">Батырма бетіндегі жазу</button>
Төмендегі HTML коды арқылы жазылған скрипте формадағы бір мәтінді өріс алғашқы
мәнімен жазылған.Егер сол мәнді өз қалауыңызша өзгертіп болған соң, reset батырмасын
түртсеңіз ол өріс өзінің алғашқы мәнін қайта иемденеді.
<!DOCTYPE html>
<html>
<head>
<title>Reset Батырма</title>
</head>
<body>
<p><input type="text" value="Мәтін жазыңыз"></p>
<p><input type="submit" value="Жіберу"><input type="reset" value="Тазарту"></p>
</form>
</body>
</html>
Енді браузер арқылы тексеріп көрейік.
7-тапсырма. Ауыстырғыштар құру.

Формада ұсынылған бірнеше мәндердің ішінен тек біреуін таңдау қажет болған
жағдайда осы ауыстырғыштарды қолданады.
Оның синтаксисі былай беріледі:
<input type="radio" name="аты" параметрлер >
Ал параметрлер төмендегі кестеде беріліп тұр:

Өрісті айқындайтын ауыстырғыштар жиынтығының аты,демек жиынтық
name элементерінің бәріне тек қана бір атау беріледі.
Элементтердің әрқайсысының аты қайталанбайтын бірегей болу керек.Бұл мән
value сервердегі форманы өңдегіш скриптке жіберіледі.
Алдын ала ауыстырғышты осы checked арқылы белгілеп өрістің мәні ретінде
checked ұсыну.
Енді осы ауыстырғыштардың қалай жұмыс істейтінін көру үшін HTML кодын жазып
шығайық.
<!DOCTYPE html>
<html>
<head>
<title>Ауыстырғыштар</title>
</head>
<body>
<p><b>Сізді қоғамда болып жатқан өзгерістер мазалай ма?</b></p>
<p><input name="socty" type="radio" value="ysocty" checked="checked">
Ия,мазалайды<br>
<input name="socty" type="radio" value="nsocty"> Жоқ,мазаламайды<br>
<input name="socty" type="radio" value="isocty"> Маған бәрі-бір</p>
<p><input type="submit" value="OK"></p>
</form>
</body>
</html>
Енді осы код нәтижесін браузер арқылы тамашалайық.
8-тапсырма. Жалаушалар құру.

Формада ұсынылған бірнеше мәндердің ішінен тек біреу емес, керісінше бірнешеуін
таңдау қажет болған жағдайда жалаушалар қолданылады.
Оның синтаксисі былай беріледі:
<input type="checkbox" name="аты" параметрлер >
Ал параметрлер төмендегі кестеде беріліп тұр:

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

<!DOCTYPE html>
<html>
<head>
<title>Жалаушалар</title>
</head>
<body>
<p><b>Транспорттың қай түрлерімен саяхат жасағанды ұнатасыз?</b></p>
<p><input type="checkbox" name="opt1" value="o1" checked>Поезд<br>
<input type="checkbox" name="opt2" value="o2"> Самолет<br>
<input type="checkbox" name="opt3" value="o3"> Автомобиль<br>
<input type="checkbox" name="opt4" value="o4"> Параход</p>
<p><input type="submit" value="ОК"></p>
</form>
</body>
</html>
Енді осы код нәтижесін браузер арқылы тамашалайық.
9-тапсырма. Жайылып ашылатын және жазылмалы тізімдерге арналған өріс

құру.
Форма бетінде тізімдер әртүрлі болып келеді.Олардың жазылу синтаксисі мынадай:
<select параметрлер >
<option параметрлер>Мән1</option>
<option>Мән2</option>
</select>
Солардың бірі осы жайылма немесе жайылып ашылатын тізім. Бұл аталған тізім тек
бір қатармен көрсетіледі.Сондықтан тізімді толықтай көру үшін оны үстінен түрту керек
болады және сол жайылып ашылған тізімнен тек бір ғана мән таңдалады.
Бұл тізім параметрлерінің сипаттамасы мынадай:
Тег Параметр Сипаттамасы
Элементтің қайталанбайтын бірегей аты,форманы өңдейтін сервердегі
select name скрипте пайдаланылады
option value Сервердегі скриптке жіберілетін осы таңдалған тармақтағы мән.
Енді осы тізімнің түрін HTML кодымен өрнектеп шығайық:

<!DOCTYPE html>
<html>
<head>
<title>Жайылып ашылатын тізім</title>
</head>
<body>
<p><b>Қазахстанмен шекаралас мемлекеттер саны қанша?</b></p>
<select name="shekara">
<option value="shek1">3</option>
</select>
</form>
</body>
</html>
Нәтиже браузерде былай болып шығады:
Ал енді жазылмалы тізімге келетін болсақ, оның параметрлері сәл көбірек.

Тег Параметр Сипаттамасы
Бұл параметр тізімде бірден көп,яғни бірнеше мәндер таңдауға
болатынын көрсетеді.Ал сол бірнеше мәндерді белгілеу үшін CTRL және
multiple SHIFT клавиштерін курсормен бірге қолдану керек.
select Элементтің қайталанбайтын бірегей аты,форманы өңдейтін сервердегі
name скрипте қолданылады
Бұл тізімнің биіктігін көрсетеді.Егер бұл size мәні тізімдегі мәндердің
size санынан кіші болса, онда ол тізімді айналдыруға тура келеді
Алдын ала осы тармақтағы мән таңдауға ұсынылады.Бірақ сіз оны
option selected өзгерте аласыз.
value Сервердегі скриптке жіберілетін таңдалған пунктің мәні.
Енді осы аталған тізім үшін HTML кодын жазып шығайық:

<!DOCTYPE html>
<html>
<head>
<title>Жазылмалы тізім</title>
</head>
<body>
<p><b>Қазахстанда экологиясы таза қалалар қайсы?</b></p>
<select name="city"size="3" multiple>
<option value="city1">Алматы</option>
<option selected value="city2">Астана</option>
<option value="city3">Атырау</option>
<option value="city4">Ақтөбе</option>
<option value="city4">Ақтау</option>
</select>
</form>
</body>
</html>
Нәтижесін браузерде көрейік:
Бақылау сұрақтары
1. HTML формалары.
2. Форма параметрлері.
3. Форма элементтері.
4. Бір тармақтан құралған мәтінге арналған өріс
5. Көп тармақты мәтінге арналған өріс
6. Парольге арналған өріс
7. түйме-батырма-кнопка-button
8. submit батырмасы
9. reset батырмасы
10. Ауыстырғыштар
11. Жалаушалар
12. Жайылып ашылатын және жазылмалы тізімдерге арналған өріс
Орындалған жұмыс бойынша қорытынды

Атқарылған жұмыстың қорытындылары қысқаша сипатталады және алынған
нәтижелерге талдау жасалады

зертханалык жумыс 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

зертханалык жумыс 1

Uploaded by

Copyright:

Available Formats

№1 Зертханалық жұмыс

Тақырыбы: HTML5 тілінде формалар құру

Бұл HTML кодының нәтижесі мынадай болады:

2-тапсырма. Көп тармақты мәтінге арналған өріс құру.

Келесі HTML кодын алдыңғыдай Notepad++ редакторына жазып, php файлы ретінде

Оның нәтижесі былай болып шықты:

Осы жоғарыда сипатталған форманың 2 элементі де менің мақалаларымның пікірлер

3-тапсырма. Парольге арналған өріс құру.

Оның параметрлері келесі кестеде сипатталған:

Жоғарыда байқаған шығарсыздар, серверге деректерді жіберуге арналған ЖІБЕРУ деп

Оның параметрлері төменгідей болып келеді:

2. Енді батырманы <button> тегі арқылы жасап көрейік.

Нәтижесі браузерде былай болып шығады:

5-тапсырма. submit батырмасын құру.

Енді браузер арқылы тексеріп көрейік.

7-тапсырма. Ауыстырғыштар құру.

Ал параметрлер төмендегі кестеде беріліп тұр:

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

8-тапсырма. Жалаушалар құру.

Ал параметрлер төмендегі кестеде беріліп тұр:

Енді осы жалаушалар үшін HTML кодын жазып шығайық.

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

9-тапсырма. Жайылып ашылатын және жазылмалы тізімдерге арналған өріс

Енді осы тізімнің түрін HTML кодымен өрнектеп шығайық:

Нәтиже браузерде былай болып шығады:

Ал енді жазылмалы тізімге келетін болсақ, оның параметрлері сәл көбірек.

Енді осы аталған тізім үшін HTML кодын жазып шығайық:

Нәтижесін браузерде көрейік:

Орындалған жұмыс бойынша қорытынды

You might also like