در این مقاله مبحث فرم ها در طراحی سایت با HTML را ادامه می دهیم.

همانطور که در قسمت اول از فرم ها گفته شد، فرم به فایلی گفته می شود که حاوی فضاهایی  می باشد که توسط کاربر پر شده و در طراحی سایت ها مورد استفاده قرار می گیرد.

Checkbox

<input>

type=”checkbox”

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

name

مقدار این ویژگی به همراه گزینه انتخاب شده به سرور ارسال می شود. که باید برای تمام گزینه های یک گروه یکسان باشد.

value

مقدار این ویژگی به همراه گزینه هایی که انتخاب شده اند، به سرور فرستاده می شوند.

checked

اگر یکی از موارد دارای این ویژگی باشد، هنگام بارگذاری بصورت انتخاب شده نشان داده می شود. مقدار این ویژگی checked می باشد.

<form action="http://www.example.com/profile.php">

<p>Please select your favorite music service(s):

<br />

<input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes

<input type="checkbox" name="service" value="lastfm" /> Last.fm

<input type="checkbox" name="service" value="spotify" /> Spotify

</p>

</form>

طراحی سایت

باکس کشویی

<select>

استفاده از یک لیست کشویی در طراحی سایت (که به جعبه انتخاب هم معروف است)، به کاربر اجازه می دهد تا از موارد لیست یک گزینه را انتخاب کند.

المان <select> برای ایجاد یک لیست کشویی استفاده می شود، که شامل دو یا چند عنصر <option> است.

name

مشخصه name نشان دهنده نام کنترل کننده فرم است که همراه با مقدار انتخاب شده کاربر، به سرور ارسال می شود.

<option>

عنصر <option> برای مشخص کردن گزینه هایی که کاربر می تواند از میان آن ها انتخاب کند، استفاده می شود. کلمات که در بین تگ آغازین <option> و تگ بسته <option/> قرار می گیرند، برای کاربر در کادر کشویی نشان داده می شوند.

value

المان <option> از ویژگی value برای نشان دادن مقداری که همراه با نام کنترل کننده به سرور ارسال می شود، استفاده می کند.

selected

این ویژگی برای نشان دادن یک گزینه، که هنگام بارگذاری صفحه بصورت انتخاب شده نمایش داده می شود، به کار می رود

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

عملکرد جعبه فهرست کاملا مشابه کدهای radio است (در آن ها می توان تنها یکی از گزینه ها را انتخاب کرد). دو حالت کلیدی برای انتخاب یکی از این دو مورد وجود دارد:

  1. اگر کاربران نیاز به دیدن همه گزینه ها در یک نگاه داشته باشند، دکمه های Radio مناسب تر هستند.
  2. اگر یک لیست بسیار طولانی از گزینه ها (مانند لیست کشورها) وجود داشته باشد، جعبه های کشویی به کار می روند.
<form action="http://www.example.com/profile.php">

<p>What device do you listen to music on? </p>

<select name="devices">

<option value="ipod">iPod</option>

<option value="radio">Radio</option>

<option value="computer">Computer</option>

</select>

</form>

طراحی سایت

جعبه انتخاب چندگانه

size

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

متأسفانه روشی که مرورگرها این ویژگی را اجرا می کنند، کامل نیستند. و اگر مورد استفاده قرار بگیرد (مخصوصاً در فایرفاکس، safari و Mac) باید مورد آزمایش قرار بگیرد.

multiple

شما می توانید با اضافه کردن ویژگی multiple با مقدار multiple، به کاربران اجازه دهید چند گزینه از این لیست را انتخاب کنند. این ایده خوبی است که به کاربران اجازه انتخاب بیش از یک مورد را بدهیم. البته باید این را به کاربر بیان کنیم که با گرفتن دکمه ctrl از صفحه کلید، می تواند این کار را انجام دهد.

<form action="http://www.example.com/profile.php">

<p>Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.) </p>

<select name="instruments" size="3" multiple="multiple">

<option value="guitar" selected="selected"> Guitar </option>

<option value="drums">Drums</option>

<option value="keyboard" selected="selected">Keyboard</option>

<option value="bass">Bass</option>

</select>

</form>

طراحی سایت

جعبه های آپلود فایل

<input>

  طراحي سايت ارزان در تهران

اگر می خواهید به کاربران اجازه آپلود یک فایل (به عنوان مثال یک تصویر، ویدئو، mp3 یا یک pdf) را بدهید، شما باید از جعبه آپلود فایل استفاده کنید.

type=”file”

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

هنگامی که شما به کاربران اجازه آپلود فایل ها را می دهید، ویژگی method در عنصر <form> باید مقدار Post را داشته باشد. (شما نمی توانید با استفاده از روش get فایلی را به سرور ارسال کنید)

<form action="http://www.example.com/upload.php" method="post">

<p>Upload your song in MP3 format:</p>

<input type="file" name="user-song" /><br />

<input type="submit" value="Upload" />

</form>

طراحی سایت

دکمه ارسال

<input>

type=”submit”

دکمه submit برای ارسال فرم به سرور استفاده می شود.

name

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

value

این ویژگی برای کنترل متنی که روی دکمه submit نوشته می شود، استفاده می شود. بهتر است کلمه ای که می خواهید روی دکمه ظاهر شود را تعیین کنید، به این دلیل که در صورت ننوشتن مقدار پیش فرض در برخی مرورگرها Submit Query می باشد و ممکن است برای تمام فرم ها عبارت مناسبی نباشد.

ظاهر این دکمه در مرورگرهای مختلف، متفاوت می باشد. اگر شما بخواهید ظاهر آن را خودتان تعیین کنید بهتر است از CSS استفاده نمائید.

<form action="http://www.example.com/subscribe.php">

<p>Subscribe to our email list:</p>

<input type="text" name="email" />

<input type="submit" name="subscribe" value="Subscribe" />

</form>

طراحی سایت

برچسب زدن به کنترل های فرم

<label>

هنگام معرفی کنترل های فرم می توان به سادگی متنی کنار آن ها نوشت. اما با این حال بهتر است برای هر کنترل فرم، از عنصر <label> استفاده کرد. زیرا این برچسب ها برای کاربرانی که اختلال بینایی داشته، و از نرم افزارهای خواننده صفحه استفاده می کنند، مفید است.

for

این ویژگی تعیین می کند که برچسب برای کدام فرم کنترل است. توجه کنید که دکمه های radio از ویژگی id استفاده می کنند. ویژگی id باعث شناسایی المان در هر کجای صفحه که باشد، می شود.

مقدار ویژگی for باید با مقدار ویژگی id فرم کنترلی که برچسب آن است یکسان باشد. تکنیک استفاده از for و id می تواند برای هر کنترل فرمی استفاده شود. هنگامی که یک عنصر <label> با checkbox یا دکمه radio استفاده شود، کاربران می توانند برای انتخاب یک گزینه هم روی فرم کنترل و هم روی برچسب کلیک کنند. گسترش ناحیه قابل کلیک، استفاده از فرم را آسان تر می کند. موقعیت قرار گرفتن برچسب بسیار مهم است. اگر کاربر نداند در کجا و یا چه نوع اطلاعاتی را وارد کند، ممکن است به درستی فرم را پر نکند.

به طور یک قاعده کلی، بهترین مکان های قرارگیری برچسب به این صورت می باشد:

  عناصر block و inline در HTML

در بالا یا سمت چپ:

  • ورودی متن
  • ورودی متن چند خطی
  • باکس های انتخاب
  • فایل های آپلود

سمت راست:

  • Checkbox های جداگانه
  • دکمه های Radio جداگانه
<label>Age: <input type="text" name="age" /></label>

<br/ >

Gender:

<input id="female" type="radio" name="gender" value="f">

<label for="female">Female</label>

<input id="male" type="radio" name="gender" value="m">

<label for="male">Male</label>

طراحی سایت

گروهی کردن المان های فرم

<fieldset>

شما می توانید کنترل فرم های مرتبط با هم را در داخل عنصر <fieldset> گروه بندی  طراحی وب سایت اختصاصی  کنید. این کار مخصوصاً برای فرم های طولانی کاربرد دارد. اغلب مرورگرها fieldset را با یک خط در اطراف کنترل فرم های مرتبط با هم نشان می دهند. که ظاهر این خطوط را می توان با CSS تنظیم کرد.

<legend>

این عنصر می تواند بلافاصله بعد از تگ آغازین <fieldset> قرار بگیرد. و حاوی عنوانی است که به شناسایی گروه بندی صورت گرفته کمک می کند.

<fieldset>

<legend>Contact details</legend>

<label>Email:<br />

<input type="text" name="email" /></label><br />

<label>Mobile:<br />

<input type="text" name="mobile" /></label><br />

<label>Telephone:<br />

<input type="text" name="telephone" /></label>

</fieldset>

طراحی سایت

اعتبار سنجی فرم ها

احتمالاً تا به حال فرم هایی دیده اید که اگر به درستی پر نشوند، مرورگر پیغام خطا می دهد.  این عمل همان اعتبارسنجی فرم می باشد. قبلاً اعتبارسنجی فرم ها توسط جاوا اسکریپت صورت می گرفت (که از محدوده این مقاله خارج است). اما HTML5 این کار را انجام داده است.

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

<form action="http://www.example.com/login/" method="post">

<label for="username">Username:</label>

<input type="text" name="username" required="required" /></title><br />

<label for="password">Password:</label>

<input type="password" name="password" required="required" />

<input type="submit" value="Submit" />

</form>

طراحی سایت

ورودی URL و Email

در طراحی سایت باHTML5  همچنین ورودی هایی ارائه می شوند که به بازدیدکنندگان این امکان را می دهند، آدرس های ایمیل و آدرس های اینترنتی را وارد کنند.

type=”email”

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

type=”url”

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

<form action="http://www.example.org/subscribe.php">

<p>Please enter your email address:</p>

<input type="email" name="email" />

<input type="submit" value="Submit" />

</form>

طراحی سایت

<form action="http://www.example.org/profile.php">

<p>Please enter your website address:</p>

<input type="url" name="website" />

<input type="submit" value="Submit" />

</form>

طراحی سایت

ورودی جستجو

<input>

اگر می خواهید یک باکس برای جستجو ایجاد کنید، HTML5 این امکان را به شما می دهد.

type=”search”

به منظور ایجاد باکس جستجو المان <input> باید دارای ویژگی type با مقدار search باشد. که یک ورودی جستجوی ویژه را فراهم می کند.

placeholder

مقداری که به این ویژگی داده می شود، درون کادر ورودی نوشته می شود و تا زمانی که کاربر چیزی در کادر ننویسد، باقی می ماند.

<form action="http://www.example.org/search.php">

<p>Search:</p>

<input type="search" name="search" placeholder="Search" />

<input type="submit" value="Search" />

</form>

طراحی سایت

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

به وبلاگ توسعه دهندگان وب خوش آمدید .

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