Form үндэс
Form нь хэрэглэгчээс мэдээлэл цуглуулах HTML-ийн механизм. Нэвтрэх хуудас, бүртгэл, хайлт, захиалга — бүгд form дээр суурилдаг.
<form> элемент
<form action="/login" method="POST">
<!-- Form-ийн элементүүд энд -->
</form>
Хоёр чухал attribute:
action — form илгээхэд хаашаа явахыг заана (URL). Хоосон үлдээвэл мөн хуудас руу илгээнэ.
method — HTTP арга:
GET— өгөгдлийг URL-д нэмж илгээнэ (?q=html&lang=mn). Хайлтад тохиромжтой, хадгалж болно.POST— өгөгдлийг request body-д нуугдмал илгээнэ. Нууц үг, картын дугаар гэх мэт мэдрэмтгий өгөгдөлд заавал ашиглана.
<input> элемент
Хэрэглэгч өгөгдөл оруулах суурь элемент:
<!-- Текст оруулах -->
<input type="text" name="username" />
name attribute нь серверт өгөгдөл илгээхэд нэр болно. name-гүй input form илгээхэд орохгүй.
<label> — тайлбар тэмдэглэгээ
<label> нь input-ийн тайлбар. Зөвхөн харагдах зорилгоор биш — accessibility болон UX-д маш чухал.
for/id холболт
<!-- for болон id тохирч байна -->
<label for="username">Хэрэглэгчийн нэр</label>
<input type="text" id="username" name="username" />
for дахь утга id-тай яг таарах ёстой. Үр дүн:
- Label дарахад cursor input руу шилжинэ
- Screen reader input-ийн тайлбарыг уншиж өгнө
- Хэрэглэхэд илүү хялбар болно (жижиг checkbox дарахад label дарж болно)
Хасах арга
<!-- Label доторх input — for/id шаардлагагүй болно -->
<label>
Нууц үг
<input type="password" name="password" />
</label>
GET ба POST харьцуулалт
<!-- GET — хайлтын форм -->
<form action="/search" method="GET">
<label for="q">Хайх</label>
<input type="text" id="q" name="q" />
<button type="submit">Хайх</button>
</form>
<!-- Илгээхэд URL: /search?q=html болно -->
<!-- POST — нэвтрэх форм -->
<form action="/login" method="POST">
<label for="email">И-мэйл</label>
<input type="email" id="email" name="email" />
<label for="password">Нууц үг</label>
<input type="password" id="password" name="password" />
<button type="submit">Нэвтрэх</button>
</form>
<!-- Нууц үг URL-д харагдахгүй -->
<button> элемент
<!-- Form илгээх (default type) -->
<button type="submit">Нэвтрэх</button>
<!-- Form цэвэрлэх -->
<button type="reset">Цуцлах</button>
<!-- Дарахад form илгээхгүй — JavaScript-д ашиглана -->
<button type="button">Шалгах</button>
<button> дотор HTML агуулга байж болно — зураг, icon, текст хослуулж болно. <input type="submit"> хуучирсан арга тул <button> ашиглах нь дээр.
Бүрэн жишээ — бүртгэлийн форм
<!DOCTYPE html>
<html lang="mn">
<head>
<meta charset="UTF-8" />
<title>Бүртгэл</title>
</head>
<body>
<h1>Бүртгүүлэх</h1>
<form action="/register" method="POST">
<!-- Label дээр дарахад input идэвхжинэ -->
<label for="name">Нэр</label>
<input type="text" id="name" name="name" />
<label for="email">И-мэйл</label>
<input type="email" id="email" name="email" />
<label for="password">Нууц үг</label>
<input type="password" id="password" name="password" />
<!-- Form илгээх товч -->
<button type="submit">Бүртгүүлэх</button>
</form>
</body>
</html>
Нийтлэг алдаа
<!-- БУРУУ — label байхгүй, screen reader мэдэхгүй -->
<input type="text" placeholder="Нэр" />
<!-- БУРУУ — for/id таарахгүй байна -->
<label for="user-name">Нэр</label>
<input type="text" id="username" />
<!-- ЗӨВ -->
<label for="username">Нэр</label>
<input type="text" id="username" name="username" />
placeholder нь label-ийг орлож чадахгүй — оруулах эхлэхэд алга болдог тул хэрэглэгч юу оруулах ёстойгоо мартах эрсдэлтэй.
Дараагийн хичээлд:
<input> tag-ийн олон төрлийг үзнэ: text, email, password, number, date, checkbox, radio, file, range, color. placeholder ба value attribute-уудын ялгааг тайлбарлана.