جلسه پنجم
در ادامه آموزش طراحی وب با جلسه پنجم در خدمت شما دوستان خواهیم بود. قبل از هر چیز لطفا جلسات قبلی را مطالعه فرمایید.
یکی از پرکاربردترین و برجسته ترین عناصر html فرم ها می باشند. بدون شک در هر وبسایتی حداقل یکی از ویژگی های فرم استفاده شده است. برای مثال فرم نظرسنجی، فرم تماس، ارسال نظر، ثبت نام و…این تگ با استفاده از ویژگی هایی که در خود دارد، مانند فیلدها، دکمه‌ها و… برای ایجاد تعامل با کاربر مورد استفاده قرار می گیرد. این امر زمانی بیش از پیش مورد توجه قرار می گیرد که در برنامه نویسی این برچسب یکی از پراستفاده ترین برچسب ها برای آموزش و ثبت اطلاعات می باشد.
فرم (Form)
فرم یک برچسب دوطرفه است که بصورت زیر نوشته می شود:
<form></form>برچسب یکطرفه input
اصلی ترین برچسب درونی یک فرم، input می باشد. که با در اختیار گذاشتن الگوهای مختلف می تواند یک فرم کامل را ایجاد نماید.
<input>برچسب input به تنهایی کاری از پیش نمی برد اما با مشخص کردن یک الگو برای آن، در خروجی شاهد ساختارهای مختلفی خواهیم بود. اما این الگو چگونه باید به input داده شود؟
با قرار دادن ویژگی type و دادن مقدار مناسب به آن می توان از این الگو ها استفاده کرد.
بصورت زیر نوشته می شود:
<input type="مقدار">مقادیری که باید در type قرار گیرد از پیش تعیین شده و شما برحسب نیاز می توانید از یکی از آنها استفاده نمایید. در ادامه به تعدادی از آنها اشاره خواهم کرد.
ورودی متنی در فرم
برای ایجاد یک فیلد یا همان ورودی متن باید بصورت زیر عمل کرده و مقدار درون type را با text پر کنید.
<input type="text">خروجی در مرورگر:
همچنین برای دیگر موارد نیز با تغییر مقدار در ویژگی type می توان متناسب با آن در خروجی الگو مورد نظر خود را پیاده کرد.
دکمه در فرم
برای ایجاد یک دکمه باید بصورت زیر عمل کرده و مقدار درون type را با button پر کنید. همچنین برای این دکمه باید یک نام نیز قرار داد تا در خروجی نمایش داده شود. برای این کار با قرار دادن ویژگی value و دادن مقدار(نام مورد نظر برای دکمه) به آن، دکمه در خروجی حاوی یک نام خواهد بود.
<input type="button" value="نام دکمه">خروجی در مرورگر:
ورودی گذرواژه در فرم
برای ایجاد یک فیلد یا ورودی گذرواژه (پسورد) با تغییر مقدار در ویژگی type به password می توان این ورودی را ایجاد نمود. تفاوت این ورودی با ورودی متن در نوع نمایش کاراکترهای درونی آنها می باشد. در تصویر خروجی خواهید دید که مقادیری که در ورودی پسورد قرار می گیرد به صورت دایره ای نشان داده می شود.
<input type="password" >خروجی در مرورگر:
ورودی ایمیل در فرم
برای ایجاد یک فیلد یا ورودی ایمیل با تغییر مقدار در ویژگی type به email می توان این ورودی را ایجاد نمود.
<input type="email">نکته: تفاوت ورودی متن با ورودی ایمیل این است زمانیکه در ورودی ایمیل ساختار یک ایمیل مورد تایید نباشد در مرورگر ایجاد اخطار می کند.
خروجی در مرورگر:
دکمه ارسال در فرم
برای ایجاد یک دکمه ارسال باید بصورت زیر عمل کرده و مقدار درون type را با submitپر کنید. در اینجا نیز با قرار دادن ویژگی value می توان برای دکمه ارسال نیز نام تعیین کنید.
<input type="submit" value="دکمه ارسال" >خروجی در مرورگر:
چک‌باکس در فرم
برای ایجاد یک چک‌باکس باید بصورت زیر عمل کرده و مقدار درون type را با checkboxپر کنید. چک‌باکس‌ها بیشتر برای انتخاب چند مورد در یک فرم مورد استفاده قرار می گیرند.
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">خروجی در مرورگر:
نکته: برای اینکه بخواهید بصورت پیشفرض چک‌باکس شما تیک خورده باشد، کافیست ویژگی checked را به برچسب خود اضافه کنید.
بصورت زیر:
<input type="checkbox" checked>دکمه رادیو در فرم
برای قرار دادن دکمه رادیویی (که بصورت گرد است) باید بصورت زیر عمل کرده و مقدار درون type را با radioپر کنید. بر خلاف checkbox دکمه رادیویی برای انتخاب یک گزینه از میان چند گزینه مورد استفاده قرار می گیرد.
<input type="radio">
<input type="radio">
<input type="radio">خروجی در مرورگر:
نکته: از ویژگی checked در دکمه رادیویی نیز می توان استفاده کرد.
دکمه انتخاب فایل در فرم
برای اینکه بتوان فایلی را از رایانه خود انتخاب کنیم؛ برچسب فرم باز هم به کمک خواهد آمد. تنها کافیست مقدار درون type را با file پر کنید.
<input type="file">خروجی در مرورگر:
تا به اینجا شما با برچسب فرم و همچنین ساختارهای مختلف برچسب input آشنا شدید. اما ویژگی های فرم به همین جا ختم نشده و موارد متعددی وجود دارد که به مرور زمان می توانید از آنها نیز استفاده کنید.
برای تمرین این جلسه می توانید یک فرم ثبت نام را طراحی کنید. برای الگوبرداری بهتر است از فرم ثبت نام یک سایت استفاده و سعی کنید خودتان از ابتدا آن را طراحی کنید.
دیدگاه