1. ВЭБ
ДИЗАЙН
Лекц -4
LOGO
Багш : Г .Өсөхжаргал

2. HTML ФОРМ
 Формыг хэрэглэгчээс янз бүрийн
мэдээлэл авахад ашигладаг .
 Формын элементүүд гэж байх ба энэ
нь TextFields, TextArea, DropDownMenu,
RadioButton, Checkboxes зэрэг утгууд
авна . Формыг <form> tag-аар үүсгэнэ .

3. HTML ФОРМ
 Form tag-ийг <input> tag-тай хамт
ашиглана .
 <Form method =
name =
action = “URL” >
гэсэн 3 шинж чанартай .
<form tag нь container tag юм .
>

4. HTML ФОРМ
 <input> tag нь type шинж чанартай
бөгөөд үүгээрээ өгөгдлийн
хэлбэрийг зааж өгдөг .
 <form>
<input type=“form_type” name=“variable”
size=number maxlength=number >
</
form> Хэдэн тэмдэгт бичигдэх
вэ гэдгийг нь
Хэдэн тэмдэгт зай харагдах вэ тодорхойлно .
гэдгийг нь тодорхойлно .

5. ФОРМ -ИЙН ХЭЛБЭРҮҮД
1. Textbox
 Энэ нь нэг мөр хэрэглэгчийн сонгосон урттай
textbox –ийг үүсгэнэ . Үсэг , тоо , тэмдэгтүүдээс
тогтсон өгөгдөлд зориулагдсан .
<form>
LName: <input type=“text” size=40 maxlength=20>
FName: <input type=“text” size=30 maxlength=20>
</
form>

6. ФОРМ -ИЙН ХЭЛБЭРҮҮД

7. ФОРМ -ИЙН ХЭЛБЭРҮҮД
 2. Password, Submit
 Энэ нь хэрэглэгчээс нууц үг асуух форм
үүсгэнэ .
Password нь өгөгдлийг **** (од) –оор
харуулна .
Submit нь үйлдлийг зөвшөөрсөн гэсэн үг
ба үйлдлийг цааш дамжуулна . /
дамжуулах товч үүсгнэ /

8. ФОРМ -ИЙН ХЭЛБЭРҮҮД
<formaction=“UR ”>
L
Nam <input type=“text” nam
e: e=“ner”>
Password: <input type=“password” name=“pass”>
<input type=“subm value=“subm
it” it”>
</form>

9. ФОРМ -ИЙН ХЭЛБЭРҮҮД
3. Checkbox
 Энэ нь хэд хэдэн сонголтоос нэгэн зэрэг
хэдийг ч сонгож болох формыг үүсгэнэ .
 Бичигдэх хэлбэр
<form >
<input type=“checkbox” name=“variable”
checked=“checked”>
Энэ тохиолдолд тухайн
checkbox сонгогдсон байна .

10. ФОРМ -ИЙН ХЭЛБЭРҮҮД
Computer :
<form>
<input type="checkbox"
name="processor">Processor<br>
<input type="checkbox" name="monitor">Monitor<br>
<input type="checkbox" name="key">Keyboard<br>
<input type="checkbox" name="print">Printer<br>
</
form>

11. ФОРМ -ИЙН ХЭЛБЭРҮҮД

12. ФОРМ -ИЙН ХЭЛБЭРҮҮД
4. RadioButton
 Энэ нь олон сонголтоос хэрэглэгч зөвхөн
нэгийг нь л сонгох боломжтой формыг үүсгэнэ .
 Бичигдэх хэлбэр
<form >
<input type=“radio” name=“var”
checked=“checked”>

13. ФОРМ -ИЙН ХЭЛБЭРҮҮД
<form>
<input type="radio" name="a" value="male"
checked>Male<br>
<input type="radio" name=“b"
value="female">Female<br>
</
form>

14. ФОРМ -ИЙН ХЭЛБЭРҮҮД

15. ФОРМ -ИЙН ХЭЛБЭРҮҮД
5. Reset
 Энэ нь бичсэн формыг хүчингүй болгох буюу
форм доторх бүх зүйлийг цэвэрлэнэ . /
reset
үйлдлийг хийх товч үүсгэнэ /
<form>
<input type="text" name="computer" >Computer<br>
<input type="reset" name="res" value=“Cancel"><br>
</
form><br>

16. ФОРМ -ИЙН ХЭЛБЭРҮҮД

17. ФОРМ -ИЙН ХЭЛБЭРҮҮД
6.File
 Энэ нь файлтай ажиллах форм үүсгэнэ .
<form>
<input type="file" name=“file” size=50>
</
form>

18. ФОРМ -ИЙН ХЭЛБЭРҮҮД
7. Image
 Энэ нь зураг оруулан цааш шилжих
форм үүсгэдэг . Оруулж ирсэн зураг
дээр дарахад <form action=“URL”> -руу
шилждэг .
 Бичигдэх хэлбэр
<input type=“image” src=“URL” alt=“tailbar” name= >

19. <textarea> tag
 Энэ tag –аар өмнө оруулсан текстийг зөвхөн
уншихаас гадна их хэмжээний текстэн
мэдээлэл тэмдэглэл оруулж өгөхөд
тохиромжтой . Container tag.
 Бичигдэх хэлбэр
<textarea name=“ ” cols= rows=
readonly=readonly>

20. <TEXTAREA> TAG
<textarea cols=10 rows=10 wrap=physical
readonly>
end duriin text baina
</
textarea>

21. <fieldset> tag
 Энэ tag-ийн тусламжтай агуулагч үүсгэнэ .
<legend> tag-аар агуулагчид гарчиг өгнө .

22. <FIELDSET> TAG
<fieldset>
<legend> Gender</
legend>
<form>
<input type="radio" name="a" value="male"
checked>Male<br>
<input type="radio" name=“b"
value="female">Female<br>
</
form>
</
fieldset>

23. DropDownMenu <select> tag
 Үүний тусламжтайгаар combobox –ийг
үүсгэнэ .
<select name="var">
<option selected value="a"> Morning
<option value=“c"> Afternoon
<option value=“b"> Evening
</
select>

24. DropDownMenu <select> tag

25. DropDownMenu <select> tag
<select multiple name="var">
<option value="a"> Morning
<option selected value="b"> Afternoon
<option value="c"> Evening
</
select>
Олон өгөгдөл зэрэг харагддаг
гүйлгэдэг форм үүснэ.

26. <optgroup> tag
 Энэ нь сонголтын багцыг үүсгэнэ .
Үүнийг <select> tag дотор ашиглана .
Ингэхэд үүсгэсэн дэд өгөгдлүүд нь
тодоор мөн сонгогдох боломжгүй
гарчиг байдлаар харагдана .

27. <OPTGROUP> TAG
<select>
<optgroup label="korea">
<option value="seoul"> Seoul
<option value="pusan"> Pusan
</optgroup>
<optgroup label="america">
<option value="texas"> Texas
<option value="chicago"> Chicago
</optgroup>
</select>

28. <OPTGROUP> TAG

29. ДУУ ОРУУЛАХ
 <bgsound src= ” URL ” loop=“infinite”>
 <center> бүх зүйлийг дэлгэцийн төвд нь
байрлуулах