آموزش کار با تگ فرم (form) در HTML
فهرست موضوعات در این آموزش
تقریبا در هر سایت یا وبلاگی و به طور کل در هر صفحه وبی عناصری تعاملی وجود دارد
که کاربر می تواند نسبت به آنها عکس العمل داشته باشد،
به طور مثال بر روی دکمه ای کلیک کند یا از بین گزینه های مربوط به نظرسنجی یک مورد را انتخاب نماید،
شکل برجسته این عناصر تعاملی فیلد ها و فرم هایی هستند که کاربران با تکمیل اطلاعات آنها و با کلیک بر روی دکمه ارسال،
مقادیری را به سرور و پایگاه داده سایت یا وبلاگ مورد نظر ارسال می کنند،
از آنجایی که این نوع امکانات در صفحات وب، وابسته به تگ form و عناصر زیرمجموعه آن است،
لذا فراگیری دقیق این مبحث می تواند در آینده نزدیک دید شما را نسبت به تکنولوژی وب عمیق
تر و چه بسا یک قدم به سمت برنامه نویسی حرفه ای نزدیک تر کند
تگ form در html
همان طور که پیش تر گفتیم، تگ فرم با هدف ایجاد قابلیت های تعاملی (دکمه، فیلدهای متنی، امکان آپلود فایل و…)
برای صفحات html تعریف شده است، در واقع کنسرسیوم جهانی وب یا w3c این نکته را مد نظر داشته که صفحات وب باید از قابلیت ارتباط دو سویه برخوردار باشند،
یعنی همان طور که به فرض مدیران یک سایت می توانند مطالبی در آن منتشر کنند،
کاربران نیز باید بتوانند در محتوای آن مشارکت داشته یا از قابلیت های آن به صورت سفارشی استفاده نمایند،
به این ترتیب و به تدریج عناصر و ویژگی های تعاملی که شباهت های زیادی با هم داشتند در قالب یک تگ با عنوان فرم (form) و زیرمجموعه های آن معرفی شد.
یک فرم ساده به صورت زیر در html تعریف می شود.
آموزش ایجاد فرم در HTML
برای ایجاد یک فرم HTML کارمان را با استفاده از تگ form شروع میکنیم. تگ فرم به صورت ساده و در حالت کلی، شکلی مشابه کد زیر خواهد داشت :
|
1 2 3 |
<form action="url" method="GET|POST"> کد های فرم اینجا قرار میگیرند </form> |
همانطور که مشاهده میکنید در تگ form از دو attribute با عناوین action و method استفاده کرده ایم.
هر دوی این صفات در کار کردن صحیح یک فرم، مهم و حائز اهمیت هستند.
action : با استفاده از این صفت تعیین میکنید که اطلاعات فرم به چه آدرسی ارسال شود.
کافی است آدرس صفحه ای را که قرار است اطلاعات فرم را پردازش کند به عنوان مقدار action قرار دهید.
method : متد میتواند دارای دو حالت POST یا GET باشد.
زمانی نوع GET را برای فرم خود انتخاب میکنیم که اطلاعاتی که توسط فرم ارجاع داده میشوند،
دارای اهمیت (خصوصا اهمیت امنیتی) خاصی نیستند. مثلا یک کوئری جستجو و … وقتی از حالت GET استفاده کنید،
متغیر ها و مقادیر آنها پس از ارسال فرم، در انتهای آدرسی که به عنوان action فرم قرار گرفته، قابل مشاهده خواهند بود.
دریافت اطلاعات با عنصر input
input عنصر ارزشمندی است که بر اساس نیاز شما میتواند به شکل های گوناگونی در آمده و از کاربر اطلاعات دریافت کند. تغییر نوع input را با استفاده از صفت type انجام میدهیم. به کد زیر توجه کنید :
|
1 |
<input type="typeName" name="set"> |
صفت name برای عناصر فرم
قبل از اینکه شروع کنیم و عناصر قابل استفاده در فرم را به شما معرفی کنیم، لازم است به این نکته اشاره کنیم که اگر میخواهید اطلاعاتی که در یک فرم از کاربر دریافت میکنید، به صورت صحیح ارسال شوند، تک تک عناصر فرم شما باید دارای attribute یا صفت name باشند. مشخص نکردن name برای یک عنصر میتواند منجر به عدم ارسال اطلاعات این عنصر به صفحه ی action فرم و ناقص شدن اطلاعات دریافتی شود. بنابراین نسبت دادن نام به عناصری که در فرمتان قرار خواهید داد را فراموش نکنید.
تایپ text
text : استفاده از این تایپ برای شما یک خط ورودی متنی ایجاد میکند.
مثلا استفاده از این تایپ در زمانی که میخواهید نام، نام خانوادگی و کلیه ی موارد مشابه را از کاربر دریافت کنید میتواند مناسب باشد. نمونه ی استفاده از این تایپ به شکل زیر است :
|
1 |
<input type="text" name="lastname"> |
تایپ radio
radio : این تایپ برای شما انتخاب های رادیویی ایجاد میکند.
به این صورت که میتوانید با درج چندین input دارای تایپ radio به کاربر انتخاب های مختلفی بدهید که تنها یکی از آنها قابل انتخاب باشد. توجه داشته باشید که در این حالت در مورد هر گروه انتخاب، باید نام تمامی input های رادیویی که ایجاد میکنید را یکسان در نظر بگیرید :
|
1 2 |
<input type="radio" name="subject" value="maths"> مرد <input type="radio" name="subject" value="physics"> زن |
تایپ password
password : تفاوت این نوع با نوع text این است که در این حالت به محض اینکه کاربر هر کارکتر را وارد میکند،
محتوای وارد شده mask میشود و بجای آن ستاره یا دایره به نمایش در می آید.
به همین جهت استفاده از نوع password برای دریافت اطلاعات محرمانه مانند رمز عبور مناسب خواهد بود.
در نمونه ی زیر ابتدا نام کاربری و سپس پسورد را از کاربر درخواست میکنیم :
|
1 |
Password : <input type="password" name="password" > |
تایپ checkbox
checkbox : چک باکس ها به کاربر این امکان را میدهند که در صورت تمایل به صورت همزمان بتواند چندین گزینه را انتخاب کند.
(دقیقا برعکس radio) در اینجا هم مانند انتخاب های رادیویی،
باید در نظر داشته باشید که برای یک گروه انتخاب، نام یکسانی در نظر بگیرید.
مثلا در کد زیر، کاربر میتواند از بین سه نوع وسیله ی نقلیه، آنهایی که مایل است را انتخاب کند :
|
1 2 3 |
<input type="checkbox" name="vehicle" value="red"> قرمز<br> <input type="checkbox" name="vehicle" value="blue" checked> آبی<br> <input type="checkbox" name="vehicle" value="block"> سیاه |
استفاده از مقدار checked در خط دوم ورودی درج شده در کد بالا، نشان میدهد که این انتخاب، از پیش تیک خورده و به صورت پیشفرض انتخاب شده است.
تایپ file
file : با استفاده از این تایپ میتوانید به کاربر اجازه بدهید که فایل دلخواه خود را بارگذاری کرده و به همراه فرم ارسال کند.
برای این تایپ صفتی با عنوان accept وجود دارد که نشان میدهد که این ورودی فایل میتواند چه پسوند هایی از فایل را قبول کند.
شکل کلی این نوع ورود به صورت زیر است :
|
1 |
<input type="file" name="image" accept="image/*"> |
مثلا اگر میخواستیم ورودی داشته باشیم که همه ی فایل های صوتی،
ویدئویی و عکس ها را قبول کند میتوانستیم از کد زیر استفاده کنیم :
|
1 |
<input type="file" name="somename" accept="audio/*,video/*,image/*"> |
درج ناحیه نوشتاری یا textarea
با استفاده از تگ textarea میتوانید یک باکس چند خطی برای درج محتوای نوشتاری در اختیار کاربر قرار دهید.
نمونه ای از این حالت، میتواند باکس های درج نظر یا باکس های درج توضیحات و کلیه ی موارد مشابه باشد.
اندازه ی این ناحیه نوشتاری را میتوانیم با استفاده از صفات rows و cols مشخص کنیم.
مقدار rows نمایانگر تعداد ردیف ها و cols نمایانگر تعداد ستون های ناحیه نوشتاری خواهد بود. مثلا :
|
1 2 3 |
<textarea rows="5" cols="50" name="description"> دیدگاهتان را در اینجا درج کنید ... </textarea> |
آموزش ایجاد منوی دراپ داون با استفاده از عنصر Select
ایجاد منو های دراپ داون و قرار دادن آنها در فرم بسیار ساده است. در اینجا از تگی به نام select استفاده خواهیم کرد.
هر تگ select میتواند تعدادی option یا انتخاب را در بر بگیرد که از میان این انتخاب ها،
یکی به صورت پیشفرض انتخاب شده که با اضافه کردن مقدار selected به option مورد نظر مشخص میشود.
به مثال زیر توجه کنید :
|
1 2 3 4 5 6 7 |
<select name="subject"> <option value="Math" selected>تهران</option> <option value="Physics">اصفهان</option> <option value="Physics">تبریز</option> <option value="Physics">شیراز</option> <option value="Physics">اهواز</option> </select> |
تایپ reset
reset : این نوع دکمه میتواند اطلاعات درج شده در فرم را پاک کرده و فرم را به حالت اول برگرداند.
به مثال زیر توجه کنید :
|
1 2 |
<button type="submit" value="Submit">ارسال</button> <button type="reset" value="Reset">خالی کردن</button> |
تایپ submit
submit : این نوع input برای ارسال داده های فرم به صفحه ای که در پارامتر action تعیین کرده اید به کار میرود.
در این حالت دکمه ی شما حالت نوشتاری خواهد داشت.
در صورت تمایل میتوانید بجای این تایپ از تایپ image برای عنصر input استفاده کرده و تصویر دلخواه را در آن قرار دهید.
تایپ image نیز دقیقا مانند submit عمل میکند
با این تفاوت که در شکل ظاهری آن میتوان از تصویر استفاده کرد :
|
1 2 3 |
<input type="submit" value="Submit"> یا <input type="image" src="imgsubmit.png" alt="Submit" width="48" height="48"> |
خوب دوست عزیز این آموزش به پایان رسید امیدواریم که از این آموزش لذت برده باشید و در آینده نیز در آموزش های بعدی همراه ما باشید.
من با این بخش مشکل داشتم.ولی خیلی روان و خوب توضیح دادین من یاد گرفتم.منظم توضیح دادید 🙂
خواهش می کنم خوشحالم که برای شما مفید بوده موفق باشید
سلام
کجا مشخص کنیم که اون فرم به کدوم آدرس ارسال بشه؟یا کدوم ایمیل؟
سلام خدمت شما دوست گرامی ایمیل خود فرم ایمیل ارسال نمی کنه باید توسط کد های PHP داینامک بشه