عناصر form

عناصر مرتبط به فرم در html

مبحث فرم ها بسیار گسترده است، سعی می کنیم تا مهمترین و پرکاربردترین عناصر مرتبط به فرم را معرفی کنیم تا شما هم بتوانید برای خودتان یک فرم بسازید.
از تگ <form> برای ساخت ورودی های ایمیل، ساختن فرم های ثبت نام، سرچ و فرم های نظرسنجی و… استفاده می گردد. ساختار کلی یک فرم به صورت زیر می باشد.

  • <form action=”url” method=”GET یا POST”>
  • تمامی عناصر مرتبط به فرم را در اینجا قرار میدهیم
  • </form>

ویژگی ها و عناصر مرتبط به فرم

در تگ form از دو ویژگی مهم action و method استفاده می کنند. action تعیین میکند که اطلاعات فرم به چه آدرسی باید ارسال شده و در آنجا پردازش بر روی آنها صورت گیرد و method که میتواند دارای دو حالت POST یا GET باشد مشخص می کند طریقه ارسال اطلاعات به چه صورت باشد.

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

 

دریافت اطلاعات با عنصر input

مهمترین عنصر دریافت اطلاعات از کاربران تگ input می باشد. input عنصر ارزشمندی است که بر اساس نیاز شما میتواند به اشکال گوناگون در آمده و از کاربر اطلاعات دریافت کند. مهمترین صفت تگ input که باعث تغییر نوع آن می گردد ویژگی type می باشد. دیگر ویژگی مهم برای عنصر ورود صفت name می باشد که برای ارسال فرم ها بسیار حائز اهمیت است.
در زیر تمامی انواع ورودی ها را می توانید مشاهده نمایید:

  • <input type=”button”>
  • <input type=”checkbox”>
  • <input type=”color”>
  • <input type=”date”>
  • <input type=”datetime-local”>
  • <input type=”email”>
  • <input type=”file”>
  • <input type=”hidden”>
  • <input type=”image”>
  • <input type=”month”>
  • <input type=”number”>
  • <input type=”password”>
  • <input type=”radio”>
  • <input type=”range”>
  • <input type=”reset”>
  • <input type=”search”>
  • <input type=”submit”>
  • <input type=”tel”>
  • <input type=”text”>
  • <input type=”time”>
  • <input type=”url”>
  • <input type=”week”>

ایجاد منوی dropdown با استفاده از عنصر Select در فرم

برای ایجاد منوی dropdown و قرار دادن آنها در فرم از تگی به نام select استفاده می کنند. هر select میتواند دارای تعدادی option یا انتخاب باشد.
از میان option ها، یکی به صورت پیشفرض می تواند انتخاب شده باشد که با اضافه کردن مقدار selected به option مورد نظر مشخص می گردد. اگر میخواهید کاربر قادر باشد بیش از یک آیتم را از لیست انتخاب نماید از عبارت multiple استفاده کنید و اگر میخواهید لیست انتخاب ها اندازه ی خاصی داشته و مابقی optionها به صورت اسکرولی نمایش داده شوند از ویژگی size استفاده کنید.

 

درج ناحیه نوشتاری با تگ textarea

با استفاده از تگ textarea میتوانید یک باکس چند خطی برای درج محتوای نوشتاری (برای درج نظر یا توضیحات) در اختیار کاربران قرار دهید. اندازه ی این ناحیه نوشتاری را میتوانیم با استفاده از صفات rows و cols مشخص کنیم.

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

  • <p><label for=”Name”>نام و نام خانوادگی </label><input type=”text” name=”Name” id=”Name” required></p>
  • <p><label for=”Email”>ایمیل </label><input type=”email” name=”Email” id=”Email” required></p>
  • <p><label for=”Phone”>شماره همراه </label><input type=”text” name=”Phone” id=”Phone”></p>
  • <p><label for=”select-name”>موضوع </label><select name=”select-name” id=”select-name”>
  • <option value=”web-design”>طراحی سایت</option>
  • <option value=”graphic-design”>طراحی گرافیک</option>
  • <option value=”smart-home”>هوشمند سازی</option>
  • <option value=”network”>شبکه</option>
  • </select></p>
  • <p><label for=”Text”>توضیحات </label><textarea name=”Text” id=”Text” cols=”60″ rows=”10″ required></textarea></p>
  • <input type=”submit” name=”submit” value=”ثبت” >

تعدادی از دیگر صفت های عناصر مرتبط به فرم ها عبارت اند از :

autocomplete_autofocus_form_formaction_formenctype_step
formmethod_formnovalidate_formtarget_height and width_list
min and max_multiple_pattern (regexp)_placeholder_required

همچنین بخوانید...!

دیدگاه‌ها بسته شده‌اند.