آشنایی با عناصر فرم در HTML

چه عناصری در فرم ها وجود دارد؟

عناصر فرم در 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="3">
 <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
  • Output

عنصر <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)">
  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>
تگ توضیحات
<form> یک فرم html برای ورودی کاربر تعریف می کند
<input> یک فیلد ورودی تعریف می کند
<textarea> یک فیلد ورودی چند خطی تعریف می کند
<label> یک لیبل برای تگ <input> تعریف می کند
<fieldset> دسته بندی عناصر مرتبط در یک فرم
<legend> یک کپشن برای تگ <fieldset> تعریف می کند
<select> یک لیست drop-down تعریف می کند
<optgroup> یک دسته بندی با آیتم های مرتبط برای لیست drop-down ایجاد می کند
<option> برای تعریف آیتم داخل لیست drop-down استفاده می شود.
<button> یک دکمه قابل کلیک تعریف می کند.
<datalist> یک لیست از آیتم های از پیش تعریف شده برای فیلد های ورودی تعریف می کند
<output> نتیجه یک فرآیند محاسباتی تعریف می کند.

پایان ترم

[box type=”info” class=”question-from-users” width=””]

یک فرم با اطلاعات داخلی زیر بسازید و کد آن یا تصویر آن را بفرستید:

۱ – نام

۲ – نام خانوادگی

۳- لیست انتخابی (دراپ داون یا چند انتخابی، هرکدوم خودت دوست داری)  – دپارتمان ها : ۱ – فنی ۲ – پشتیبانی ۳- فروش

۴ – موضوع

۵ – باکس نوشته (از نوع Textarea)

۶ – دکمه ثبت

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

7 نظر

7 پاسخ

    1. سلام علی اکبر، ممنون که نتیجه‌رو هم به اشتراک گذاشتی.

  1. سلام
    فایده ی نوشتن value چیه در حالی که می تونیم بدون نوشتنش همون مورد رو بین تگ ها بنویسیم.?
    h>

    1. سلام حمید رضا.
      فایده ای که داره این هستش که شما مقدار پیش فرض هر فیلد را مشخص می‌کنید و اگر کاربر نخواست اون فیلد رو پر کنه، به صورت خودکار مقدار داخل خاصیت Value ارسال میشه. موفق باشی.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=