آشنایی با عناصر فرم در 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>

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

<option value="SEO" selected>SEO</option>

همانطور که در تصویر مشاهده می‌کنید اینبار به جای 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>

عنصر <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>

پایان ترم

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

۱ – نام

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

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

۴ – موضوع

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

۶ – دکمه ثبت

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

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

نتیجه گیری

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

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

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