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

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <textarea> آشنا مي‌شويم. اين تگ براي ايجاد يک کادر متني چندخطي استفاده مي‌شود و معمولاً براي دريافت ورودي طولاني از کاربر کاربرد دارد.

تگ textarea در HTML چيست؟

تگ <textarea> به شما امکان مي‌دهد يک باکس چندخطي براي نوشتن متن ايجاد کنيد. برخلاف <input type="text"> که فقط يک خط متن دريافت مي‌کند، <textarea> مناسب کامنت‌ها، توضيحات يا پيام‌هاي طولاني است.

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

<form>
  <label for="message">پيام شما:</label><br>
  <textarea id="message" name="message" rows="4" cols="50">
اينجا متن خود را وارد کنيد...
  </textarea>
</form>

در اين مثال، کادر متني ? رديف و ?? ستون دارد و متن پيش‌فرض داخل آن نمايش داده مي‌شود.

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

ويژگي	توضيح
name	نام فيلد براي ارسال اطلاعات فرم
rows	تعداد رديف‌هاي قابل مشاهده در کادر متن
cols	تعداد ستون‌هاي قابل مشاهده در کادر متن
placeholder	نمايش متن راهنما هنگام خالي بودن کادر
maxlength	حداکثر تعداد کاراکتر مجاز
readonly	عدم امکان ويرايش محتوا
disabled	غيرفعال کردن کادر متن

مثال ترکيبي با CSS

<style>
textarea {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical; /* اجازه تغيير ارتفاع */
}
textarea:focus {
  border-color: #2196f3;
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
  outline: none;
}
</style>

<form>
  <label for="message">پيام شما:</label><br>
  <textarea id="message" name="message" rows="5" cols="50" placeholder="متن خود را وارد کنيد..."></textarea>
</form>

با CSS مي‌توان ظاهر کادر متن را جذاب‌تر کرد و افکت فوکوس ايجاد نمود تا تجربه کاربري بهتري فراهم شود.