Сайтқа ену

Оқулықтар

Интернетке орналастыру

Оқулық-бағдарламалар

DDD

Форма және интерфейстік элементтер

HTML тілінде тек мәтін мен бейнені шығарып қоймай, онда формаларды да шығаруға болады.Формада қолданушымен әрекеттесе алатын элементтерді орналастыруға болады. Оған жататындар: мәтіндік өрістер, командалық кнопкалар, жалаушалар, қосқыштар тағы басқалар. Форма <form> тегімен анықталады және ол <body> элементінде орналасады:

<html>

<body>

<form>

</form>

</body>

</html>

<form> тегі бос форманы анықтайды. Оған интерфейстік элементтерді қоюға болады. Мысалы,

<html>

<body>

<h2>Интерфейстер</h2>

<form>

<input

Type=checkbox

Name=”group1”

Value=99

onClick=”litterbox.value”=” Вирустан қорғану”>

Вирустан қорғану

<br><br>

<input

Type=radio

Name=”group1”

Value=99

onClick=”litterbox.value”=” Компьютерді тазалау”>

Компьютерді тазалау

<br><br>

< input

Type=radio

Name=”group1”

Value=99

onClick=”litterbox.value”=” Қатты дискіні тазалау”>

Компьютерді тазалау

<br><br>

Қатты дискіні тазалау

</form>

</body>

</html>

Оқиғларды өңдеу

Интерфейстің әрбір элементі өзіне тән ақпаратты шығарады. Интерфейске қатысты қолданушының әр әрекеті (мысалы, тетікке нұқу) оқиға деп аталады. Оқиғаның пайда болуы формаға әсер етеді. Ол оқиғаға сәйкес нәтижені экранға шығарады. Мысалы, мәтінді шығарады, терезені ашады, серверге деректерді береді, тағы басқа осы сияқтыларды. Төменде HTML кодте қолданылатын ең танымал оқиғалар тізімін береміз.

Оқиға

Оқиға әрекеті

onAbort

Stop тетікке немесе гиперсілтемеге нұқып, бейнені қотаруды тоқтату кезінде осы оқиға орындалады

onChange

Интерфейс элементінің мәні өзгерген соң құрылады (мысалы, мәтіндік өріс)

onBlue

Интерфейс элементінің фокусы (тетік немесе мәтіндік өріс) жоғалған сәтте құрылады. Әдетте бұл қолданушы бсқа интерфейсті нұқыған кезде пайда болады

onClick

Интерфейс элементіне нұқыған кезде құрылады

onFocus

Интерфейс элементі фокус алған кезде құрылады. Әдетте қолдануды <Tab> клавишіне немесе элементке нұқыған кезде орындалады

onMouseOut

Көрсеткіш элемент сыртына шыққан сәтте құрылады

onMouseOver

Басқару элементі тұрған облысқа көрсеткіш ену сәтінде құрылады

onSelect

Мәтіндік өрісте мәтін үзіндісін ерекшелеу сәтінде құрылады

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

Мәтіндік өріс

Мәтіндік өріс мәтінді шығарады және клавиатурадан мәтінді енгізуге мүмкіндік береді. Мәтіндің өріс құру үшін input тегі type=text атрибутымен қолданылады. Ол <form> және </form> арасына орналасады.

<form>

<input

Type=text

Name=”Мәтіндік_өріс_аты

size=сан

onBlur='команда1'

onChange='команда2'
onFocus='
команда3'

onSelect='команда4'

</form>

Текстік өріс былайша жұмыс істейді:

1. Үшінші жол браузерге мәтіндік өріс құру туралы хабарлайды,

2. төртінші жолда мәтіндік өіске атау беріледі,

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

4. оқиғаға байланысты мәтіндік өріс әрекеті

Төменде мәтіндік өріс коды мәтіндік хабарды шығарады. Текстік өріске нұқыған соң онда хабар шығады

<html>

<body>

<form>

<input

Type=text

Name=”textBox1”

Value=”Маған фокус беріңіз

size=30

onFocus=”textBox1.value=’Рахмет! Мен енді барлықтарыңың көз алдындамын!’”>

</form>

</body>

</html>

Командалық тетіктер

Қатысушы қандай да бір команданы қосу үшін командалық тетікке нұқу керек. Командалық кнопка құру үшін <form> және </form> тегтерінің арасына type=button атрибутымен <input> тегін орналастыру керек

<form>

<input

Type=button

Name=”Кнопка_аты

value=”кнопкадағы_жазу

onBlur='команда1'

onClick='команда2'
onFocus='
команда3'

</form>

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

index.html web бетті шығарады. Екінші тетік браузерді жабады

<html>

<body>

<form>

<input

Type=button

Name=”open”

value=”Терезені ашу

onClick=”mywindow=window.open(‘index.html’)”>

<input

Type=button

Name=”close”

value=”Терезені жабу

onClick=”mywindow.close()”>

</body>

</form>

</html>

Жалауша

Жалаушаға нұқып, қатысушы оны қояды немесе алып тастайды. Жалауша құру үшін <input> дескрипторды type= checkbox

Атрибутымен <form> және </form> арасына орналастыру керек

<form>

<input

Type= checkbox

Name=”Жалауша_аты

value=”Жалауша_мәні

CHECKED

onBlur='команда1'

onClick='команда2'
onFocus='
команда3'

мәтін

</form>

HTML кодта жалаушалар құру

Бұл мысал үш жалауша құрады

<html>

<body>

<h2>Интерфейстер</h2>

<form>

<input

Type= checkbox

Name=”check1”

Value=99

onClick=”litterbox.value=’AAAA’”>

In the trash can

<br><br>

<input

Type= checkbox

Name=”check2”

Value=99

onClick=”litterbox.value=' BBBB'”>

out the window

<br><br>

<input

Type= checkbox

Name=”check2”

Value=99

onClick=”litterbox.value=' CCCC'”>

smash to pieces

<br><br>

<input

Type= text

Name=”Litterbox

Value=””

Size=40>

</form>

</body>

</html>

Қосқыш

Қосқыштар топқа біріктіріледі. Жалаушадан айырмашылығы бірмезетте топтың бір ғана қосқышы қосылады.

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

Сіз үйленгенсіз бе?

Қатысушы мына үш үлгінің бірін ғана таңдай алады; Иә, Жоқ, Айрылысқам

Қатысушы бір ғана үлгіні таңдай алады.

Қосқыштарды құру үшін <input> тегін type=radio атрибутымен <form> және </form> арасына орналастыру керек

<form>

<input

Type= radio

Name=”Қосқыш_аты

value=”Қосқыш_мәні

CHECKED

onBlur='команда1'

onClick='команда2'
onFocus='
команда3'

мәтін

</form>

HTML кодта үш қосқыш құру

<html>

<body>

<h2>Қосқыштар</h2>

<form>

<input

Type= radio

Name=”group1”

Value=99

onClick=”litterbox.value=’AAAA’”>

In the trash can

<br><br>

<input

Type= radio

Name=”group1”

Value=99

onClick=”litterbox.value=' BBBB'”>

out the window

<br><br>

<input

Type= radio

Name=”group1”

Value=99

onClick=”litterbox.value=' CCCC'”>

smash to pieces

<br><br>

<input

Type= text

Name=”Litterbox

Value=””

Size=40>

</form>

</body>

</html>

Сайт бойынша іздеу

Мазмұны

Copyright © 2015 Матаев Саркытбек | Интернеттік бағдарламалар мен математика жетістіктерін жариялауға арналған сайт – www.karakoz.kz