المان های فرم در HTML
در فصل بیست و یکم: فرم ها، نحوه تعریف یک فرم را به طور کامل توضیح دادیم و چند مثال از المان هایی مانند <input> را مشاهده کردید. در این فصل به توضیح تمام المان های قابل استفاده در یک فرم اچ تی ام ال خواهیم پرداخت.
المان <input> در فرم HTML
مهم ترین المان موجود در فرم، المان <input> است. المان <input> را می توان به روش های مختلف وابسته به خاصیت type نمایش داد.
مثال:
اگر خاصیت type از قلم انداخته شود زمینه ورودی به روی حالت پیشفرض یعنی text گذاشته می شود.
تمام type های مختلف برای input در فصل بعدی به تفصیل تشریح خواهد شد.
المان <select> در فرم HTML
المان <select> یک لیست drop-down را تعریف می کند.
مثال:
المان <option> یک گزینه که می توان آن را انتخاب کرد را در <select> تعریف می کند.
در حالت معمولی اولین مورد در یک لیست drop-down در حالت انتخاب شده قرار می گیرد.
برای تعریف یک گزینه از قبل انتخاب شده خاصیت selected را به آن گزینه اضافه کنید.
مثال:
تعیین تعداد گزینه قابل نمایش در المان <select>:
از خاصیت size برای مشخص کردن تعداد مقادیر قابل نمایش استفاده کنید.
مثال :
اجازه دادن برای چندین انتخاب در المان <select>:
از خاصیت multiple برای اجازه دادن به کاربر در انتخاب چند گزینه استفاده کنید:
مثال:
المان <textarea> در فرم HTML
المان <textarea> یک زمینه ورودی چند خطی به نام محیط متن یا همان text area را تعریف می کند.
مثال:
خاصیت rows تعداد خط های قابل نمایش در یک محیط متنی را مشخص می کند. خاصیت cols عرض قابل نمایش در یک محیط متنی را مشخص می کند.
کد اچ تی ام ال بالا به این صورت در یک مرورگر به نمایش در می آید:
شما همچنان می توانید اندازه محیط متن را در سی اس اس تعریف کنید.
مثال:
المان <button> در فرم HTML
المان <button> یک دکمه کلیک شدنی را تعریف می کند.
مثال:
کد اچ تی ام ال بالا به این صورت در یک مرورگر به نمایش در می آید.
نکته : همیشه خاصیت type را برای یک دکمه مشخص کنید. مرورگر های مختلف ممکن است از type های پیشفرض مختلفی برای یک دکمه استفاده کنند پس همانطور که گفته شد همیشه خاصیت type را برای یک دکمه مشخص کنید.
المان های form در HTML نسخه 5
در اچ تی ام ال نسخه پنج المان های زیر اضافه شده است:
<datalist><output>
نکته : مرورگر ها المان های ناشخناخته را نمایش نمی دهند. المان های جدید که در مرورگر های قدیمی پشتیبانی نمی شوند صفحه شما را خراب نمی کنند.
المان <datalist> در HTML 5
المان <datalist> یک لیست از گزینه های از قبل تعریف شده را برای المان <input> مشخص می کند. کاربر ها یک لیست drop-down از گزینه های از پیش تعریف شده را در هنگام وارد کردن داده مشاهده می کنند. خاصیت list برای المان <input> باید به خاصیت id از المان <datalist> رجوع داده شود.
مثال:
المان <output> در HTML 5
المان <output> نمایان گر نتیجه یک محاسبه است مثل محاسبه های انجام شده به وسیله یک اسکریپت
مثال:
