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

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

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

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

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

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

[hdplay id=2]

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

[free_vip]
[video_download cat=’html’ url=’http://dl.onliner.co/html-videos/forms-introduction-login-form.mp4′]دانلود فیلم آموزش کار با فرم ها (form) در HTML[/video_download]
[/free_vip]

دسترسی سریع :

• آموزش قبلی : فیلم آموزش ایجاد کاراکترهای ویژه در صفحات وب
• آموزش بعدی : فیلم آموزش ساخت فرم تماس با ما بوسیله ی HTML
• لیست فیلم ها : فیلم های آموزش جامع HTML

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

فرم ها

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

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

[html]
<form>
</form>
[/html]

 

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

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

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

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

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

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

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

مثال :

[html]
<form action="https://onliner.co/form-get.php" method="get" target ="_blank">
</form>
[/html]

 

یا

[html]
<form action="https://onliner.co/form-post.php" method="post" target ="_blank">
</form>
[/html]

 

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

[html]

<input/>

[/html]

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

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

[html]

<form action="https://onliner.co/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>

[/html]

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

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

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

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

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

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

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

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

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

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

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

[html]

<form action="https://onliner.co/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>

[/html]

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

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

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

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

[html]

<form action="https://onliner.co/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>

[/html]

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

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

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

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

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

مثال :

[html]

<form action="https://onliner.co/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>

[/html]

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

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

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

[html]

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

[/html]

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

[html]

<label for=” username”>

[/html]

دسترسی سریع :

• آموزش قبلی : فیلم آموزش ایجاد کاراکترهای ویژه در صفحات وب
• آموزش بعدی : فیلم آموزش ساخت فرم تماس با ما بوسیله ی HTML
• لیست فیلم ها : فیلم های آموزش جامع HTML