فیلم آموزش کار با فرم ها (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.ir/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