فرم های html
در این جلسه به آموزش فرم ها زبان کد نویسی HTML خواهیم پرداخت. لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
وقتی که می خواهید داده هایی را از سایت بازدید کننده جمع آوری کنید، به فرم های HTML احتیاج خواهید داشت. به عنوان مثال در هنگام ثبت کاربر، اطلاعاتی مانند نام، آدرس ایمیل و کارت اعتباری و غیره را جمع آوری می کنید. یک فرم داده ها را از بازدیدکننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI ،اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی فرایندهای مورد نیاز را بر اساس کار تعریف شده در برنامه، روی داده ی منتقل شده انجام می دهد.
عناصر متفاوتی برای فرم در دسترس می باشند، مانند فیلد های متن، فیلد های textarea ،منو های رو به پایین، دکمه های رادیو، چک باکس ها و غیره.
برچسب <form> مربوط به HTML ،برای ایجاد یک فرم HTML استفاده می شود و دارای ترکیب زیر می باشد.
<form action="Script URL" method="GET|POST"> form elements like input, textarea etc. </form>
ویژگی های فرم
علاوه بر ویژگی های متداول، در زیر لیستی از متداول ترین ویژگی های مربوط به فرم را مشاهده می کنید .
نکته: منظور از وبژگی ها همان اتری بیوت هایی است که از قبل با آنها آشنا شدیم. مانند href که یک ویژگی یا اتری بیوت برای تگ a بود.
نکته دوم: ممکن است بعد از خواندن توضیحات زیر متوجه منظور مطلب یا کارکرد ویژگی نشوید که کاملا طبیعی است, صرفا توضیحات زیر را بخوانید تا این اصطلاحات به گوشتان آشنا شود, بعدا به صورت کامل با کارکردشان آشنا خواهیم شد.
۱. action
اسکریپت backend برای پردازش داده ی انتقال شده ی شما آماده میباشد.
۲. method
روشی برای بارگذاری داده. متداولترین روش های مورد استفاده GET و POST می باشند.
۳. target
پنجره ی هدف یا چارچوب را، جایی که نتیجه ی اسکریپت نمایش داده خواهد شد، مشخص می کند. این ویژگی مقادیر parent, _self, _blank _و غیره را به خود می گیرد.
۴. enctype
شما می توانید از ویژگی enctype برای مشخص کردن چگونگی برنامه نویسی توسط مرورگر قبل از ارسال به سرور، استفاده کنید.
کنترل های فرم HTML
انواع مختلفی از کنترل های فرم وجود دارند که می توانید برای جمع آوری داده با استفاده از فرم HTML از آنها استفاده کنید
کنترل های ورودی متن
کنترل های چک باکس
کنترل های رادیو باکس
کنترل های انتخاب باکس (سلکت باکس)
باکس های انتخاب فایل
کنترل های مخفی
دکمه های قابل کلیک شدن
ثبت و تنظیم مجدد
کنترل های ورودی متن
سه نوع ورودی متن وجود دارد که در فرم ها استفاده می شوند .
کنترل های ورودی متن تک خطی این کنترل برای آیتم هایی استفاده می شود که فقط یک خط از ورودی کاربر را الزام دارد، مانند باکس های جستجو و نام ها. این کنترل ها با استفاده ازبرچسب <input> مربوط به HTML ایجاد می شوند
کنترل ورودی گذرواژه این نیز یک متن ورودی تک خطی می باشد، اما به محض اینکه کاربر کاراکتر را وارد می کند، این کنترل آن را می پوشاند.
کنترل های متن ورودی چند خطی زمانی استفاده می شود که الزام است کاربر جزئیاتی را وارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب <textarea> استفاده می شوند.
کنترل های ورودی تک خطی
این کنترل ها برای آیتم هایی استفاده می شوند که کاربر فقط یک خط ورودی احتیاج دارد، مانند باکس های جستجو و نام ها و با استفاده از برچسب <input> مربوط به HTML ایجاد می شوند.
مثال
در اینجا مثال پایه ای می بینید از یک ورودی تک خطی که برای گرفتن نام کوچک و نام خانوادگی به کار می رود .
<!DOCTYPE html> <html> <head> <title>Text Input Control</title> </head> <body> <form> First name <input type="text" name="first_name" /> <br> Last name <input type="text" name="last_name" /> </form> </body> </html>
فرم های html
ویژگی ها
در زیر لیستی از ویژگی های برچسب <input> را برای ایجاد فیلد متن می بینید.
۱. type
نوع کنترل ورودی را نشان می دهد و برای کنترل متن ورودی روی text تنظیم خواهد شد.
۲. name
برای دادن نام به کنترلی استفاده می شود که قرار است برای تشخیص به سرور ارسال شود و مقدار بگیرد.
۳. value
می تواند برای ارائه ی یک مقدار اصلی در داخل کنترل استفاده شود.
۴. size
اجازه می دهد تا عرض کنترل متن ورودی را متناسب با کاراکترها تعیین کنید
۵. maxlength
اجازه می دهد تا حداکثر تعداد کاراکترهایی را که یک کاربر می تواند در یک تکست باکس وارد کند، مشخص کنید
کنترل های پسورد ورودی
این کنترل نیز یک کنترل تک خطی می باشد، اما به محض اینکه کاربر کاراکترها را وارد می کند، آنها را می پوشاند. این ها نیزبا استفاده از برچسب <input> مربوط به HTML ایجاد می شوند، اما نوع ویژگی با عنوان password تنظیم میشود.
مثال
در اینجا مثالی از ورودی تک خطی پسورد می بینید که برای گرفتن پسورد کاربر استفاده می شود.
<!DOCTYPE html> <html> <head> <title>Password Input Control</title> </head> <body> <form> User ID <input type="text" name="user_id" /> <br> Password <input type="password" name="password" /> </form> </body> </html>
ویژگی ها
در زیر لیستی از ویژگی های برچسب <input> را برای ایجاد فیلد پسورد می بینید.
۱. type
نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی پسوورد، روی password تنظیم خواهد شد.
۲. name
برای دادن نام به کنترلی استفاده می شود که قرار است برای تشخیص به سرور ارسال شود و مقدار بگیرد.
۳. value
می تواند برای ارائه ی یک مقدار اصلی در داخل کنترل استفاده شود.
۴. size
اجازه می دهد تا عرض کنترل متن ورودی را متناسب با کاراکترها تعیین کنید
۵. maxlength
اجازه می دهد تا حداکثر تعداد کاراکترهایی را که یک کاربر می تواند در یک تکست باکس وارد کند، مشخص کنید
کنترل های متن ورودی چند خطی
زمانی استفاده می شود که یک کاربر باید جزئیاتی را وارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب <textarea> ایجاد میشوند.
مثال
در اینجا مثالی را می بینید از یک ورودی متن چند خطی که برای ارائه ی توصیفات آیتم استفاده می شود.
<!DOCTYPE html> <html> <head> <title>Multiple-Line Input Control</title> </head> <body> <form> Description <br /> <textarea rows="5" cols="50" name="description"> Enter description here... </textarea> </form> </body> </html>
فرم های html
ویژگی ها
در زیر لیستی از ویژگی های برچسب <textarea> ارائه شده اند.
۱. name
برای نامگذاری کنترلی استفاده می شود که به سرور ارسال می شود تا تشخیص داده شده و مقدار بگیرد.
۲. rows
تعداد ردیف های box area مربوط به متن را نشان می دهد
۳. cols
تعداد ستون های box area مربوط به متن را نشان می دهد
کنترل چک باکس
چک باکس ها زمانی استفاده می شوند که بیشتر از یک گزینه قرار است انتخاب شود. آنها نیز با استفاده از برچسب <input> ایجاد می شوند، اما نوع ویژگی به checkbox تنظیم می شود.
مثال
در اینجا مثالی از کد HTML را مشاهده می کنید برای یک فرم با دو چک باکس.
<!DOCTYPE html> <html> <head> <title>Checkbox Control</title> </head> <body> <form> <input type="checkbox" name="maths" value="on"> Maths <input type="checkbox" name="physics" value="on"> Physics </form> </body> </html>
در زیر لیستی از ویژگی های checkbox را می بینید
۱. type
نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی چک باکس با checkbox کنترل خواهد شد.
۲. name
برای دادن نام به کنترلی استفاده می شود که قرار است برای تشخیص به سرور ارسال شود و مقدار بگیرد.
۳. value
مقداری که اگر چک باکس انتخاب شود، استفاده خواهد شد.
۴. checked
اگر بخواهید آن را به طور پیش فرض انتخاب کنید، با checked تنظیم می شود.
کنترل دکمه ی رادیو
دکمه های رادیو زمانی استفاده میشوند که بین چندین گزینه تنها یک گزینه باید انتخاب شود. این کنترل ها نیز با برچسب <input> ایجاد میشوند، اما نوع ویژگی با radio تنظیم می شود.
مثال
در اینجا مثالی از کد HTML می بینید برای یک فرم با دو دکمه ی رادیو.
<!DOCTYPE html> <html> <head> <title>Checkbox Control</title> </head> <body> <form> <input type="radio" name="maths" value="on"> Maths <input type="radio" name="physics" value="on"> Physics </form> </body> </html>
فرم های html
ویژگی ها
در زیر لیستی از ویژگی های دکمه ی رادیو را می بینید
۱. type
نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی چک باکس با عنوان radio تنظیم می شود.
۲. name
برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور ارسال می شود.
۳. value
مقداری که radio box انتخاب شود، استفاده خواهد شد.
۴. checked
اگر می خواهید آن را به عنوان پیش فرض استفاده کنید، به checked تنظیم کنید.
کنترل Select Box
یک Select Box که منوی رو به پایین نیز نامیده می شود، گزینه ای را برای ارائه ی گزینه های مختلف به شکل یک لیست رو به پایین ارائه می دهد، که کاربر می تواند از آن یک یا بیشتر از یک گزینه را انتخاب کند.
مثال
در اینجا مثالی از کد HTML برای یک فرم با یک جعبه ی رو به پایین می بینید.
<!DOCTYPE html> <html> <head> <title>Select Box Control</title> </head> <body> <form> <select name="dropdown"> <option value="Maths" selected>Maths</option> <option value="Physics">Physics</option> </select> </form> </body> </html>
در زیر لیستی از ویژگی های برچسب <select> را می بینید.
۱. name
برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور انتقال می شود.
۲. size
برای نمایش یک لیست باکس اسکرولینک استفاده می شود.
۳. multiple
اگر روی multiple تنظیم شده باشد، به کاربر اجازه می دهد تا چند آیتم را از منو انتخاب کند
در زیر لیستی از ویژگی های مهم برچسب <option> ارائه شده است.
۱. value
اگر در سلکت باکس یک گزینه انتخاب شده باشد، این مقدار استفاده خواهد شد.
۲. selected
مشخص می کند که این گزینه در زمان بارگذاری صفحه، باید گزینه ی انتخابی باشد.
۳. label
یک روش جایگزین برای برچسب دار کردن گزینه ها
باکس آپلود فایل
اگر می خواهید به کاربر اجازه دهید تا فایلی را روی وب سایت شما آپلود کند، به یک کنترل فایل آپلود احتیاج خواهید داشت، که Select Box نیز نامیده می شود. این ویژگی با استفاده از برچسب <input> نیز ایجاد می شود، اما نوع ویژگی با file تنظیم می شود.
مثال
در اینجا مثالی را می بینید از کد HTML برای یک فرم با یک فایل آپلود باکس.
<!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <form> <input type="file" name="fileupload" accept="image/*" /> </form> </body> </html>
ویژگی ها
در زیر لیستی از ویژگی های فایل آپلود باکس را می بینید.
۱. name
برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور انتقال می شود.
۲. accept
نوع فایل هایی را که سرور می پذیرد، تعیین می کند.
دکمه های کنترل
راه های مختلفی برای ایجاد دکمه های قابل کلیک شدن وجود دارد. شما با استفاده از برچسب <input> و با تنظیم نوع ویژگی آن به button دکمه های قابل کلیک شدن ایجاد کنید. نوع ویژگی می تواند مقادیر زیر را بگیرد.
۱. submit
دکمه ای را ایجاد می کند که به طور خودکار یک فرم را می پذیرد.
۲. reset
دکمه ای را ایجاد می کند که به طور خودکار کنترل های فرم را به مقادیر اولیه ی خود بازمی گرداند.
۳. button
دکمه ای را ایجاد می کند که برای اجرای اسکریپت کاربر، زمانی که کاربر آن دکمه را کلیک می کند، استفاده می شود.
۴. image
یک دکمه ی قابل کلیک شدن ایجاد می گند، اما ما می توانیم از یک تصویر به عنوان زمینه ی دکمه استفاده کنیم.
مثال
در اینجا مثالی از کد HTML برای یک فرم با سه نوع دکمه را می بینید
<!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <form> <input type="submit" name="submit" value="Submit" /> <input type="reset" name="reset" value="Reset" /> <input type="button" name="ok" value="OK" /> <input type="image" name="imagebutton" src="/html/images/logo.png" /> </form> </body> </html>
فرم های html
کنترل های مخفی شده ی فرم
کنترل های مخفی شده فرم برای پنهان کردن داده در داخل صفحه ای استفاده می شوند که بعدا می توانند به سرور ارسال شوند. این کنترل در داخل کد مخفی شده و روی صفحه ی حقیقی ظاهر نمی شود. برای مثال فرم مخفی شده ی زیر برای حفظ شماره ی صفحه ی جاری استفاده می شود. وقتی که کاربر روی page next کلیک کند، مقدار کنترل مخفی شده به سرور وب ارسال شده و در آنجا تصمیم خواهد گرفت که بر اساس انتقال صفحه ی جاری، کدام صفحه نمایش داده خواهد شد.
مثال
در اینجا مثالی از کد HTML برای نمایش کاربرد کنترل مخفی شده می بینید.
<!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <form> <p>This is page 10</p> <input type="hidden" name="pagename" value="10" /> <input type="submit" name="submit" value="Submit" /> <input type="reset" name="reset" value="Reset" /> </form> </body> </html>
ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری فرم های html پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت.
پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.
دیدگاه ها