free page hit counter
در حال بارگذاری وب سات شکیبا باشید

عناصر فرم اصلا چی هست؟ آشنایی با عناصر مهم هر فرم HTML


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

سرفصل‌های پست

عناصر فرم

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

عناصر هر فرم شامل تگ هایی هستند که فقط داخل فرم ها قابل استفاده هستند.

عنصر <input>

این عنصر یکی از مهم ترین عنصر های داخل فرم است. این عنصر را می توان بسته به مقدار خاصیت type به چندین روش نمایش داد.

<input name="firstname" type="text">

اگر خاصیت type از عنصر <input> حذف شود، مقدار پیش فرض خاصیت type فیلد ورودی برابر با text قرار می گیرد.

در آینده با عنصر ورودی ها یعنی input در مقاله آشنایی با ورودی ها بیشتر آشنا خواهیم شد.

عنصر <select>

این عنصر یک لیست drop-down تعریف می کند.

<form action="/action_page.php">
  <label for="Mizfa">Choose a Course:</label>
  <select id="Mizfa" name="Mizfa">
    <option value="Optimization">Optimization</option>
    <option value="SEO">SEO</option>
    <option value="Content">Content</option>
    <option value="Ads">Ads</option>
  </select>
  <input type="submit">
</form>
نمونه ای از Drop Down
نمونه ای از Drop Down

عنصر <option> یک آیتم قابل انتخاب به لیست اضافه می کند. به صورت پیش فرض اولین آیتم لیست انتخاب شده است. برای تنظیم یک آیتم از پیش انتخاب شده باید از خاصیت selected استفاده کنید.

<option value="SEO" selected>SEO</option>
نمونه ای از خاصیت Selected
نمونه ای از خاصیت Selected

همانطور که در تصویر مشاهده می‌کنید اینبار به جای Optimization ، آیتم SEO به عنوان آیتم پیش‌ انتخاب شده قرار گرفته است.

مقدار های قابل نمایش

خاصیت size اجازه می دهد تعداد خاصی از مقدار های لیست قابل نمایش باشند

<select name="Mizfa" size="۳">
 <option value="Optimization">Optimization</option>
 <option value="SEO">SEO</option>
 <option value="Content">Content</option>
 <option value="Ads">Ads</option>
</select>

اجازه انتخاب چندتایی

برای دادن اجازه به کاربر برای انتخاب چندتایی آیتم های لیست باید از خاصیت multiple استفاده کنیم

<select name="Mizfa" size="4" multiple>
 <option value="Optimization">Optimization</option>
 <option value="SEO">SEO</option>
 <option value="Content">Content</option>
 <option value="Ads">Ads</option>
</select>
اجازه انتخاب چندتایی لیست بازشونده
اجازه انتخاب چندتایی لیست بازشونده

عنصر <textarea>

این عنصر یک فیلد ورودی متنی چند خطی ایجاد می کند. کاربر می تواند متن چند خطی در این فیلد وارد کند.

<textarea name="message" rows="10" cols="30">
Mizfa Blog - Mizfa Academy - Mizfa.com
</textarea>

خاصیت rows تعداد خطوط قابل نمایش در فیلد متنی را دارد و خاصیت cols طول فیلد ورودی چند خطی است.

شما می توانید با استفاده از کد های CSS اندازه فیلد ورودی را تعیین کنید.

<textarea name="message" style="width:200px; height:600px;">
Mizfa Blog - Mizfa Academy - Mizfa.com
</textarea>
عنصر textarea
عنصر textarea

عنصر <button>

این عنصر یک دکمه قابل کلیک ایجاد می کند.

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

عناصر جدید فرم در HTML5

عنصر <datalist>

این عنصر یک لیست با آیتم های از پیش تعریف شده برای عنصر <input> تعریف می کند. کاربران همانطور که داده ها را در فیلد وارد می کنند یک لیست از آیتم های پیشفرض به کاربر نشان می دهد.

خاصیت list موجود در عنصر input باید به خاصیت id عنصر datalist اشاره داشته باشد.

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist> 
</form>

تگ <output>

این عنصر نماینده نتیجه یک فرآیند محاسباتی است (مانند انجام یک عمل خاص توسط اسکریپت)

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  ۰
  <input type="range"  id="a" name="a" value="50">
  ۱۰۰ +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>
تگ توضیحات
<form> یک فرم html برای ورودی کاربر تعریف می کند
<input> یک فیلد ورودی تعریف می کند
<textarea> یک فیلد ورودی چند خطی تعریف می کند
<label> یک لیبل برای تگ <input> تعریف می کند
<fieldset> دسته بندی عناصر مرتبط در یک فرم
<legend> یک کپشن برای تگ <fieldset> تعریف می کند
<select> یک لیست drop-down تعریف می کند
<optgroup> یک دسته بندی با آیتم های مرتبط برای لیست drop-down ایجاد می کند
<option> برای تعریف آیتم داخل لیست drop-down استفاده می شود.
<button> یک دکمه قابل کلیک تعریف می کند.
<datalist> یک لیست از آیتم های از پیش تعریف شده برای فیلد های ورودی تعریف می کند
<output> نتیجه یک فرآیند محاسباتی تعریف می کند.

نتیجه گیری

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

در ادامه حتما با هرکدام از این تگ ها آشنا خواهیم شد. در مقاله بعدی با عنصر  Input و خاصیت های آن آشنا می‌شویم.

این مقاله نیز به پایان، هر سوال پیشنهاد یا انتقادی داشتید خیلی خوشحال میشم که برامون بنویسید و ما حتما در اولین فرصت پاسخ خواهیم داد. تا مقاله بعد، فعلا…



منبع مقاله ارائه شده

Share:

مایل به ثبت دیدگاه هستید؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین دیدگاه‌ها

    شمارنده

    • 37
    • 372
    • 12,176
    • 354,905
    • 6
    • 10,788
    • 1,345
    • ۱۱ فروردین ۱۳۹۹
    Cart Item Removed. Undo
    • No products in the cart.