Нарийн input төрлүүд
HTML5 нь text болон password-аас гадна олон тусгай зориулалтын input төрлүүдтэй. Эдгээр нь хэрэглэгчид зөв форматаар оруулахад туслах, гар утсанд тохирох гар гаргах, болон browser validation ажиллуулах давуу талтай.
Хайлтын input
<!-- type="search" нь текстээс хэд хэдэн талаараа ялгаатай -->
<label for="хайлт">Хайх</label>
<input
type="search"
id="хайлт"
name="q"
placeholder="Хичээл хайх..."
/>
type="search" нь iOS дээр гарны "Search" товч, зарим хөтчид арилгах (×) товчийг автоматаар харуулдаг.
Утасны дугаар, URL
<!-- Гар утасны дугааны гар гаргана -->
<label for="утас">Утас</label>
<input
type="tel"
id="утас"
name="phone"
placeholder="88001234"
pattern="[0-9]{8}"
/>
<!-- URL формат шалгана, https:// автоматаар санал болгоно -->
<label for="вэбсайт">Вэбсайт</label>
<input
type="url"
id="вэбсайт"
name="website"
placeholder="https://example.com"
/>
type="tel" нь iOS болон Android дээр тооны гар гаргадаг — хэрэглэгч хурдан дугаар оруулах боломжтой.
Огноо ба цаг
<!-- Зөвхөн огноо -->
<input type="date" name="birthday" min="1900-01-01" max="2024-12-31" />
<!-- Огноо болон цаг хамт -->
<input type="datetime-local" name="event-time" />
<!-- Зөвхөн цаг -->
<input type="time" name="meeting-time" min="09:00" max="18:00" />
<!-- Долоо хоног сонгох -->
<input type="week" name="report-week" />
<!-- Сар сонгох -->
<input type="month" name="start-month" />
Эдгээр input-ууд нь платформ бүрд ялгаатай харагддаг — iOS, Android, Chrome, Firefox өөр өөрийн интерфэйстэй date picker харуулдаг. Хэрэглэгчийн туршлагыг нэгтгэхийн тулд JavaScript date picker ашиглах нь нийтлэг практик.
<!-- Огноо болон цаг хамт — бүтэн жишээ -->
<label for="хурлын-цаг">Хурлын цаг</label>
<input
type="datetime-local"
id="хурлын-цаг"
name="meeting"
min="2024-01-01T08:00"
max="2024-12-31T20:00"
/>
Өнгө сонгох
<label for="арын-өнгө">Арын өнгө</label>
<input type="color" id="арын-өнгө" name="bg-color" value="#0b1120" />
type="color" нь системийн color picker нээдэг. value нь hex форматаар (#rrggbb) утгыг тохируулна. JavaScript-ааар input event ашиглан утгыг шууд уншиж болно:
<input type="color" id="өнгө" value="#f87171" />
<p id="үр-дүн">Сонгосон өнгө: #f87171</p>
<script>
const өнгө = document.getElementById("өнгө");
const үрДүн = document.getElementById("үр-дүн");
өнгө.addEventListener("input", () => {
үрДүн.textContent = "Сонгосон өнгө: " + өнгө.value;
document.body.style.backgroundColor = өнгө.value;
});
</script>
datalist — autocomplete жагсаалт
<datalist> нь <input> дээр autocomplete санал болгодог. <select>-ээс ялгаатай нь хэрэглэгч жагсаалтад байхгүй утгыг ч оруулж болно:
<label for="хот">Хот</label>
<input
type="text"
id="хот"
name="city"
list="хот-жагсаалт"
placeholder="Хот бичих эсвэл сонгох"
/>
<!-- input-ийн list attribute нь datalist-ийн id-тай таарна -->
<datalist id="хот-жагсаалт">
<option value="Улаанбаатар"></option>
<option value="Дархан"></option>
<option value="Эрдэнэт"></option>
<option value="Баянхонгор"></option>
<option value="Өлгий"></option>
</datalist>
datalist нь хэд хэдэн input төрлтэй ажилладаг:
<!-- Өнгөний datalist -->
<input type="color" list="өнгө-жагсаалт" />
<datalist id="өнгө-жагсаалт">
<option value="#f87171"></option>
<option value="#4ade80"></option>
<option value="#60a5fa"></option>
</datalist>
<!-- Цагийн datalist -->
<input type="time" list="цаг-жагсаалт" />
<datalist id="цаг-жагсаалт">
<option value="09:00"></option>
<option value="12:00"></option>
<option value="15:00"></option>
<option value="18:00"></option>
</datalist>
range — гулсагч
<label for="дуу">
Дууны хэмжээ: <span id="дуу-утга">50</span>%
</label>
<input
type="range"
id="дуу"
name="volume"
min="0"
max="100"
step="5"
value="50"
/>
<script>
const range = document.getElementById("дуу");
const утга = document.getElementById("дуу-утга");
range.addEventListener("input", () => {
утга.textContent = range.value;
});
</script>
Дараагийн хичээлд:
Canvas элементийг судлана — JavaScript ашиглан браузерт шууд зураг зурах, дүрс хөдөлгөөнт болгох үндсийг практикаар үзнэ.