HTML Forms

HTML~Forms

google

FORM Controls

Формд хэд хэдэн төрлийн мэдээлэл цуглуулах зүйлс байдаг.
  • Text Input
  • Password Input
  • Text Area
  • Radio Buttons
  • Checkboxes
  • Dropdown boxes
  • Submit buttons
  • Image buttons
  • Uploading Files
google

FORM Structure

Формд хэд хэдэн төрлийн мэдээлэл цуглуулах зүйлс байдаг.
  • FORM
  • Form control нь <form> element дотор байдаг.
  • ACTION
  • Form нь<action> attribute-тай байдаг. Түүний утга нь серверийн URL-ийг заадаг бөгөөд хэрвээ тухайн FORM-ийг submit буюу илгээвэл FORM дээрх датаг сервер тал хүлээн авдаг.
  • Form нь method attribute-тай байдаг. Form нь GET болон POST method-уудыг авдаг.
structure

TEXT Input

<input>
  • type="text" attribute нь тухайн талбар ямар төрлийн мэдээлэл авч болохыг илэрхийлдэг.
  • name attribute нь тухайн формын field буюу талбарыг сервер дээр таниулахад тусалдаг байна.
  • size attribute нь тухайн талбарын өргөнийг илэрхийлэх бөгөөд жишээ нь: 3 гэдэг хэмжээ нь 3 ширхэг үсэг оруулах боломжтойг илэрхийлж байгаа юм.
  • maxlength attribute нь тухайн талбарт хамгийн дээд талд хэдэн утга оруулж болохыг илэрхийлдэг.
input

Password Input

<input>
  • type="password" нь type attribute нь password гэдэг утга агуулсан бол тухайн нэг мөртэй талбар нь бичигдсэн утга нь одоор халхлагдсан байна.
  • name attribute нь тухайн формын field буюу талбарыг сервер дээр password гэдгийг илэрхийлдэг.
  • size, maxlength attribute нь тухайн талбарын өргөнийг илэрхийлэх бөгөөд жишээ нь: 3 гэдэг хэмжээ нь 3 ширхэг үсэг оруулах боломжтойг илэрхийлж байгаа юм.
  • maxlength attribute нь тухайн талбарт хамгийн дээд талд хэдэн утга оруулж болохыг илэрхийлдэг.
password

Text Area

<textarea>
  • <textarea> нь олон мөртэй талбарыг үүсгэдэг.
  • name attribute нь сервер дээр тухайн талбарыг таниулахад хэрэглэгддэг.
  • cols attribute нь текст талбар нь хэр өргөн бэ гэдгийг илэрхийлдэг.
  • rows attribute нь текст талбарын хэр олон мөртэй вэ гэдгийг илэрхийлдэг.
area

Radio Button

<input>
  • type="radio" radio button буюу олон төрлийн сонголтоос нэгийг сонгох боломжтой болгодог.
  • name attribute нь сервер дээр тухайн талбарыг таниулахад хэрэглэгддэг.
  • value attribute нь сервер лүү илгээгдэж байгаа утгыг илэрхийлдэг.
  • checked attribute нь тухайн талбар нь эхлээд сонгогдсон байхыг зааж өгдөг.
area

Checkbox

<input>
  • type="checkbox" checkbox буюу нэг болон олон сонголт хийх боломжтой талбар юм.
  • name attribute нь сервер дээр тухайн талбарыг таниулахад хэрэглэгддэг.
  • value attribute нь сервер лүү илгээгдэж байгаа утгыг илэрхийлдэг.
  • checked attribute нь тухайн талбар нь эхлээд сонгогдсон байхыг зааж өгдөг.
area

DROP DOWN LIST BOX

<select> <option>
  • name attribute нь сервер дээр тухайн талбар дээр оруулсан хэрэглэгчийн утгыг хадгалдаг.
  • value attribute нь сервер лүү илгээгдэж байгаа утгыг илэрхийлдэг.
  • checked attribute нь тухайн талбар нь эхлээд сонгогдсон байхыг зааж өгдөг.
area

MULTIPLE SELECT BOX

<select>
  • size attribute олон сонголт хийхэд хэдэн сонголт хийж болох хэмжээг заадаг байна.
  • multiple attribute нь хэрэглэгчийг олон сонголттой болгох боломжийг заадаг.
area

FILE INPUT BOX

<input>
  • type="file" attribute нь browse button үүсгэнэ.
area

SUBMIT BUTTON

<input>
  • type="submit" attribute нь сервер лүү form-ийг илгээхэд ашиглагддаг.
  • name attribute нь сервер дээр тухайн талбар дээр оруулсан хэрэглэгчийн утгыг хадгалдаг.
  • value attribute нь тухайн button буюу товчлуур дээрх утгыг харуулдаг.
area

IMAGE BUTTON

<input>
  • type="image" хэрвээ image ашиглахаар болвол src, width, height, alt ашиглах хэрэгтэй юм.
area

BUTTON & HIDDEN CONTROLS

<button>
  • type="hidden" нуугдсан хэсгийг харуулж байгаа бөгөөд энэхүү форм нь хэрвээ submit сервер лүү хийгдвэл тухайн талбар дээр байгаа утгууд бас илгээгдэнэ.
hidden

FORM-ийн LABEL үүсгэх

<label>
  • FOR attribute нь ямар талбарт энэхүү label буюу нэртэй болохыг холбож өгдөг.
hidden

Элементүүдийг нэгтгэх

<fielset>
  • <FIELDSET> element нь нь form-уудыг их талбартай бол их тусалдаг.
  • <LEGEND> element нь нь form-ын дээд талд тайлбар маягаар олдог.
hidden

HTML5: Form Validation

  • FORM Validation буюу талбаруудад ямар утга өгөгдөх ёстой вэ гэдгийг шалгадаг attribute required attribute ашигладаг.
hidden

HTML5: Date Input

<input>
  • type="date" нь хэрэглэгчийг огноо сонгох боломжтой болгодог.
hidden

HTML5: Email

<input>
  • type="email" нь хэрэглэгчийг email хаяг оруулах боломжтой болгодог. Хэрвээ email хаяг буруу түүнийг зөв оруулахыг анхааруулж өгдөг.
  • type="url" attribute нь хэрэглэгчийг URL оруулах боломжтой болгодог. Хэрвээ URL буруу түүнийг зөв оруулахыг анхааруулж өгдөг.
hidden

HTML5: SEARCH INPUT

<input>
  • type="search" нь талбар дээр хэрэглэгчийг хайх боломжийг олгоход ашигладаг.
  • placeholder нь тухайн талбар дээр юм бичээгүй байхад мэдээлэл өгөх зориулалттай ашигладаг.
hidden

Summary FORMS

  • Хэрвээ хэрэглэгч мэдээлэл цуглуулах хэрэгтэй болвол <form> элемент ашиглан тухайн мэдээллийг цуглуулж сервер лүү илгээх ёстой.
  • Тухайн мэдээлэл сервер лүү name/value-гийн хослолоор илгээгддэг.
  • Form бүрийн нэр болон хэрэглэгчийн бичиж байгаа текстийн утгууд нь сервер лүү Form submit хийх буюу формын утгуудыг илгээх үед ашиглагддаг.
  • HTML5 нь шинэ Form element үүсгэж зочилж байгаа хүмүүсийг тухайн form-ийг бөглүүлэхэд амархан болгож хөгжүүлэгдсэн.