HTML формалары

8 Ақпан 2015

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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Көп тармақты мәтінге арналған өріс</title>
 </head>
 <body>
  <form action="myscript.php">
       <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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Парольге арналған өріс</title>
 </head>
 <body>
  <form action="myscript.php">
     <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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Батырма</title>
 </head>
 <body>
  <form action="myscript.php">
   <p><input type="button" name="justpress" value="Мені түртіп жібер"></p>
  </form>
 </body>
</html>



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

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

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Батырма</title>
 </head>
 <body>
  <form action="myscript.php">
    <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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Reset Батырма</title>
 </head>
 <body>
  <form action="myscript.php">
<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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ауыстырғыштар</title>
 </head>
 <body>
  <form action="myscript.php">
<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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Жалаушалар</title>
 </head>
 <body>
  <form action="myscript.php">
<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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Жайылып ашылатын тізім</title>
 </head>
 <body>
  <form action="myscript.php">
<p><b>Қазахстанмен шекаралас мемлекеттер саны қанша?</b></p>
   <select name="shekara">
      <option value="shek1">3</option>
      <option value="shek2">4</option>
      <option value="shek3">5</option>
      <option value="shek4">6</option>
    </select>
 <p><input type="submit" value="Жіберу"></p> 
  </form>
 </body>
</html>


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



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

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


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

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Жазылмалы тізім</title>
 </head>
 <body>
  <form action="myscript.php">
<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>
 <p><input type="submit" value="Жіберу"></p> 
  </form>
 </body>
</html>


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


Егер мақала көңіліңізден шықса, онда онымен төмендегі түйме арқылы достарыңызбен бөлісіңіз

Пікірлер