Input төрлүүд

<!-- Энгийн текст -->
<input type="text" name="username" />

<!-- И-мэйл — формат шалгадаг, гар утсанд @ гардаг гар нээнэ -->
<input type="email" name="email" />

<!-- Нууц үг — текстийг нуудаг -->
<input type="password" name="password" />

<!-- Тоо — дээш/доош сум гардаг -->
<input type="number" name="age" min="1" max="120" />

<!-- URL — формат шалгадаг -->
<input type="url" name="website" />

<!-- Утасны дугаар — гар утсанд тоон гар нээнэ -->
<input type="tel" name="phone" />

<!-- Огноо — хөтөч calendar харуулна -->
<input type="date" name="birthday" />

<!-- Цаг -->
<input type="time" name="meeting-time" />

<!-- Огноо + цаг -->
<input type="datetime-local" name="event-start" />

<!-- Сар -->
<input type="month" name="expiry" />

<!-- Нэг checkbox -->
<label>
  <input type="checkbox" name="agree" value="yes" />
  Нөхцөл зөвшөөрч байна
</label>

<!-- Олон checkbox — нэг бүлэгт ижил name -->
<p>Хэл сонгох:</p>
<label>
  <input type="checkbox" name="lang" value="html" />
  HTML
</label>
<label>
  <input type="checkbox" name="lang" value="css" />
  CSS
</label>
<label>
  <input type="checkbox" name="lang" value="js" />
  JavaScript
</label>

<input type="checkbox" name="newsletter" value="yes" checked />

<!-- Ижил name → нэг бүлэг, зөвхөн нэгийг сонгоно -->
<p>Хүйс:</p>
<label>
  <input type="radio" name="gender" value="male" />
  Эрэгтэй
</label>
<label>
  <input type="radio" name="gender" value="female" />
  Эмэгтэй
</label>
<label>
  <input type="radio" name="gender" value="other" />
  Бусад
</label>

<!-- Файл оруулах -->
<input type="file" name="avatar" />

<!-- Зөвхөн зураг -->
<input type="file" name="photo" accept="image/*" />

<!-- Олон файл -->
<input type="file" name="docs" multiple />

<!-- Өнгө сонгогч -->
<input type="color" name="theme-color" value="#f87171" />

<!-- Range гүйлгэгч -->
<label for="volume">Дуу чимэг: <span id="vol-display">50</span></label>
<input
  type="range"
  id="volume"
  name="volume"
  min="0"
  max="100"
  value="50"
/>

<!-- Хэрэглэгчид харагдахгүй, серверт явуулах нэмэлт өгөгдөл -->
<input type="hidden" name="course-id" value="html-01" />

<!-- placeholder — хоосон үед харагдах зөвлөмж текст -->
<!-- Бичиж эхлэхэд алга болно -->
<input type="text" placeholder="Жишээ: Бат" />

<!-- value — анхны утга, засварлаж болно -->
<input type="text" value="Бат" />

<!-- Хоёуланг хамт хэрэглэж болно -->
<input type="number" placeholder="0" value="10" />

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

  <label for="name">Бүтэн нэр</label>
  <input type="text" id="name" name="name" placeholder="Овог Нэр" />

  <label for="email">И-мэйл</label>
  <input type="email" id="email" name="email" placeholder="example@mail.com" />

  <label for="age">Нас</label>
  <input type="number" id="age" name="age" min="1" max="120" />

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

  <p>Сонирхол:</p>
  <label>
    <input type="checkbox" name="interest" value="coding" />
    Програмчлал
  </label>
  <label>
    <input type="checkbox" name="interest" value="design" />
    Дизайн
  </label>

  <label for="avatar">Профайл зураг</label>
  <input type="file" id="avatar" name="avatar" accept="image/*" />

  <button type="submit">Хадгалах</button>
</form>