محتوای آموزشی

المان های تگ فرم

المان های تگ فرم

در مقالات یاد گرفتیم که تگ فرم به تنهایی معنا ندارد و با المانها و تگهای داخل آن کاربرد دارد. در این مقاله با تمامی تگهای فرم آشنا خواهیم شد.

تگ <input>در فرم

یکی از مهمترین و پرکاربرد ترین تگهای فرم میباشد، که انواع مختلفی دارد که نوع آن با شناسه type مشخص میشود.

درباره انواع تگ <input> در مقالات قبل به طور مفصل صحبت کرده ایم. که برای آشنایی بیشتر میتوانید. به دو مقاله زیر مراجعه کنید:

معرفی انواع فیلدهای ورودی (قسمت اول)
معرفی انواع فیلدهای ورودی (قسمت دوم)

 

تگ select در فرم

 

برای ساخت یک منوی کشویی که دارای چند گزینه باشد، از تگی به نام select به همراه تگ زیرمجموعه آن یعنی option استفاده می شود.

<form>

  <select name="cars">

  <option value="volvo">Volvo</option>

  <option value="saab">Saab</option>

  <option value="fiat">Fiat</option>

  <option value="audi">Audi</option>

  </select>

  <br><br>

  <input type="submit">

</form>

خروجی:



 

به طور پیش فرض گزینه اول این لیست در حالت انتخاب شده میباشد.اگر بخواهیم حالت انتخاب روی گزینه دیگری باشد از خاصیت selected استفاده میکنیم.

در حالت عادی هر تگ select مجاز به ارسال تنها یک مقدار است، لذا برای ارسال مقادیر چندگانه، باید خاصیت multiple را به این تگ اضافه کنیم.

مثال:

<form>

  <select name="cars[]"  multiple="multiple">

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

    <option value="fiat">Fiat</option>

    <option value="audi">Audi</option>

  </select>

  <br><br>

  <input type="submit">

</form>

خروجی :



 

همچنین می توان برای هر چند گزینه یک سرگروه انتخاب کرد که خود سرگروه قابل انتخاب نیست. سرگروه ها با تگ <optgroup> نوشته می شوند و متن خروجی سرگروه با ویژگی label نام گذاری می شود:

<form>

<select name="cname">

<optgroup label="آسیا">

<option value="iran">ایران</option>

<option value="china">چین</option>

<option value="japan">ژاپن</option>

</optgroup>

<optgroup label="آمریکا">

<option value="america">آمریکا</option>

<option value="canada">کانادا</option>

</optgroup>

</select><br />

<input type="submit" value="ثبت" />

</form>

خروجی کد بالا به شکل زیر است:


 

تگ <textarea>

گاهی اوقات نیز نیاز است تا چندین خط نوشته را ارسال کرد. مثلا در فرم نظر دهی یک سایت یا نوشتن یک پیغام. در این زمان textarea به کمک ما می آید. این عنصر نیز جزء مقادیر input نیست و به تنهایی یک عنصر است اما مانند فیلد های input با فرم ارسال می شود. این عنصر شامل دو ویژگی cols و rows است که به ترتیب تعداد ستون ها و ردیف های این عنصر را تعیین می کند.

اندازه ها برای cols و rows صرفا جهت نمایش دلخواه فیلد کاربرد دارند و مانع ورود کاراکترهای بیشتر نمی شوند.همچنین اندازه این نوع فیلد با css قابل تغییر تغییر میباشد.

ویژگی مهم دیگری که در textarea زیاد استفاده می شود و اهمیت زیادی دارد dir است که راست به چپ بودن یا چپ به راست بودن را تنظیم می کند. اگر شما می خواهید سایتی فارسی داشته باشید همیشه این مقدار را روی rtl تنظیم کنید.

همچنین میتوانید باویژگی maxlength برای تعداد کاراکترهای ورودی محدودیت ایجاد کنید. محدودیت کاراکتر می تواند در سرور اعمال گردد یا در صفحات وب از تکنیک های دیگری مانند جاوا اسکریپت برای نمایش حداکثر کاراکتر مجاز به کاربر استفاده شود.

<form>

<textarea name="your-text" cols="50" rows="8" dir="rtl">

متن خود را اینجا بنویسید

</textarea>

</form>

خروجی

تگ <button>

برای ایجاد یک دکمه از این تگ استفاده میشود.

مثال

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

خروجی

تگ <datalist>

شما میتوانید با استفاده از تگ datalist لیستی از انتخابهای معتبر رو برای کاربران تعریف کنید و آنها را به یک input نسبت بدهید و آن رو شبیه به المنت select درآورید. این ویژگی در مرورگرهای مختلف بصورت متفاوت نمایش داده میشود و نحوه عملکرد کلی به این صورت هست که یک فلش drop-down در سمت راست input قرار میگیرد و کاربران با دیدن آن متوجه میشوند که این input، موارد از پیش تعریف شده ای را قرار داده است.

برای درکبهتر این موضوع مثال زیر را در نظر بگیرید:

<form>

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

  <input type="submit">

</form>

خروجی:

 

همونطور که در مثال بالا هم میبینید زمانی که بر روی این فلش کلیک میشود، یک لیست شامل موارد از پیش تعریف شده باز میشود و شما میتوانید یکی از آنها را انتخاب کنید. علاوه بر اینکار شما میتوانید متنی را درون input وارد کنید و مرورگر بصورت اتوماتیک درون لیست جستجو کرده و مواردی که match هستند را پیدا کرده و به کاربر نشان میدهد که میتواند آنها رو انتخاب کند. مثلا در بالا اگر حرف g را تایپ کنیم، مورد مربوط به Google نمایش داده میشود و سریعا میتوانیم آن را انتخاب کنیم.

همچنین برای تگ datalist یک id قرار دادیم و آن را به ویژگی list مربوط به المنت input نسبت دادیم.

تگ datalist در مرورگرهای سافاری و IE9 و نسخه های قبلتر پشتیبانی نمیشود.

تگ <keygen>

از این تگ برای استخراج کد استفاده می شود. به این صورت که در فرم خود برای کد کاربری خود از این تگ استفاده می کنید و کدهای کاربری به کدهای امنیتی تبدیل می شوند.تیکه کد زیر نحوه استفاده از این تگ می باشد.

مثال:

<form>

  Username: <input type="text" name="user">

  Encryption: <keygen name="security">

  <input type="submit">

</form>

تگ <output>

از این تگ برای تعریف مکان خروجی استفاده می شود. به این صورت که بعد از اعمال عملیات محاسباتی مقدار بدست آمده در فیلد این تگ ذخیره می شود. تیکه کد زیر نحوه استفاده از این تگ می باشد.

مثال

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

  0

  <input type="range" id="a" name="a" value="50">

  100 +

  <input type="number" id="b" name="b" value="50">

  =

  <output name="x" for="a b"></output>

  <br><br>

  <input type="submit">

</form>

خروجی

0 100 + =

 
کامنت جدید ...
Sort by:

مطالب پیشنهادی

'