تگ textarea در HTML - وب سایت آموزشی وب تی ام ال

در این جلسه ابتدا توضیحاتی راجع به تگ textarea به شما عزیزان ارائه می کنیم و در ادامه، مطلب فرم در HTML را کامل خواهیم کرد.

تگ textarea

این تگ یک فیلد چند خطی ایجاد می کند؛ که می توان بطور نامحدود در آن مطلب نوشت. این المان دارای تگ پایانی است و متنی که بین تگ آغازین و پایانی نوشته می شود؛ در فیلد ظاهر می شود.

خصوصیات تگ textarea

cols: تعیین کننده پهنای فیلد مورد نظر بر اساس تعداد کاراکتر می باشد؛ که عددی مثبت است.
rows: تعیین کننده تعداد سطرهای فیلد است.
name: این خصوصیت یک نام برای تگ تعریف می کند.
readonly: با استفاده از این خصوصیت متنی که داخل فیلد نوشته شده قابل تغییر نمی باشد و فقط مشاهده می شود. ولی هنگام فرستادن اطلاعات فرم به سِروِر، ارسال می شود.
disabled: با به کار بردن این خاصیت کل فیلد غیرفعال می شود و هنگام ارسال اطلاعات فرم، مقدار مربوط به فیلد حاوی این خصوصیت به سِروِر ارسال نمی شود.

در ادامه مثالی را از تگ textarea مشاهده می کنید:

<textarea cols="20" rows="10" > your text </textarea>

نتیجه کد بالا را در تصویر زیر می بینیم:

دکمه submit

به منظور ارسال اطلاعات وارد شده در فرم به سِروِر از دکمه submit استفاده می شود. برای ایجاد این دکمه می بایست مقدار صفت type در تگ input را برابر submit قرار دهیم:

<body>
<input type="submit" value="send" >
</body>

دقت کنید مقداری که به خاصیت value می دهید همان چیزی است که روی دکمه submit نمایش داده می شود:

خاصیت placeholder

اگر بخواهیم درون Box های فرم عنوان آن نوشته شود باید از خاصیت placeholder استفاده کنیم. که با شروع نوشتن در box این مقدار ناپدید می شود:

<form>
<input type="text" name="username" placeholder="username" ><br>
<input type="password" name="password" placeholder="password" ><br>
<input type="submit" name="submit" value="send">
</form>

خاصیت required

حتماً برای شما پیش آمده که در برخی از فرم ها با فیلدهایی مواجه می شوید؛ که ستاره دار هستند و پرکردن آن ها ضروری است و در صورت خالی گذاشتن آن ها، فرم شما ارسال نمی شود. برای ایجاد چنین فیلدهایی، باید در تگ input مربوط به آن از کلمه required استفاده کرد.

<form>
<label>username * </label>
<input type="text" name="username" required ><br>
<label>password * </label>
<input type="password" name="password" required ><br>
<input type="submit" value="send">
</form>

همانطور که می بینید در صورت پرنکردن فیلدی که خاصیت required دارد بعد از زدن دکمه submit مرورگر به شما تذکر می دهد و از شما می خواهد ابتدا فیلد مورد نظر را پر کنید.
در اینجا مبحث فرم به پایان رسید، در جلسات بعد مباحث دیگر را دنبال خواهیم کرد. از همراهی شما سپاسگزاریم.