سینا صالحی فرد ۰۳ اردیبهشت ۱۳۹۳ ۲۳ 15469 بازدید
فیلم آموزش کار با فرم ها (form) در HTML

یکی از جذاب ترین موضوعات در طراحی صفحات وب، کار با فرم ها می باشد. خیلی اوقات در سایت ها نیاز داریم که اطلاعات کاربران را دریافت کنیم مثلاً برای نظرسنجی و ثبت نام از کاربران و یا ایجاد فرم تماس برای ارتباط کاربر با مدیر سایت.

برای ایجاد فرم در html باید از تگ <form> استفاده کنیم. یک فرم شامل عناصر مختلف است که این عناصر به کاربر اجازه می دهند تا اطلاعات خود را در فرم وارد کند،مانند label, input, textarea, select و …

مهمترین عنصر فرم، المنت input است که بسته به فیلدی که می خواهید داشته باشید، می تواند انواع مختلفی از جمله فیلد متنی، چک باکس ها، رمزعبور، دکمه های رادیویی، دکمه ارسال و … باشد.

آنچه در این فیلم آموزشی خواهید آموخت :

  • آموزش نحوه ی ارسال اطلاعات توسط تگ <form> به یک آدرس مشخص
  • توضیح attribute های تگ فرم
  • توضیح نحوه بکارگیری تگ input
  • بیان چگونگی ارسال اطلاعات در فرم
  • تعیین شیوه ارسال اطلاعات و بیان تفاوت متدهای get و post
  • آموزش ساخت یک فرم ورود (login) ساده در html

فیلم آموزش کار با فرم ها (form) در HTML

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

متن فیلم آموزش کار با فرم ها (form) در HTML

فرم ها

فرم ها نقش زیادی در طراحی صفحات وب دارند. ما معمولا در هر سایت حداقل یک فرم را می بینیم مانند : فرم ثبت نام، فرم ورود، فرم نظرسنجی، فرم تماس و …

فرم ها در html دارای یک opening tag و closing tag می باشند:

<form>
</form>

 

در هنگام کار با فرم ها به ۴ مسئله ضروری باید توجه کنید :

  • نام متغیر و مقدار متغیر باید ارسال شوند. (age = 24)
  • اطلاعات فرم را به کجا میخواهیم ارسال کنیم. ( تعیین با صفت action )
  • اطلاعات فرم را با چه متدی میخواهیم ارسال کنیم . (get – post)
  • تعریف نام برای متغیرها فراموش نشود.

در ادامه با ۴ مورد بالا با مثال تشریحی آشنا خواهید شد.

تگ form دارای attribute هایی می باشد :

  • Action=”mahal ersal form”
  • Method=”nahve ersal form”
  • Target=”_blank”

Method دارای دو مقدار post و get است که در ادامه با آن آشنا شده و تفاوت آن را توضیح خواهیم داد.

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

مثال :

<form action="http://onliner.ir/form-get.php" method="get" target ="_blank">
</form>

 

یا

<form action="http://onliner.ir/form-post.php" method="post" target ="_blank">
</form>

 

تگ بعدی که حتما باید در بین تگ form قرار گیرد تگ input می باشد که به صورت self close است.( می توانیم به وسیله آن چک باکس , باکس پسورد و… ایجاد کنیم. )


<input/>

Input دارای صفت type است که در آن مقادیر متفاوتی می تواند قرار گیرد.

اکنون ما با ساخت یک فرم login به شما یاد می دهیم که چگونه یک فرم ایجاد کنید.


<form action="http://onliner.ir/form-get.php" method="get" >

<label>username</label> <br />

<input type="text" /><br />

<label>password</label><br />

<input type="password"/><br />

<input type="reset" /><br />

<input type="submit" />

</form>

f1

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

به وسیله type=”text” یک فیلد متنی ایجاد کردیم.

ما به وسیله type=”password” یک فیلد ساختیم که می توانیم در آن پسورد بنویسیم. تفاوت password با text در این است که هر چیز را در فیلد password بنویسیم به صورت نقطه نقطه نشان می دهد .

به وسیله type=”reset” یک دکمه میسازیم که می توانیم تمام متن های داخل فیلد های موجود در فرم را پاک کنیم .

ما به وسیله type=” submit ” یک دکمه میسازیم که می توانیم اطلاعات فرم را به آدرسی که در تگ form با صفت action مشخص کردیم، ارسال کنیم.

اکنون میخواهیم فرم خود را تست کنیم که ببینیم کار می کند یا خیر

به عنوان مثال:

ما نام کاربری را Admin و رمزعبور Adminpw وارد می کنیم .

سپس بر روی دکمه submit کلیک می کنیم.

f2

اکنون می بینیم هر وقت اطلاعات را به آدرس مورد نظر ارسال می کنیم، پاسخی مشاهده نمی شود. مشکل این است که ما برای آن ها نامی انتخاب نکرده ایم و باید برای هر یک نامی انتخاب کنیم.

برای انتخاب نام از صفت name استفاده می کنیم.


<form action="http://onliner.ir/form-get.php" method="get" >

<label>username</label> <br />

<input type="text" name="username" /><br />

<label>password</label><br />

<input type="password" name="password"/><br />

<input type="reset" /><br />

<input type="submit" />

</form>

اکنون باز امتحان می کنیم

f2 f5

می بینیم اطلاعات به درستی ارسال شده است. حال اگر به آدرس سایت توجه کنیم، نشان می دهد که متغیر username و password دارای چه محتوایی است و این امینت کار ما را پایین می آورد و پسورد می تواند هک شود.

پس اگر نوع متد ارسال به صورت get بو د اطلاعات را در نوار آدرس می بینیم که مناسب فرم هایی که دارای پسورد می باشند نیست و استفاده از آن در این موارد توصیه نمی شود و امنیت را پایین می آورد.

اکنون همین form را با متد post امتحان می کنیم :


<form action="http://onliner.ir/form-post.php" method="post" >

<label>username</label> <br />

<input type="text" name="username" /><br />

<label>password</label><br />

<input type="password" name="password"/><br />

<input type="reset" /><br />

<input type="submit" />

</form>

f2 f6

می بینیم اطلاعات به آدرس مورد نظر ارسال می شود اما پسورد را در نوار آدرس خود مشاهده نمی کنیم. پس امنیت متد post بهتر از get است.

در متد post علاوه بر ارسال اطلاعات بصورت مخفی، میتوان طول داده ها را بیشتر داد ولی در متد get محدودیت در طول داده ها وجود دارد.

پس باید برای امنیت بیشتر از post استفاده کنیم. در ضمن برای ارسال اطلاعات بیشتر از متد post استفاده می شود.

Value،  صفت بعدی است که در تگ input قرار می گیرد و می توانید مقدار اولیه داخل فیلد را با آن تغیر دهید.

اکنون می پرسید چگونه نام پیشفرض دکمه submit و reset را تغیر دهیم؟ ما به وسیله صفت value این کار را هم می توانیم انجام دهیم.

مثال :


<form action="http://onliner.ir/form-post.php" method="post" >

<label>username</label> <br />

<input type="text" name="username" value="insert your user name" /><br />

<label>password</label><br />

<input type="password" name=" password "/><br />

<input type="reset" value="clear all fields" /><br />

<input type="submit" value=" send " />

</form>

f7

برای ایجاد کاربری راحت و ساده برای کاربران سایتتان یک ترفند در فرم ها را به شما آموزش میدهیم.

به عنوان مثال میخواهیم هر وقت روی کلمه ی username کلیک کردیم، فیلد username انتخاب و فعال شود :

ابتدا برای input خود یک id تعریف کنید.


<input id="username" type="text" name="username" value="insert your user name" />

سپس این آیدی را به عنوان مقدار برای صفت for در تگ label مربوطه استفاده می کنیم تا هر وقت کاربر بر روی کلمه ی username کلیک کرد، فیلد متنی مربوط به آن فعال شود.


<label for=” username”>

دسترسی سریع :

نظرات کاربران (۲۳)



  1. آموزش ودپرس

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

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      ممنون از توجه شما

  2. آرش

    سلام اگر کدی بخوام که فایل ضمیمه هم آپلود شه باید چکار کرد. میشه با دریافت هزینه برام انجام بدید؟

  3. MS

    سلام

    ممنون از آموزش های خوبتان. میشه کدهایی که درسمت سرور نوشتید رو در اختیار ما بگذارید؟ مقادیر رو در آرایه ذخیره می کنید؟

    ممنون

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      فقط از توابع
      print_r($_POST) va print_r($_GET) va
      در PHP استفاده شده است.

  4. هادی احمدی

    با عرض سلام و خسته نباشید خدمت برادر عزیز آقای آبسالان
    نحوه ی ایجاد یک فایل در تگ action چگونه است آیا باید یک فایل با فرمت php را در قسمت public html هاست درست نماییم و سپس آدرس آن را در قسمت تگ action وارد نماییم
    با تشکر از شما هادی احمدی

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      برای action کافی است آدرس مقصد (که میخواهید اطلاعات فرم به آن جا ارسال شود) را وارد کنید؛ بنابراین صحبت شما درست هست، و البته ممکن است لزوما فایل مقصد در همان سرور مبدا نباشد (مثلا در سایت دیگری باشد) ولی به طور کلی پاسخی که خودتان ارائه فرمودید، درست است.

  5. sara

    سلام وخسته نباشید
    فایل form-post.php را چطور ساختین؟میشه بپرسم ازبین ۴۹فیلم آموزشی کدوم شماره اس ؟ممنون میشم

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      ایمیل شما در بین ثبت نام کنندگان در این دوره آموزشی نیست. لطفا با اکانت خودتان وارد سایت بشوید، پاسخگوی سوالات شما خواهیم بود.

  6. maleki

    با سلام ببخشید در مورد امنیت وب سایت میشه فیلم آموزشی بگذارین


  7. میشه بیشتر توضیح بدین؟ یا آموزشی چیزی دربارش اگه دارین بگین استفاده کنم.

    • گروه طراحی سایت

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


  8. ببخشید یه سوال. شما برای صفت action آدرس یک فایل php رو وارد کردید که اطلاعات به اونجا ارسال بشن. چطور میشه یه همچین فایلی ساخت؟ ینی کلا چه راه هایی براش هست؟

    • گروه طراحی سایت

      فایل PHP رو باید جایی بسازید که مفسر PHP یا هر زبان سمت سرور دیگه ای (یا بصورت آنلاین و تحت اینترنت و یا بصورت لوکال) بتونه کنترل اجرایی داشته باشه.


  9. آره درست شدش. خیلی ممنون.


  10. این فایل مشکل داره و از ۱۶ دقیقه فقط حدود ۲ دقیقه اولش پخش میشه. اگه میشه راهنمایی کنید.

    • گروه طراحی سایت

      شما ویدئو رو دانلود هم کردید؟ توی نسخه ای که دانلود کردید هم پخش نشد یا فقط توی نسخه ای که آنلاین اجرا میشه پخش نشد؟


      • کلا ویدئو ها رو دانلود میکنم و آنلاین نمیبینم. این مشکل هم تو نسخه دانلود شده هستش.

        • گروه طراحی سایت

          این ویدئو رو جایگزین کردیم. مجدد دانلود کنید در نسخه ی جدید مشکل وجود ندارد. موفق باشید