آموزش و يادگيري تگ input در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <input> آشنا مي‌شويم. اين تگ براي دريافت ورودي از کاربران استفاده مي‌شود و يکي از پرکاربردترين عناصر فرم‌ها در HTML است.

تگ input در HTML چيست؟

تگ <input> عنصر خالي است که براي دريافت انواع مختلف داده‌ها مانند متن، شماره، ايميل، گذرواژه، فايل و حتي دکمه‌ها استفاده مي‌شود. ويژگي type تعيين مي‌کند نوع ورودي چيست و ساير ويژگي‌ها مانند placeholder و value رفتار آن را کنترل مي‌کنند.

مثال ساده از تگ input

<form>
  <label for="name">نام:</label>
  <input type="text" id="name" name="name" placeholder="نام خود را وارد کنيد">

  <label for="email">ايميل:</label>
  <input type="email" id="email" name="email" placeholder="ايميل خود را وارد کنيد">

  <input type="submit" value="ارسال">
</form>

در اين مثال يک فرم ساده داريم که از کاربران نام و ايميل دريافت مي‌کند و يک دکمه ارسال دارد.

انواع ورودي‌هاي input

text: دريافت متن ساده
password: دريافت گذرواژه به صورت مخفي
email: دريافت ايميل با اعتبارسنجي اوليه
number: دريافت عدد
checkbox: انتخاب چندگزينه‌اي
radio: انتخاب يک گزينه از چند گزينه
file: بارگذاري فايل
submit: دکمه ارسال فرم
button: دکمه معمولي

ويژگي‌هاي مهم تگ input

ويژگي	توضيح
type	نوع ورودي
name	نام فيلد براي ارسال داده‌ها
id	شناسه يکتا براي ارجاع به فيلد
placeholder	متني که در فيلد قبل از وارد کردن کاربر نمايش داده مي‌شود
value	مقدار پيش‌فرض فيلد
required	اجباري بودن پر کردن فيلد

مثال با استايل CSS

<style>
  input[type="text"], input[type="email"], input[type="password"] {
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #2196f3;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  input[type="submit"] {
    background-color: #2196f3;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  input[type="submit"]:hover {
    background-color: #1976d2;
  }
</style>