آموزش HTML - بخش پانزدهم (پایانی): ایجاد فرم در اچ تی ام ال

فرم‌ها در برنامه نویسی وب و خصوصا ارتباط با سرور نقش بسیار مهمی دارند. ما در این بخش هر چند به نحوه ارتباط فرم و ارسال و دریافت اطلاعات از سمت سرور کاری نداریم، ولی قصد داریم تا به شما نحوه قرار دادن این المان را در اچ تی ام ال آموزش دهیم. با ما همراه شوید.

 همانند تمامی بخش‌های اچ تی ام ال، فرم‌ها با تگ مخصوص خودشان شروع و با همان تگ و علامت / بسته می‌شوند در واقع تگ‌های ما به صورت <form> </form> شروع می‌شود و باقی اطلاعات فرم ما بین این دو تگ نوشته می‌شود.  در واقع برای شروع مرحله اول ما به شکل زیر خواهد بود.

<form>

.محتویاتی که قرار است در قالب فرم ارسال شوند .

<form/>

مرحله اول: تگ <form> را باز می‌کنیم. این تگ به خودی خود ظاهر مشخص و قابل تصویری ندارد و تگ‌هایی که در داخل آن هستند، نمایش داده می‌شوند. 

مرحله دوم: برای وارد کردن اطلاعات در داخل فرم ما از تگ <input> استفاده می‌کنیم. این تگ در واقع به شکل‌های مختلف اطلاعات را از ما می‌گیرد و به سرور ارسال می‌کند.  تگ‌های اینپوت انواع مختلفی دارند که در ادامه بدان‌ها خواهیم پرداخت. 

مرحله سوم: در نهایت تگ فرم را می‌بندیم: <form/>

انواع ورودی‌ها: 

همانطور که گفتیم، ورودی‌هایی که درون فرم‌ها قرار دارند، انواع مختلفی دارند. این ورودی‌ها را input می‌گوییم و با تگ <input> می‌نویسیم. در واقع ما به شکل‌های مختلفی می‌توانیم وروردی‌ها را از کاربران دریافت کنیم. به همین خاطر در کنار تگ <input> کلمه‌ یا صفتی به نام Type قرار می‌گیرد که ما به کمک آن‌ مشخص می‌کنیم قصد دریافت چه اطلاعاتی را از کاربر داریم(درست فهمیده‌اید، type یک اتریبیوت برای تگ input است). این موضوع را در زیر نشان داده‌ایم. 

<input  type= "text"> 

<input  type= "radio">

<input  type= "submit">

ورودی متن:

<"input  type= "text> برای دریافت متن به عنوان ورودی به کار می‌رود. در واقع هر چیزی که به عنوان متن محسوب شود (مثل نام کاربری، نام فرد، سن و سال یا هر چیز دیگری که متن باشد) در این ورودی‌ها قرار می‌گیرد. 

نمونه کد

نام: <br>

<input type="text"  value="زومیت"><br>

نام خانوادگی: <br>

<input type="text"  value="زومیت">

نتیجه‌ای که مرورگر نمایش خواهد داد

نام:

نام خانوادگی:


اتریبیوت value در فرم‌ها مقدار پیش فرضی را برای ورودی قرار می‌دهد. مثلا در فرم بالا مقدار پیش فرض نام و نام خانوادگی، زومیت است.

دکمه‌های رادیو: 

نوع دیگر ورودی‌ها radio است. رادیوها در واقع دکمه‌هایی هستند که در مواقعی که قصد ایجاد حق انتخاب برای کاربر داریم به کار می‌بریم. نمونه این دکمه‌ها را در زیر می‌بینید.

نمونه کد

<input  type="radio" name="1" value="html" checked> اچ تی ام ال

<br>

<input  type="radio" name="1" value="CSS"> CSS

نتیجه‌ای که مرورگر نمایش خواهد داد

اچ تی ام ال
 CSS

 

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

چک باکس:

<"input  type= "checkbox> برای ایجاد چک باکس به کار می‌رود. در واقع با استفاده از دکمه‌های دایره‌ای رادیو، معمولا تنها یک گزینه را می‌توان همزمان استفاده کرد ولی در چک باکس شما می‌توانید هر چند تا از گزینه‌ها که دوست دارید را انتخاب کنید.

 

نمونه کد

<input  type="checkbox" >زومیت

<br>

<input  type="checkbox"> زومجی

نتیجه‌ای که مرورگر نمایش خواهد داد

زومیت
زومجی

 

رمز عبور

<"input  type= "password> برای ورود رمز عبور به کار می‌رود. این نوع ورودی متن‌هایی که در فیلد ورودی نوشته می‌شود را به صورت رمزگذاری شده و دایره‌های مشکی نمایش می‌دهد. 

نمونه کد

نام کاربری: <br>

<input type="text" ><br>

رمز عبور: <br>

<input type="text"  >

نتیجه‌ای که مرورگر نمایش خواهد داد

نام کاربری :

رمز عبور


<"input  type= "submitنوع دیگر ورودی‌ها submit است. این ورودی‌ که در واقع یک دکمه است، برای ثبت ورودی‌های قبلی به کار می‌رود. در واقع شما بعد از اینکه ورودی‌های قبلی(متنی یا رادیو) را پرکردید در نهایت با فشردن دکمه ثبت یا submit آن‌ها را ثبت و ذخیره می‌کنید.

 

نمونه کد

نام کاربری: <br>

<input type="text" ><br>

رمز عبور: <br>

<input type="text"  >

نتیجه‌ای که مرورگر نمایش خواهد داد

نام کاربری

رمز عبور


 

مجموعه این المان‌ها در قالب تگ فرم به سمت سرور حرکت می‌کنند. البته نحوه ارسال اطلاعات تگ فرم به سمت سرور موضوعی است که در ارتباط با سرور کاربرد دارد و ما نیز توضیحات آن را برای جلوگیری از طولانی شدن مطلب حذف کرده‌ایم. 

خب تا اینجای کار با مفهوم فرم را متوجه شده‌اید. حالا نوبت شماست تا یک فرم ثبت نام با دو فیلد نام و نام خانوادگی بنویسید. 

امیدواریم که این آموزش، موفق به جلب رضایتتان شده باشد. تجربیات، پیشنهادات و نظرات شما بدون شک در ادامه‌ی این مقالات آموزشی تاثیر بسزایی خواهد داشت. پس لطفا با ما در ارتباط باشید.

از سراسر وب

  دیدگاه
کاراکتر باقی مانده

بیشتر بخوانید