در جلسه قبلی آموزش HTML با نحوه ایجاد لیست ها در HTML آشنا شدیم. در این بخش قصد داریم نحوه ایجاد فرم ها در HTML را یاد بگیریم.
یک فرم HTML بخشی از سند است که شامل کنترل های تعاملی به منظور فعال سازی یک بخش برای دریافت و ارسال اطلاعات از کاربر به سمت وب سرور است.
فرم در HTML چیست
فرم ها در HTML برلی جمعاوری انواع اطلاعات ورودی کاربر مثل اطلاعات تماسی مانند نام, ایمیل, شماره تماس, یا جزییاتی مثا حساب بانکی برای پرداخت آنلاین و غیره ست.
فرم ها شامل المان های خاصی به نام کنترل ها مثل باکس ورودی متن, باکس های چند انتخابی (checkbox) , دکمه های تک انتخابی (radio-button), دکمه ارسال (submit) و غیره است.
کاربران معمولا یک فرم را با تغییر دادن کنترل ها مثل وارد کردن متن, انتخاب آیتم ها و غیره.. فرم را تکمیل و با سابمیت این فرم, اطلاعات را به سمت وب سرور برای پردازش ارسال می کند.
تگ <form> برای ساخت فرم HTML استفاده می شود. مثال ساده زیر از فرم لاگین را می توانید ببینید :
|
1 2 3 4 5 6 7 8 |
<form> <fieldset> <legend>Log In</legend> <label>Username: <input type="text"></label> <label>Password: <input type="password"></label> <input type="submit" value="Submit"> </fieldset> </form> |
بخش زیر از آموزش فرم ها در HTML درباره توضیحات انواع مختلف کنترل هایی که در فرم می توانید استفاده کنید را نشان می دهد.
المان input
المنت input یکی ز پر استفاده ترین ها داخل فرمهای html است.
این المان به شما اجازه می دهد انواع مختلف فیلد های ورودی را بر اساس مقدار خصوصیت type ایجاد کنید.
یک عنصر input می تواند شامل فیلد متن, پسورد, چک باکس, دکمه radio , دکمه submit , دکمه ریست و .. و چندین نوع جدید که در HTML5 معرفی شده است و در بخش های بعدی به آن می پردازیم, است.
انوع input هایی که بیشترین استفاده و کاربرد را دارند در بخش زیر توضیح دادیم.
فیلد متن
فیلدهای متن , بخش یک خطی هستتند که به کاربر اجازه وارد کردن متن را می دهد.
Input های متنی تک خطی با استفاده از تگ <input> که دارای خصوصیت type با مقدار text هستند ایجاد می شود.
|
1 2 3 4 |
<form> <label for="username">Username:</label> <input type="text" name="username" id="username"> </form> |
نکته: تگ <label> برای تعریف کردن المان <input> استفاده می شود. اگر نیاز به وارد کردن چندین خط را دارید باید از <textarea> بهره ببرید.
فیلد پسورد
فیلدهای پسورد مشابه فیلد متن هساتند تنها تفاوت نمایش ظاهری کاراکتر های وارد شده توسط کاربر است که بصورت ستاره یا نقطه توپر نشان می دهد. این کار باعث می شود که هنگام نوشتن آن دیگران امکان خواندن آن را از طریق صفحه نمایش نداشته باشند.
همانند Input های متنی تک خطی می توانید با المان <input> با خصوصیت type و مقدار password ایجاد کنید
|
1 2 3 4 |
<form> <label for="user-pwd">Password:</label> <input type="password" name="user-password" id="user-pwd"> </form> |
دکمه های تک انتخابی (radio-button)
Radio Button ها به کاربران اجازه می دهد که از بین مجموعه گزینه ها, دقیقا یک گزینه را انتخال کند.
این دکمه با تگ <input> و خصوصیت type و مقدار radio برای آن ساخته می شود.
|
1 2 3 4 5 6 |
<form> <input type="radio" name="gender" id="male"> <label for="male">Male</label> <input type="radio" name="gender" id="female"> <label for="female">Female</label> </form> |
نکته: اگر می خواهید که به کاربر اجازه انتخاب چندین گزینه از بصورت همزمان را داشته باشد می توانید از checkbox ها استفاده کنید.
دکمه های چند انتخابی (Checkbox)
چک باکس ها به کاربران اجازه انتخاب چندین گزینه از بین آپشن های از پیش تعریف شده را می دهد. این دکمه با تگ <input> و خصوصیت type و مقدار checkbox برای آن ساخته می شود.
|
1 2 3 4 5 6 7 8 |
<form> <input type="checkbox" name="sports" id="soccer"> <label for="soccer">Soccer</label> <input type="checkbox" name="sports" id="cricket"> <label for="cricket">Cricket</label> <input type="checkbox" name="sports" id="baseball"> <label for="baseball">Baseball</label> </form> |
انتخاب فایل برای آپلود
فیلد فایل به کاربر اجازه انتخاب فایل از روی حافظه کامپیوتر و ارسال آن به عنوان ضمینه در داده فرم را می دهد.
این فیلد بطور عادی به صورت یک باکس متنی به همراه دکمه ای که امکان انتخاب فایل را به کاربر می دهد, نمایش داده می شود.
|
1 2 3 4 |
<form> <label for="file-select">Upload:</label> <input type="file" name="upload" id="file-select"> </form> |
Textarea (محتوای متن)
Textarea یک ورودی متن چند-خطی است که به کاربر امکان وارد کردن چندین خط از متن را می دهد و با المان <textarea> ساخته می شود.
با خصوصیات cols و rows نیز می توانید تعداد ستون ها و سطرهای ورودی متن را افزایش بدید.
|
1 2 3 4 |
<form> <label for="address">Address:</label> <textarea rows="3" cols="30" name="address" id="address"></textarea> </form> |
باکس های انتخابی
یک باکس انتخابی, همان لیست آبشاری (dropdown) از آپشن ها است که کاربر می تواند یک یا چند گزینه را انتخاب کند. باکس های انتخابی با استفاده از المان <select> و <option> داخل آن ایجاد می شود. هر یک از <option> داخل <select> یک آیتم از لیست را ایجاد می کنند.
|
1 2 3 4 5 6 7 8 |
<form> <label for="city">City:</label> <select name="city" id="city"> <option value="sydney">Sydney</option> <option value="melbourne">Melbourne</option> <option value="cromwell">Cromwell</option> </select> </form> |
دکمه های سابمیت و ریست
یک دکمه سابمیت (submit) برای ارسال داده های فرم به وب سرور استفاده می شود.
زمانی که روی دکمه سابمیت کلیک می شود, داده فرم به سمت فایل مشخص شده در خصوصیت action در تگ <form> ارسال می شود.
یک دکمه ریسیت (reset) نیز تمام مقادیر وارد شده توسط کاربر در فرم را به مقدار اولیه باز می گرداند.
|
1 2 3 4 5 6 |
<form action="action.php" method="post" id="users"> <label for="first-name">First Name:</label> <input type="text" name="first-name" id="first-name"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> |
نکته: شما می توانید یک دکمه را با استفاده از المان <button> ایجاد کنید. دکمه های ساخته شده با <button> همانند دکمه های ساخته شده با input هستند با این تفاوت که فرصت رندر بیشتری را ارایه می دهند.
خصوصیات پر استفاده در فرم ها
name– نام فرمaction– آدرس URL برنامه ای که قصد پردازش اطلاعات ارسال شده از فرم را دارد (اگر#قرار دهید به همین فایل ارسال می شود)method– متد HTTP که مرورگر از آن برای ارسال فرم استفاده می کند که مقادیرpostوgetرا دریافت می کند (تفاوت متد post و get)target– مشخص می کند که نتیجه اسکریپت به چه صورت نمایش داده شود :_blank,_self,_parent,_top
امیدوارم در این بخش آموزش HTML , از ساخت فرم ها در HTML نهایت استفاده را برده باشید.
در بخش بعدی در مورد نحوه استفاده از iframe ها در صفحه وب را یاد می گیریم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
