HTML / Select, textarea, button

Select, textarea, button

Form-ийн бүрдэл хэсгүүдийн дотроос <select>, <textarea>, <button> нь хамгийн өргөн хэрэглэгддэг гурав. Энэ хичээлд тэдгээрийг болон форм бүлэглэгч <fieldset> элементийг үзнэ.

<select> — унждаг жагсаалт

html

<label for="course">Курс сонгох</label>
<select id="course" name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

<option>-ийн value — серверт явах өгөгдөл. Харагдах текст нь хэрэглэгчид харагдана.

Анхны сонголт тохируулах

html

<select name="level">
  <!-- selected — анхнаасаа сонгосон байна -->
  <option value="">— Сонгоно уу —</option>
  <option value="beginner">Эхлэгч</option>
  <option value="intermediate" selected>Дунд</option>
  <option value="advanced">Ахисан</option>
</select>

Хоосон value="" бүхий эхний <option> нь "сонгоогүй" байдлыг илэрхийлэх нийтлэг дадал.

Олон сонголт

html

<!-- multiple — Ctrl/Cmd дарж олон сонгоно -->
<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>

optgroup — бүлэглэх

html

<select name="course">
  <optgroup label="Вэб">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="go">Go</option>
  </optgroup>
</select>

<optgroup> нь сонголтуудыг харагдах бүлэгт хуваана — label attribute харагдах гарчиг болно, гэхдээ сонгох боломжгүй.

<textarea> — олон мөрт текст

html

<label for="bio">Танилцуулга</label>
<textarea id="bio" name="bio" rows="5" cols="40">
  Анхны текст энд байна
</textarea>

rows — харагдах мөрийн тоо
cols — харагдах баганын тэмдэгтийн тоо
Tag хоорондох агуулга нь value болно
Хэрэглэгч баруун доод буланг чирж хэмжээг өөрчилж болно

html

<!-- resize хаах нь CSS-ээр хийгдэнэ -->
<textarea name="message" rows="4" style="resize: none;"></textarea>

<input> нэг мөр л авдаг, <textarea> олон мөр авдаг — энэ нь гол ялгаа.

<button> — товч

Button нь гурван type-тай:

html

<!-- submit — form илгээнэ (default) -->
<button type="submit">Илгээх</button>

<!-- reset — form-ийн бүх утгыг анхны байдалд оруулна -->
<button type="reset">Цэвэрлэх</button>

<!-- button — form-д нөлөөлөхгүй, JavaScript-д зориулна -->
<button type="button" onclick="alert('Сайн байна уу!')">Мэндлэх</button>

type заахгүй бол submit болдог тул form дотор JavaScript товч хийхдээ type="button" заавал тавих хэрэгтэй, эс тэгвэл form илгэгддэг.

Button дотор HTML

html

<!-- Зураг + текст хослуулж болно -->
<button type="submit">
  ✓ Хадгалах
</button>

<!-- Идэвхгүй болгох -->
<button type="submit" disabled>Хадгалах</button>

<fieldset> ба <legend> — бүлэглэх

Хамаарал бүхий input-уудыг бүлэглэж, гарчиг өгнэ:

html

<form action="/register" method="POST">

  <fieldset>
    <legend>Хувийн мэдээлэл</legend>

    <label for="fname">Нэр</label>
    <input type="text" id="fname" name="firstname" />

    <label for="lname">Овог</label>
    <input type="text" id="lname" name="lastname" />

    <label for="bday">Төрсөн огноо</label>
    <input type="date" id="bday" name="birthday" />
  </fieldset>

  <fieldset>
    <legend>Нэвтрэх мэдээлэл</legend>

    <label for="email">И-мэйл</label>
    <input type="email" id="email" name="email" />

    <label for="password">Нууц үг</label>
    <input type="password" id="password" name="password" />
  </fieldset>

  <button type="submit">Бүртгүүлэх</button>
</form>

<fieldset> нь хүрээ зуран бүлэглэдэг, <legend> нь тухайн бүлгийн гарчиг болдог. Screen reader хэрэглэгчид бүлгийн нэрийг уншиж өгдөг тул accessibility сайжирна.

Бүрэн жишээ — холбоо барих форм

html

<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>Холбоо барих</title>
  </head>
  <body>
    <h1>Холбоо барих</h1>

    <form action="/contact" method="POST">

      <fieldset>
        <legend>Таны мэдээлэл</legend>

        <label for="name">Нэр</label>
        <input type="text" id="name" name="name" />

        <label for="email">И-мэйл</label>
        <input type="email" id="email" name="email" />
      </fieldset>

      <fieldset>
        <legend>Мессеж</legend>

        <label for="subject">Сэдэв</label>
        <select id="subject" name="subject">
          <option value="">— Сонгоно уу —</option>
          <option value="question">Асуулт</option>
          <option value="bug">Алдаа мэдэгдэх</option>
          <option value="other">Бусад</option>
        </select>

        <label for="message">Мессеж</label>
        <textarea id="message" name="message" rows="5"></textarea>
      </fieldset>

      <button type="submit">Илгээх</button>
      <button type="reset">Цуцлах</button>
    </form>
  </body>
</html>

Дараагийн хичээлд:

Semantic HTML гэж юу болохыг үзнэ. <div> ба <span> шиг утгагүй элементийн оронд утга агуулсан элементүүдийг ашиглах нь SEO, accessibility, код уншигдах чанарт хэрхэн нөлөөлдгийг тайлбарлана.

← Өмнөх хичээлInput төрлүүд Дараах хичээл →Semantic HTML гэж юу вэ?