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

در جلسه قبل با برچسب form و برخی از انواع برچسب input آشنا شدید. در این جلسه برای تکمیل آموزش قبل سعی شده تا با برخی دیگر از برچسب ها که در روند طراحی یک فرم بکار شما خواهند آمد آشنا شوید.

برچسب دوطرفه select

از این برچسب برای ایجاد یک فیلد کشویی استفاده می شود. بدین گونه زمانی بر روی فیلد کلید کنید مواردی که در زیر مجموعه این برچسب وجود دارد باز خواهد شد.

بصورت زیر نوشته می شود:

<select></select>

نکته: برچسب select به تنهایی کارایی ندارد بلکه باید همراه با برچسب زیر مجموعه خود استفاده شود.

برچسب دوطرفه option

option برچسب زیرمجموعه select می باشد. برای اینکه گزینه های مورد نظر خودمان را ایجاد کنیم از آن استفاده می کنیم.

بصورت زیر نوشته می شود:

<option>قرار گیری محتوا</option>

حال برای اینکه موارد متعددی را به برچسب انتخاب خود اضافه کنیم کافیست بصورت زیر عمل کرده و نتیجه را در خروجی مشاهده کنید. ما میخواهیم ۳ مورد در فیلد کشویی به نمایش در بیاید.

مثال:

<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option>گزینه سوم</option>
</select>

خروجی در مرورگر:
html-select

برای اینکه بخواهیم میان چندین مورد از option ها یکی به صورت پیشفرض انتخاب شده باشد، کافیست از ویژگی selected در برچسب option موردنظر استفاده کنیم.

بصورت زیر نوشته می شود:

<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option selected>گزینه سوم</option>
</select>

خروجی در مرورگر:

html-selected

برچسب دوطرفه textarea

در فرم های تماس حتما دیده اید که قسمتی برای درج متن وجود داشته و با دیگر ورودی ها متفاوت است. برای ایجاد چنین قسمتی از برچسب textarea استفاده می شود.

بصورت زیر نوشته می شود:

<textarea></textarea>

خروجی در مرورگر:

html-textarea

برچسب ناحیه متنی نیز مانند دیگر برچسب ها از ویژگی های متعددی برخوردار است که برخی از آنها را شرح می دهم.

ویژگی cols و rows

برای اینکه بتوانیم بر روی اندازه ناحیه متنی مدیریت بهتری داشته باشیم می توانیم از دو ویژگی برای تغییر سطر و ستون استفاده کنیم. این دو ویژگی با نام های cols و rows در دسترس بوده و با قرار دادن آنها در برچسب textarea این امکان برای تغییر اندازه فراهم خواهد شد.

بصورت زیر نوشته می شود:

<textarea cols="50" rows="20"></textarea>

rows مشخص کننده تعداد سطرها و cols مشخص کننده تعداد ستون هاست.

ویژگی maxlength

اگر بخواهیم بر روی تعداد کاراکتری که درون ناحیه متنی نوشته می شود هم مدیریت کنیم، ویژگی به نام maxlength وجود دارد که می توان با استفاده از آن بر روی ناحیه متنی محدودیت اعمال کرد تا کاربر تنها بتواند به اندازه محدودیتی که در نظر گرفته اید متن خود را نوشته و ارسال کند.

بصورت زیر نوشته می شود:

<textarea maxlength="50"></textarea>

تعداد این ویژگی ها به مراتب بیشتر از مواردی است که در این دو جلسه در فرم ها گذشت. اما با این حال شما برای یادگیری کافیست پس از موارد شاخص و مهم که در این سری از آموزش ها به آنها پرداخته شد، با یادگیری جزییات به اطلاعات خود در این زمینه اضافه کنید.

در ادامه آموزش طراحی وب با جلسه پنجم در خدمت شما دوستان خواهیم بود. قبل از هر چیز لطفا جلسات قبلی را مطالعه فرمایید.

یکی از پرکاربردترین و برجسته ترین عناصر html فرم ها می باشند. بدون شک در هر وبسایتی حداقل یکی از ویژگی های فرم استفاده شده است. برای مثال فرم نظرسنجی، فرم تماس، ارسال نظر، ثبت نام و…این تگ با استفاده از ویژگی هایی که در خود دارد، مانند فیلدها، دکمه‌ها و… برای ایجاد تعامل با کاربر مورد استفاده قرار می گیرد. این امر زمانی بیش از پیش مورد توجه قرار می گیرد که در برنامه نویسی این برچسب یکی از پراستفاده ترین برچسب ها برای آموزش و ثبت اطلاعات می باشد.

فرم (Form)

فرم یک برچسب دوطرفه است که بصورت زیر نوشته می شود:

<form></form>

برچسب یکطرفه input

اصلی ترین برچسب درونی یک فرم، input‌ می باشد. که با در اختیار گذاشتن الگوهای مختلف می تواند یک فرم کامل را ایجاد نماید.

<input>

برچسب input به تنهایی کاری از پیش نمی برد اما با مشخص کردن یک الگو برای آن، در خروجی شاهد ساختارهای مختلفی خواهیم بود. اما این الگو چگونه باید به input داده شود؟

با قرار دادن ویژگی type و دادن مقدار مناسب به آن می توان از این الگو ها استفاده کرد.

بصورت زیر نوشته می شود:

<input type="مقدار">

مقادیری که باید در type قرار گیرد از پیش تعیین شده و شما برحسب نیاز می توانید از یکی از آنها استفاده نمایید. در ادامه به تعدادی از آنها اشاره خواهم کرد.

ورودی متنی در فرم

برای ایجاد یک فیلد یا همان ورودی متن باید بصورت زیر عمل کرده و مقدار درون type را با text پر کنید.

<input type="text">

خروجی در مرورگر:

html-form-text

همچنین برای دیگر موارد نیز با تغییر مقدار در ویژگی type می توان متناسب با آن در خروجی الگو مورد نظر خود را پیاده کرد.

دکمه در فرم

برای ایجاد یک دکمه باید بصورت زیر عمل کرده و مقدار درون type را با button پر کنید. همچنین برای این دکمه باید یک نام نیز قرار داد تا در خروجی نمایش داده شود. برای این کار با قرار دادن ویژگی value و دادن مقدار(نام مورد نظر برای دکمه) به آن، دکمه در خروجی حاوی یک نام خواهد بود.

<input type="button" value="نام دکمه">

خروجی در مرورگر:

html-form-button

ورودی گذرواژه در فرم

برای ایجاد یک فیلد یا ورودی گذرواژه (پسورد) با تغییر مقدار در ویژگی type به password می توان این ورودی را ایجاد نمود. تفاوت این ورودی با ورودی متن در نوع نمایش کاراکترهای درونی آنها می باشد. در تصویر خروجی خواهید دید که مقادیری که در ورودی پسورد قرار می گیرد به صورت دایره ای نشان داده می شود.

<input type="password" >

خروجی در مرورگر:

html-form-pass

ورودی ایمیل در فرم

برای ایجاد یک فیلد یا ورودی ایمیل با تغییر مقدار در ویژگی type به email می توان این ورودی را ایجاد نمود.

<input type="email">

نکته: تفاوت ورودی متن با ورودی ایمیل این است زمانیکه در ورودی ایمیل ساختار یک ایمیل مورد تایید نباشد در مرورگر ایجاد اخطار می کند.

خروجی در مرورگر:

html-form-email

دکمه ارسال در فرم

برای ایجاد یک دکمه ارسال باید بصورت زیر عمل کرده و مقدار درون type را با submit پر کنید. در اینجا نیز با قرار دادن ویژگی value می توان برای دکمه ارسال نیز نام تعیین کنید.

<input type="submit" value="دکمه ارسال" >

خروجی در مرورگر:

html-form-submit

چک‌باکس در فرم

برای ایجاد یک چک‌باکس باید بصورت زیر عمل کرده و مقدار درون type را با checkbox پر کنید. چک‌باکس‌ها بیشتر برای انتخاب چند مورد در یک فرم مورد استفاده قرار می گیرند.

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

خروجی در مرورگر:

html-form-checkbox

نکته: برای اینکه بخواهید بصورت پیشفرض چک‌باکس شما تیک خورده باشد، کافیست ویژگی checked را به برچسب خود اضافه کنید.

بصورت زیر:

<input type="checkbox" checked>

دکمه رادیو در فرم

برای قرار دادن دکمه رادیویی (که بصورت گرد است) باید بصورت زیر عمل کرده و مقدار درون type را با radio پر کنید. بر خلاف checkbox دکمه رادیویی برای انتخاب یک گزینه از میان چند گزینه مورد استفاده قرار می گیرد.

<input type="radio">
<input type="radio">
<input type="radio">

خروجی در مرورگر:

html-form-radio

نکته: از ویژگی checked در دکمه رادیویی نیز می توان استفاده کرد.

دکمه انتخاب فایل در فرم

برای اینکه بتوان فایلی را از رایانه خود انتخاب کنیم؛ برچسب فرم باز هم به کمک خواهد آمد. تنها کافیست مقدار درون type را با file پر کنید.

<input type="file">

خروجی در مرورگر:

html-form-file

تا به اینجا شما با برچسب فرم و همچنین ساختارهای مختلف برچسب input آشنا شدید. اما ویژگی های فرم به همین جا ختم نشده و موارد متعددی وجود دارد که به مرور زمان می توانید از آنها نیز استفاده کنید.

برای تمرین این جلسه می توانید یک فرم ثبت نام را طراحی کنید. برای الگوبرداری بهتر است از فرم ثبت نام یک سایت استفاده و سعی کنید خودتان از ابتدا آن را طراحی کنید.