سینا صالحی فرد 03 اردیبهشت 1393 23 13259 بازدید آموزش HTML
فیلم آموزش کار با فرم ها (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>

 

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

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

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

تگ 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”>

دسترسی سریع :

نظرات کاربران (23)



  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 را چطور ساختین؟میشه بپرسم ازبین 49فیلم آموزشی کدوم شماره اس ؟ممنون میشم

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

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

  6. maleki

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


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

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

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


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

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

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


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


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

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

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


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

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

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