آموزش ساخت یک اپلیکیشن آیفون (بخش دهم) — به زبان ساده

در این بخش از سری مقالات آموزش ساخت اپلیکیشن آیفون، یک خروجی (Outlet) سفارشی برای نمای تصویر دوم اپلیکیشن خود می‌سازیم و یک خصوصیت اضافه می‌کنیم که در آن می‌توان تصویری را تنظیم کرد. در این بخش قصد داریم به کدنویسی واقعی بپردازیم. اغلب بخش کدنویسی قبلاً برای ما انجام یافته است. کد قالبی که در این راهنما می‌نویسیم، اساساً همان است که در هر خروجی دیگر استفاده می‌شود و خصوصیتی که ایجاد کردیم نیز چنین حالتی دارد. نوشتن آن کار چندان دشواری محسوب نمی‌شود.

در بخش قبلی این سری مقالات آموزشی خروجی‌های موجود در NewsTableViewCell را به هم وصل کردیم و خصوصیت‌های مورد نیاز را وارد کردیم. برای مطالعه بخش قبلی می‌توانید به لینک زیر مراجعه کنید:

• آموزش ساخت یک اپلیکیشن آیفون (بخش نهم) — به زبان ساده

نمایش Xib و کد

در Xcode گزینه outlet را در پنل Project Navigator انتخاب کنید.

ما باید هر دو فایل xib و فایل کد متناظر را در زمان واحد اضافه کنیم. در نوار ابزار روی Assistant Editor کلیک کنید.

اینک باید کد NewsTableViewCell.swift را در سمت راست ببینید. اگر چنین نیست بررسی کنید که فایل سمت راست روی Automatic تنظیم شده باشد. به این منظور روی منوی بازشدنی به صورتی که در تصویر زیر نمایش یافته کلیک کنید.

اگر به فضای بیشتری برای کار نیاز دارید، پنل Inspector را با استفاده از دکمه راست-بالا در نوار ابزار یا با کلیک کردن روی منوی view و سپس مسیر پنهان کنید.

ایجاد یک خروجی

کلید Control کیبورد را نگهدارید و از نمای تصویر دوم در xib به زیر خط class در فایل کد بکشید.

بدین ترتیب Xcode یک کادر برای خروجی جدید باز می‌کند مقدار Name را برای خروجی به صورت detailImageView وارد کنید.

روی دکمه Connect کلیک کنید. Xcode کد اتصال را برای ما می‌نویسد و آن را به نمای تصویر در xib وصل می‌کند.

نیازی به درک آن نیست، اما اگر کنجکاو هستید چه اتفاقی می‌افتد، باید اشاره کنیم خط کدی که ایجاد شده کارهای زیر را انجام می‌دهد:

1. دایره توپر در حاشیه کد نشان می‌دهد که این خروجی به چیزی در xib اتصال یافته است.
2. IBOutlet@ دایره را در حاشیه ایجاد می‌کند و Xcode می‌داند که می‌تواند به یک نما در xib وصل شود.
3. Weak به این معنی است که اپلیکیشن می‌تواند این اتصال را زمانی که از آن استفاده نمی‌شود رها کرده و فراموش کند.
4. Var به این معنی است که این متغیر می‌تواند از سوی کد یا اتصال‌ها تغییر یابد. متغیر خصوصیتی (مشخصه نیز نامیده می‌شود) است که می‌تواند تغییر پیدا کند.
5. detailImageView چیزی است که قبلا به عنوان نام این متغیر وارد کرده‌ایم.
6. UIImageView: کلاس این متغیر را به صورت UIImageView اعلان می‌کند. از این رو این خروجی تنها به UIImageView می‌تواند وصل شود.
7. علامت تعجب (!) نشان می‌دهد که این متغیر باید پیش از استفاده وصل شود. یعنی باید یک مقدار داشته باشد و نمی‌تواند تهی باشد.

بدین ترتیب تا اینجا کار خود را در Assistant Editor به پایان بردیم. ما نیاز داریم که هر دو فایل xib و Swift همزمان در دیدمان باشند و بنابراین از Assistant Editor به این منظور استفاده می‌کنیم که بتوانیم اتصال بین آن‌ها را مدیریت کنیم.

می‌توانید با استفاده از حالت سمت چپ ادیتور در نوار ابزار به Standard Editor بازگردید.

دسترسی به کد از خروجی

فایل NewsTableViewCell.swift را در Project Navigator انتخاب کنید تا بتوانید نگاهی دقیق‌تر به کد داشته باشید.

این خروجی detailImageView همه آن چیزی است که توسعه‌دهندگان برای دسترسی به تصویر دوم بزرگ در این سلول نیاز دارند. بدین ترتیب می‌توانند کدی را بنویسند که تصویر صحیح را با استفاده از کدی مانند زیر دریافت کند:

return detailImageView.image

در کد فوق از نمادگذاری نقطه‌ای استفاده شده است. در این روش detailImageView.image، به معنی image مربوط به detailImageView است. بدین ترتیب image را می‌توان به صورت یک خصوصیت یا مشخصه یا متغیر برای detailImageView مورد ارجاع قرار داد.

توسعه‌دهنده احتمالاً می‌تواند کدی را بنویسد که تصویر جدیدی از یک سرور واکشی شود، سپس با استفاده از کد، تصویر detailImageView را به صورت زیر روی این مقدار جدید تنظیم کند:

detailImageView.image = newValue

ایجاد یک خصوصیت

در این مورد، ما هنوز سرور یا کدی نداریم که تصویر نهایی را در سلول‌های خود مقداردهی کنیم. با این که مشغول راه‌اندازی پروتوتایپ هستیم، اما بهتر است بتوانیم تصویر را با استفاده از Attributes Inspector و بر مبنای سلول به سلول تنظیم کنیم. این کار را با ایجاد یک متغیر آسان انجام می‌دهیم که یک خصوصیت detailImage در Attributes Inspector پیشنهاد می‌دهد و در پس‌زمینه یعنی در کد، detailImageView.image را نیز تنظیم می‌کند.

کد زیر را در فایل NewsTableViewCell.swift اضافه کنید تا به صورت زیر درآید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import UIKit import BFWControls   @IBDesignable class NewsTableViewCell: NibTableViewCell {          @IBOutlet weak var detailImageView: UIImageView!          @IBInspectable var detailImage: UIImage? {         get {             return detailImageView.image         }         set {             detailImageView.image = newValue         }     }      }

در ادامه کد فوق را به صورت گام به گام تحلیل می‌کنیم:

1. IBInspectable@ به Xcode اعلام می‌کند که این متغیر را در Attributes Inspector نمایش می‌دهد.
2. var به این معنی است که ما مشغول تعریف یک متغیر هستیم که مشخصه یا خصوصیت نیز نامیده می‌شود.
3. detailImage نامی است که برای این متغیر انتخاب شده است آن را می‌توانیم به صورت هر نامی که دوست داریم تعیین کنیم، اما استفاده از پسوند Image بهتر است، زیرا این متغیر کلاس UIImage را دارد و آن را detailImage می‌نامیم، زیرا به image مربوط به detailImageView دسترسی دارد.
4. : UIImage اعلان می‌کند که متغیر ما یک UIImage است. زیرا کلاس detailImage به صورت UIImage است.
5. علامت سؤال (?) پس از UIImage به این معنی است که این متغیر امکان نداشتن مقدار را دارد. ما از عبارت nil برای اشاره به عدم وجود مقدار استفاده می‌کنیم. اگر متغیری امکان تهی بودن داشته باشد، آن را optional می‌نامیم.
6. بخش get کد آن چیزی را تعریف می‌کند که وقتی فرد مقدار کنونی detailImage را می‌خواهد اتفاق می‌افتد. این بخش مقدار image مربوط به detailImageView را بازگشت می‌دهد.
7. بخش set کد چیزی را تعریف می‌کند که در زمان تلاش برای ارائه یک مقدار جدید برای detailImage اتفاق می‌افتد. در واقع مقدار image مربوط به detailImageView را به صورت newValue تعیین می‌کند.

بدین ترتیب ما کد را به پایان بردیم. در ادامه چند کلاس مشابه برای سلول‌های Products و Chat ایجاد می‌کنیم به طوری که از همه مهارت‌هایی که تاکنون آموخته‌ایم در آن‌ها استفاده کنیم.

تنظیم خصوصیت سفارشی

در ادامه از خصوصیت جدید detailImage برای تعیین تصویری برای هر یک از سلول‌های موجود در News استفاده می‌کنیم. به فایل Main.storyboard در Project Navigator بازگردید و سلول اول را در صحنه News انتخاب کنید. در پنل Attributes Inspector یک بخش جدید با عنوان News Table View Cell مشاهده می‌کنید که شامل خصوصیت جدید اضافه شده است.

Xcode نام کلاس NewsTableViewCell به صورت «حالت شتری با حروف بزرگ» (upper camel case) را به عنوان خواناتری به صورت News Table View Cell تبدیل کرده است. به طور مشابه نام متغیر detailImage را به صورت Detail Image نمایش می‌دهد. از آنجا که این متغیر را به صورت UIImage اعلان کرده‌ایم، Xcode می‌داند که باید فهرستی از تصاویر را به صورت مقادیر ممکن در اپلیکیشن ما نشان دهد. در کنار برچسب Detail Image، روی منوی بازشدنی کلیک کرده و chain را انتخاب کنید. به طور مشابه سلول دوم را انتخاب کرده و Detail Image را به صورت houseInterior تنظیم کنید.

اینک باید تصویر تفصیلی را در هر یک از سلول‌ها ببینید. در ادامه اپلیکیشن را اجرا کنید.

کامیت کردن تغییرات

چنان که در پایان هر یک از مقالات قبل انجام دادیم این بار نیز:

1. گزینه Commit Changes را از منوی Source Control انتخاب می‌کنیم.
2. یک توضیح مانند زیر وارد می‌کنیم:

   NewsTableViewCell: created outlet and attribute for detail image

3. روی دکمه Commit کلیک می‌کنیم.

سخن پایانی

در این مرحله سلول‌های موجود در صحنه News همه خصوصیت‌هایی را که تعریف و وارد کرده‌ایم نمایش می‌دهند. ما خروجی و خصوصیت خود را برای «تصویر تفصیلی» (Detailed Image) ایجاد کردیم.

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

منبع: فرادرس

بهترین روش های تبدیل مقدار عددی به رشته در جاوا اسکریپت — به زبان ساده

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

1 2 3 4 5 6 7 8 9 10 11 12 13

const value = 12345; // Concat Empty String value + ''; // Template Strings `${value}`; // JSON.stringify JSON.stringify(value); // toString() value.toString(); // String() String(value); // RESULT // '12345'

روش های تبدیل مقدار عددی به رشته در جاوا اسکریپت

در این بخش 5 روش مختلف با 5 مقدار متفاوت را تست می‌کنیم. در ادامه متغیرهایی را که برای تست استفاده می‌شوند می‌بینید:

1 2 3 4 5 6 7 8

const string = "hello"; const number = 123; const boolean = true; const array = [1, "2", 3]; const object = {one: 1 }; const symbolValue = Symbol('123'); const undefinedValue = undefined; const nullValue = null;

الحاق رشته خالی

1 2 3 4 5 6 7 8 9

string + ''; // 'hello' number + ''; // '123' boolean + ''; // 'true' array + ''; // '1,2,3' object + ''; // '[object Object]' undefinedValue + ''; // 'undefined' nullValue + ''; // 'null' // ⚠️ symbolValue + ''; // ❌ TypeError

در کد فوق می‌توان دید که این روش در صورتی که مقدار یک Symbol باشد، خطایی تولید می‌کند. در غیر این صورت همه چیز کاملاً خوب به نظر می‌رسد.

رشته‌های قالب‌بندی

1 2 3 4 5 6 7 8 9

`${string}`; // 'hello' `${number}`; // '123' `${boolean}`; // 'true' `${array}`; // '1,2,3' `${object}`; // '[object Object]' `${undefinedValue}`; // 'undefined' `${nullValue}`; // 'null' // ⚠️ `${symbolValue}`; // ❌ TypeError

نتیجه استفاده از «رشته قالب‌بندی» (Template String) اساساً همان «الحاق رشته خالی» است. در این مورد نیز ممکن است در زمان کار با Symbol بهترین روش نباشد، چون خطای TypeError تولید می‌کند. اگر کنجکاو هستید که این خطای نوع چیست، باید اشاره کنیم که این خطا به صورت زیر است:

TypeError: Cannot convert a Symbol value to a string

()JSON.stringify

1 2 3 4 5 6 7 8 9

// ⚠️ JSON.stringify(string); // '"hello"' JSON.stringify(number); // '123' JSON.stringify(boolean); // 'true' JSON.stringify(array); // '[1,"2",3]' JSON.stringify(object); // '{"one":1}' JSON.stringify(nullValue); // 'null' JSON.stringify(symbolValue); // undefined JSON.stringify(undefinedValue); // undefined

به طور معمول از ()JSON.stringify برای تبدیل یک مقدار عددی به رشته استفاده نمی‌کنیم و الزامی هم به این کار وجود ندارد، اما برای تکمیل شدن فهرست این گزینه را نیز گنجانده‌ایم، تا از همه ابزارهایی که در اختیار دارید آگاه باشید. بدین ترتیب می‌توانید بسته به حالت مقتضی تصمیم بگیرید که از کدام ابزار استفاده می‌کنید.

نکته لازم به اشاره این است که می‌توان از این روش برای روی یک مقدار String واقعی نیز استفاده کرد و بدین ترتیب به رشته‌ای با گیومه تبدیل می‌شود.

()toString

1 2 3 4 5 6 7 8 9

string.toString(); // 'hello' number.toString(); // '123' boolean.toString(); // 'true' array.toString(); // '1,2,3' object.toString(); // '[object Object]' symbolValue.toString(); // 'Symbol(123)' // ⚠️ undefinedValue.toString(); // ❌ TypeError nullValue.toString(); // ❌ TypeError

بدین ترتیب به پایان فهرست خود رسیده‌ایم که شامل متدهای ()toString و ()String است. از این دو متد می‌توان برای تبدیل مقدار به رشته استفاده کرد. این متدها کار خود را به نحو احسن اجرا می‌کنند به جز این که برای دو نوع undefined و null تولید خطا می‌کنند و باید در مورد این دو نوع آگاهانه عمل کنید.

()String

1 2 3 4 5 6 7 8

String(string); // 'hello' String(number); // '123' String(boolean); // 'true' String(array); // '1,2,3' String(object); // '[object Object]' String(symbolValue); // 'Symbol(123)' String(undefinedValue); // 'undefined' String(nullValue); // 'null'

چنان که مشاهده می‌کنید ()String وضعیت‌های null و undefined را به خوبی مدیریت می‌کند. هیچ خطایی رخ نمی‌دهد مگر این که خودتان بخواهید. توجه کنید که پیشنهاد این متد یک پیشنهاد کلی است. شما اپلیکیشن خود را بهتر می‌شناسید و بنابراین می‌توانید بهترین روش برای موقعیت خود را انتخاب کنید.

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

منبع: فرادرس

برنامه تشخیص اعداد اول در پایتون — به زبان ساده

ویجت های Native فرم در HTML — راهنمای کاربردی

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

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

• ساختاردهی فرم‌های HTML — راهنمای جامع

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

خصوصیت‌های مشترک

بسیاری از عناصر مورد استفاده برای تعریف ویجت‌های فرم برخی خصوصیت‌های خاص خود را دارند. با این حال، مجموعه‌ای از خصوصیت‌ها وجود دارند که در میان همه عناصر فرم مشترک هستند و بدین ترتیب روی این ویجت‌ها کنترل ایجاد می‌کنند. در ادامه فهرستی از این خصوصیت‌های مشترک را می‌بینید:

نام خصوصیت	مقدار پیش‌فرض	توضیح
autofocus	(false)	این خصوصیت بولی به ما امکان می‌دهد که تعیین کنیم عنصر باید به صورت خودکار در زمان بارگذاری صفحه، فوکوس بگیرد یا این که این فوکوس بر اثر اقدام کاربر مانند وارد کردن کنترل متفاوت به این عنصر می‌رسد. تنها یک عنصر مرتبط با فرم در سند می‌تواند این خصوصیت را فعال داشته باشد.
disabled	(false)	این خصوصیت بولی نشان می‌دهد که کاربر نمی‌تواند با عنصر تعامل پیدا کند. اگر این خصوصیت تعیین نشده باشد، آن عنصر تنظیمات خود را از عنصر شامل خود برای نمونه <fieldset> به ارث می‌برد. اگر هیچ عنصر شاملی با خصوصیت disabled تعیین‌شده، وجود نداشته باشد، در این صورت عنصر به صورت فعال (enabled) خواهد بود.
form		این همان عنصری است که ویجت با آن مرتبط می‌شود. مقدار خصوصیت باید خصوصیت id یک عنصر <form> در همان سند باشد. بر اساس تئوری این خصوصیت امکان تعیین ویجت فرم خارج از عنصر <form> را می‌دهد. با این حال در عمل، هیچ مرورگری وجود ندارد که از این قابلیت پشتیبانی کند.
name		نام عنصر است که به همراه داده‌های فرم تحویل می‌شود.
value		مقدار اولیه عنصر است.

فیلدهای ورود متن

فیلدهای <input> متنی ابتدایی‌ترین ویجت‌های فرم هستند این ویجت‌ها ساده‌ترین روش برای کاربر هستند تا هر نوع داده‌ای را که می‌خواهد وارد کند. با این حال برخی فیلدهای متنی برای نیازهای خاصی به صورت تخصصی تنظیم شده‌اند. ما در بخش قبلی چند مورد از آن‌ها را مشاهده کردیم.

نکته: فیلدهای متنی HTML کنترل‌های ورود متن ساده‌ای هستند. این بدان معنی است که نمی‌توان از آن‌ها برای انجام عملیات «ویرایش کامل» (حروف درشت، ایتالیک و غیره) استفاده کرد. همه ویرایشگرهای rich text که در صفحه‌های وب می‌بینید، ویجت‌های سفارشی هستند که با استفاده از HTML ،CSS و JavaScript ساخته شده‌اند.

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

• آن‌ها می‌توانند به صورت readonly علامت‌گذاری (کاربر نمی‌تواند مقدار ورودی را تغییر دهد) یا حتی غیر فعال (disabled) شوند، یعنی مقدار ورودی هرگز به همراه بقیه داده‌های فرم ارسال نمی‌شود.
• این ویجت‌ها یک placeholder دارند. placeholder متنی است که درون کادر ورود متن ظاهر می‌شود و هدف از آن کادر را به اختصار شرح می‌دهد.
• ویجت‌ها می‌توانند اندازه محدودی داشته باشند (اندازه فیزیکی کادر). همچنین می‌توان طول (تعداد بیشینه کاراکترهایی که می‌توان در کادر وارد کرد) را محدود ساخت.
• این ویجت‌ها می‌توانند در صورت پشتیبانی مرورگر، از امکان غلط‌یاب املایی بهره بگیرند.

نکته: عنصر <input> یک ویجت خاص است، زیرا می‌تواند تقریباً هر چیزی باشد. با تعیین خصوصیت Type می‌توان در آن تغییرات زیادی ایجاد کرد. از آن برای ایجاد اغلب انواع ویجت‌ها شامل فیلدهای متنی تم خطی، کنترل‌های بدون ورود متن، کنترل‌های زمان و تاریخ، و دکمه‌ها استفاده می‌شود. با این وجود، برخی استثناها نیز وجود دارند مثلاً <textarea> برای ورودی متن چندخطی استفاده می‌شود. در زمان مطالعه این مقاله به این موارد توجه ویژه‌ای داشته باشید.

فیلدهای متنی تک خطی

فیلد متنی تک‌خطی با استفاده از عنصر <input> ساخته می‌شود که مقدار خصوصیت Type آن به صورت text تنظیم شده است. البته اگر مقداری نیز برای این خصوصیت تعیین نکرده باشید، مقدار پیش‌فرض همان text است. مقدار text برای این خصوصیت در مواردی که مقدار تعیین‌شده این خصوصیت برای مرورگر ناشناس باشد، به عنوان یک مقدار fallback نیز عمل می‌کند. برای نمونه اگر مقدار “type=”date وارد کرده باشید و مرورگر از ابزارهای انتخاب تاریخ داخلی پشتیبانی نکند به صورت پیش‌فرض به حالت فوق در می‌آید.

در ادامه نمونه‌ای از این فیلد متنی تک‌خطی را مشاهده می‌کنید:

1	<input type="text" id="comment" name="comment" value="I'm a text field">

فیلدهای متنی تک‌خطی تنها یک محدودیت واقعی دارند و آن این است که اگر متنی با چند خط وارد کنید، مرورگر شکستگی خطوط را پیش از ارسال داده‌ها حذف می‌کند:

در HTML5 فیلدهای متنی تک‌خطی ابتدایی با افزودن مقادیر خاصی برای خصوصیت type بهبود یافته‌اند. این مقادیر یک عنصر <input> را همچنان به یک فیلد متنی تک‌خطی تبدیل می‌کنند، اما چند قید و قابلیت اضافی نیز به این فیلد اضافه می‌کنند.

فیلد آدرس ایمیل

این نوع از فیلد به همراه مقدار email برای خصوصیت type تنظیم می‌شود:

1	<input type="email" id="email" name="email" multiple>

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

همچنین با گنجاندن خصوصیت multiple می‌توان به کاربر امکان وارد کردن چند نشانی ایمیل (جداشده با کاما) در یک ورودی منفرد را داد. روی برخی دستگاه‌ها (به خصوص موبایل) هنگام تپ کردن روی این ویجت می‌توان یک کیبورد مجزا باز کرد که برای وارد کردن ایمیل مناسب‌تر باشد.

فیلد رمز عبور

این نوع از فیلد با استفاده از تعیین مقدار password برای خصوصیت type تنظیم می‌شود:

1	<input type="password" id="pwd" name="pwd">

این فیلد هیچ قید خاصی برای متن وارد شده اضافه نمی‌کند، اما مقدار وارد شده در فیلد را با استفاده از ستاره یا نقطه مبهم می‌سازد تا از سوی افراد دیگر قابل خواندن نباشد.

به خاطر داشته باشید که این صرفاً یک قابلیت رابط کاربری است؛ به غیر از این که فرم خود را به طور امنی تحویل دهید، در همه موارد فرم به صورت متن ساده ارسال می‌شود که از نظر امنیتی رویه بدی محسوب می‌شود، چون فرد خرابکار می‌تواند در داده‌ها دخالت کرده و رمزهای عبور، جزییات کارت اعتباری یا هر داده دیگری که ارسال می‌شود را به سرقت ببرد. بهترین روش برای حفاظت از کاربران در برابر این رویداد این است که همه صفحه‌ها از جمله فرم‌ها را روی یک اتصال امن یعنی آدرس https عرضه کنیم تا داده‌ها پیش از ارسال رمزنگاری شوند.

مرورگرهای مدرن تبعات امنیتی ارسال داده‌های فرم روی یک اتصال غیر امن را تشخیص می‌دهند و هشدارهایی ارائه می‌کند تا کاربران را از استفاده از فرم‌های ناامن باز دارند. برای کسب اطلاعات بیشتر در مورد پیاده‌سازی‌های این موارد در فایرفاکس به صفحه «رمزهای عبور ناامن» (+) مراجعه کنید.

فیلد جستجو

این نوع از فیلد با استفاده از مقدار search برای خصوصیت type تنظیم می‌شود:

1	<input type="search" id="search" name="search">

تفاوت اصلی بین یک فیلد متنی و یک فیلد جستجو در شیوه استایل‌بندی آن از سوی مرورگر است. فیلدهای جستجو در اغلب موارد با استفاده از گوشه‌های گرد رندر می‌شوند و یا یک کاراکتر × در انتهای آن وجود دارد که با کلیک روی آن می‌توان مقدار وارد شده را پاک کرد. با این وجود، قابلیت اضافی دیگری نیز وجود دارد که لازم به ذکر است، در فیلدهای جستجو می‌توان مقادیر را به صورت خودکار ذخیره کرد تا روی صفحه‌های مختلف از یک وب‌سایت به صورت «تکمیل خودکار» (auto completed) عرضه شوند.

فیلد شماره تلفن

این نوع از فیلد با استفاده از تعیین مقدار tel برای خصوصیت type به دست می‌آید:

1	<input type="tel" id="tel" name="tel">

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

فیلد URL

این نوع از فیلد با استفاده از مقدار url برای خصوصیت type تعیین می‌شود:

1	<input type="url" id="url" name="url">

بدین ترتیب قیدهای اعتبارسنجی خاصی روی فیلد اعمال می‌شود و در صورتی که URL-های نامعتبری وارد شوند، مرورگر خطا گزارش می‌کند.

نکته: به صرف اینکه یک URL ساختار درستی دارد، به این معنی نیست که حتماً به مکانی که قطعاً وجود دارد اشاره می‌کند.

نکته: فیلدهایی که قیدهای خاصی دارند، زمانی که خطا داشته باشد از ارسال فرم جلوگیری می‌کنند، به علاوه می‌توانند طوری استایل‌بندی شوند که خطا را واضح‌تر نمایش دهند. این مسئله را در ادامه این سری مقاله‌ها و در مقاله‌ای با عنوان «اعتبارسنجی فرم داده‌ها» بیشتر مورد بررسی قرار می‌دهیم.

فیلدهای متنی چندخطی

یک فیلد متنی چندخطی فیلدی است که به جای استفاده از عنصر <element> با استفاده از عنصر <textarea> تعیین شده است.

1	<textarea cols="30" rows="10"></textarea>

تفاوت اصلی بین یک textarea و یک فیلد متنی تک‌خطی این است که کاربران می‌توانند متنی وارد کنند که در آن متن به چند خط شکسته شده باشد.

نکته: در اغلب موارد فیلدهای متنی چندخطی در مرورگرهای مختلف دارای یک دستگیره کشیدن در گوشه راست-پایین هستند که به کاربر امکان می‌دهد اندازه آن را تغییر دهد. این توانایی تغییر دادن اندازه را می‌توان با تعیین خصوصیت resize به صورت none در CSS غیر فعال کرد.

<textarea> چند خصوصیت دیگر نیز می‌پذیرد که شیوه رندر شدن آن را در چند خط کنترل می‌کند:

خصوصیت‌های عنصر <textarea>

نام خصوصیت	مقدار پیش‌فرض	توضیح
cols	20	عرض قابل مشاهده کنترل متن بر اساس عرض میانگین کاراکترها
rows		تعداد خطوط متن قابل مشاهده برای کنترل
wrap	soft	شیوه کنترل شکستن متن به چند خط را کنترل می‌کند. مقادیر ممکن hard و soft هستند.

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

دو نکته کلیدی مرتبط در اینجا وجود دارند که باید مورد اشاره قرار گیرند:

• اگر می‌خواهید یک مقدار عددی برای یک عنصر <input> تعریف کنید، باید از خصوصیت value استفاده کنید. در سوی دیگر، برای یک عنصر <textarea> باید متن پیش‌فرض بین تگ آغازین و پایانی تگ <textarea> قرار گیرد.
• عنصر <textarea> به دلیل ماهیت خود تنها محتوای متنی می‌پذیرد و این بدان معنی است که هر نوع محتوای HTML درون <textarea> به صورت محتوای متنی ساده رندر خواهد شد.

محتوای بازشدنی

ویجت «بازشدنی» (Drop-down) روشی ساده است که به کاربران امکان می‌دهد یکی از گزینه‌های فراوان را بدون اشغال فضای زیاد در رابط کاربری انتخاب کنند. HTML دو شکل از محتوای بازشدنی دارد که یکی «کادر انتخاب» (select box) و دیگری «کادر تکمیل خودکار» (autocomplete box) است. در هر دو حالت شیوه تعامل یکسان است. زمانی که کنترل فعال می‌شود، مرورگر لیستی از مقادیر را نمایش می‌دهد که کاربر می‌تواند از بین آن‌ها انتخاب کند.

کادر انتخاب

کادر انتخاب به وسیله یک عنصر <select> با یک یا دو عنصر <option> به عنوان فرزند ایجاد می‌شود که هر کدام از آن‌ها یکی از مقادیر ممکن را تعیین می‌کنند.

1 2 3 4 5

<select id="simple" name="simple">   <option>Banana</option>   <option>Cherry</option>   <option>Lemon</option> </select>

اگر مقدار پیش‌فرض برای یک کادر انتخاب الزامی باشد، می‌توان با استفاده از خصوصیت selected روی عنصر <option> مطلوب آن را تعیین کرد. بدین ترتیب در زمان بارگذاری صفحه، این گزینه از قبل انتخاب شده است. عناصر <option> می‌توانند درون عناصر <optgroup> نیز به صورت تو در تو تعریف شوند تا به لحاظ بصری گروه‌هایی از مقادیر را تشکیل دهند:

1 2 3 4 5 6 7 8 9 10 11 12

<select id="groups" name="groups">   <optgroup label="fruits">     <option>Banana</option>     <option selected>Cherry</option>     <option>Lemon</option>   </optgroup>   <optgroup label="vegetables">     <option>Carrot</option>     <option>Eggplant</option>     <option>Potato</option>   </optgroup> </select>

اگر یک عنصر <option> با استفاده از یک خصوصیت value تنظیم شده باشد، این مقدار خصوصیت زمانی که فرم تحویل می‌شود ارسال خواهد شد. اگر خصوصیت value نادیده گرفته شود، محتوای عنصر <option> به عنوان مقدار کادر انتخاب مورد استفاده قرار می‌گیرد.

روی عنصر <optgroup>، خصوصیت label پیش از مقادیر نمایش پیدا می‌کند، اما حتی اگر ظاهر آن تا حدودی شبیه یک گزینه باشد در عمل غیر قابل انتخاب است.

کادر انتخاب چند گزینه‌ای

هر کادر انتخاب به صورت پیش‌فرض امکان انتخاب یک مقدار منفرد را به کاربر می‌دهد. با افزودن خصوصیت multiple به عنصر <select> می‌توان امکان انتخاب چند مقدار را به کاربر داد. در این حالت از سازوکار پیش‌فرض سیستم عامل استفاده می‌شود. یعنی کاربر باید کلیدهای cmd (در مک) یا Ctrl (در ویندوز) را برای کلیک و انتخاب چند مورد نگه دارد.

نکته: در صورتی که از کادرهای انتخاب چندگزینه‌ای استفاده می‌کنید، کادر انتخاب دیگر مقادیر محتوا را به صورت بازشدنی نمایش نمی‌دهد، بلکه همه آن‌ها به صورت یکباره در یک لیست نمایش می‌یابند.

1 2 3 4 5

<select multiple id="multi" name="multi">   <option>Banana</option>   <option>Cherry</option>   <option>Lemon</option> </select>

نکته: همه مرورگرها از عنصر <select> پشتیبانی می‌کنند و همچنین همه آن‌ها از خصوصیت multiple نیز روی آن پشتیبانی می‌کنند.

کادر تکمیل خودکار

می‌توان مقادیر پیشنهاد شده با تکمیل خودکار را در ویجت‌هایی که از عنصر <datalist> استفاده می‌کنند ارائه کرد و مقادیری که قرار است نمایش پیدا کنند نیز با استفاده از عناصر <option> تعیین می‌شوند.

در این حالت لیست داده‌ها محدود به فیلد متنی (به طور معمول عنصر <input>) با استفاده از خصوصیت list خواهد بود.

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

1 2 3 4 5 6 7 8 9 10 11 12

<label for="myFruit">What's your favorite fruit?</label> <input type="text" name="myFruit" id="myFruit" list="mySuggestion"> <datalist id="mySuggestion">   <option>Apple</option>   <option>Banana</option>   <option>Blackberry</option>   <option>Blueberry</option>   <option>Lemon</option>   <option>Lychee</option>   <option>Peach</option>   <option>Pear</option> </datalist>

نکته: بر اساس مشخصات HTML (+)، خصوصیت list و عنصر <datalist> را می‌توان به همراه هر نوع از ویجت که نیازمند ورودی کاربر است استفاده کرد. با این حال مشخص نیست که طرز کار آن با کنترل‌هایی به جز متن (برای مثال با رنگ) چگونه می‌تواند باشد و مرورگرهای مختلف نیز بسته به مورد رفتار متفاوتی نشان می‌دهند. به همین دلیل در هنگام استفاده از این قابلیت روی هر چیزی به جز فیلدهای متنی هوشیار باشید.

پشتیبانی از datalist و fallback

عنصر <datalist> یکی از جدیدترین امکانات فرم‌های HTML است، از این رو پشتیبانی مرورگر آن نسبت به آن چه تاکنون بررسی کردیم، تا حدودی محدودتر است. برای مثال IE10 و نسخه‌های قبل آن و همچنین سافاری در زمان نگارش این مقاله هنوز از آن پشتیبانی نمی‌کرده‌اند.

برای رفع این مشکل، ترفند کوچکی را معرفی می‌کنیم که می‌توانید به وسیله آن روی این مرورگرها fallback تعریف کنید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<label for="myFruit">What is your favorite fruit? (With fallback)</label> <input type="text" id="myFruit" name="fruit" list="fruitList">      <datalist id="fruitList">   <label for="suggestion">or pick a fruit</label>   <select id="suggestion" name="altFruit">     <option>Apple</option>     <option>Banana</option>     <option>Blackberry</option>     <option>Blueberry</option>     <option>Lemon</option>     <option>Lychee</option>     <option>Peach</option>     <option>Pear</option>   </select> </datalist>

مرورگرهایی که از عنصر <datalist> پشتیبانی می‌کنند همه عناصری را که عناصر <option> نیستند نادیده گرفته و مطابق انتظار عمل خواهند کرد. از سوی دیگر، مرورگرهایی که از عنصر پشتیبانی نمی‌کنند، برچسب و کار انتخاب را نمایش خواهند داد. البته روش‌های دیگری نیز برای مدیریت فقدان پشتیبانی برای عنصر <datalist> وجود دارد، اما این ساده‌ترین روش است، چون روش‌های دیگر نیازمند استفاده از جاوا اسکریپت هستند.

آیتم‌های قابل بررسی

«آیتم‌های قابل بررسی» (Checkable items) ویجت‌هایی هستند که حالت آن‌ها را می‌توان با کلیک کردن رویشان تغییر داد. دو نوع از آیتم قابل بررسی وجود دارند: کادر بررسی و دکمه‌های رادیویی. هر دو این آیتم‌ها از خصوصیت checked استفاده می‌کنند تا نشان دهند که ویجت به صورت پیش‌فرض تیک خورده است یا نه.

لازم به ذکر است که این ویجت‌ها دقیقاً مانند ویجت‌های فرم دیگر عمل نمی‌کنند. در اغلب ویجت‌های فرم، زمانی که فرم تحویل می‌شود، همه ویجت‌هایی که خصوصیت name دارند ارسال می‌شوند، حتی اگر هیچ مقداری پر نشده باشد. در مورد آیتم‌های قابل بررسی، مقادیر آن‌ها تنها زمانی ارسال می‌شود که تیک خورده باشند. اگر تیک نخورده باشند، چیزی ارسال نمی‌شود و این وضعیت حتی شامل نام آن‌ها نیز می‌شود.

برای این که بالاترین سطح از کاربردپذیری/دسترس‌پذیری را داشته باشیم، بهتر است هر لیست از آیتم‌های مرتبط را در یک <fieldset> قرار دهیم و به همراه آن یک <legend> نیز عرضه کنیم که توضیحی کلی در مورد لیست ارائه می‌کند. هر جفت منفرد از عناصر <label>/<input> باید در آیتم لیست مخصوص خود قرار گیرد. در ادامه این موضوع را با طرح مثال‌هایی بیشتر روشن می‌سازیم.

همچنین در صورتی که می‌خواهید این کنترل‌ها معنادار باشند، باید مقادیری برای این نوع از ورودی‌ها درون خصوصیت value ارائه کنید. در صورتی که مقداری ارائه نشده باشد، کادرهای بررسی و دکمه‌های رادیویی مقدار on خواهند داشت.

کادر بررسی

یک کادر بررسی یا چک باکس با استفاده از عنصر <input> به همراه خصوصیت type آن مقداری برابر با checkbox خواهد داشت.

1	<input type="checkbox" checked id="carrots" name="carrots" value="carrots">

گنجاندن خصوصیت checked موجب می‌شود که کادر بررسی در زمان بارگذاری صفحه، به صورت خودکار تیک بخورد.

دکمه رادیویی

دکمه رادیویی با استفاده از عنصر <element> به همراه تعیین مقدار radio برای خصوصیت type به دست می‌آید.

1	<input type="radio" checked id="soup" name="meal">

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<fieldset>   <legend>What is your favorite meal?</legend>   <ul>     <li>       <label for="soup">Soup</label>       <input type="radio" checked id="soup" name="meal" value="soup">     </li>     <li>       <label for="curry">Curry</label>       <input type="radio" id="curry" name="meal" value="curry">     </li>     <li>       <label for="pizza">Pizza</label>       <input type="radio" id="pizza" name="meal" value="pizza">     </li>   </ul> </fieldset>

دکمه‌ها

درون فرم‌های HTML سه نوع دکمه وجود دارد:

• Submit: این نوع دکمه داده‌ها را به سرور ارسال می‌کند. در مورد عناصر <button> وارد نکردن خصوصیت type (یا مقدار نامعتبر type) موجب می‌شود به دکمه submit تبدیل شوند.
• Reset: این نوع دکمه همه ویجت‌های فرم را به مقادیر پیش‌فرضشان ریست می‌کند.
• Anonymous: این نوع دکمه‌ها هیچ جلوه اتوماتیک ندارند، اما می‌توانند با استفاده از کد جاوا اسکریپت سفارشی‌سازی شوند.

هر دکمه‌ای با استفاده از عنصر <button> یا عنصر <input> ایجاد می‌شود. این مقدار خصوصیت type است که نوع خاص دکمه نمایش یافته را تعیین می‌کند.

submit

1 2 3 4 5

<button type="submit">     This a <br><strong>submit button</strong> </button>   <input type="submit" value="This is a submit button">

resetSection

1 2 3 4 5

<button type="reset">     This a <br><strong>reset button</strong> </button>   <input type="reset" value="This is a reset button">

anonymousSection

1 2 3 4 5

<button type="button">     This an <br><strong>anonymous button</strong> </button>   <input type="button" value="This is an anonymous button">

دکمه‌ها همواره رفتار یکسانی دارند، چه از یک عنصر <button> استفاده کنید و چه از عنصر <input> بهره بگیرید. با این حال برخی تفاوت‌های قابل توجه وجود دارند:

• چنان که در مثال‌های فوق می‌بینید، عناصر <button> امکان استفاده از محتوای HTML را در برچسب‌هایشان می‌دهند که درون تگ‌های آغازین و پایانی <button> درج می‌شود. در سوی دیگر عناصر <input> عناصری خالی محسوب می‌شوند و برچسب‌هایشان درون خصوصیت‌های value درج می‌شود، لذا تنها محتوای متنی ساده می‌پذیرند.
• در عناصر <button> امکان تعیین مقداری متفاوت از برچسب دکمه وجود دارد و این مقدار متفاوت در خصوصیت value قرار می‌گیرد. البته این وضعیت در نسخه‌های اینترنت اکسپلورر قبل از IE 8 پایدار نیست.

به بیان فنی تقریباً هیچ تفاوتی بین یک دکمه که با عنصر <button> تعریف شده و دکمه‌ای که با عنصر <input> تعریف شده وجود ندارد. تنها تفاوت قابل توجه در برچسب خود دکمه است. درون یک عنصر <input> برچسب می‌تواند داده‌های کاراکتری باشد، در حالی که در عنصر <button> برچسب می‌تواند محتوای HTML باشد و از این رو می‌تواند استایل‌دهی شود.

ویجت‌های پیشرفته فرم

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

اعداد

ویجت‌هایی که برای وارد کردن عدد استفاده می‌شوند با استفاده از عنصر <input> ایجاد می‌شوند و خصوصیت type آن نیز روی مقدار number قرار می‌گیرد. این کنترل ظاهری شبیه به یک فیلد متنی دارد، اما تنها امکان وارد کردن اعداد اعشاری را به کاربر می‌دهد و دکمه‌هایی برای افزایش یا کاهش مقدار ویجت ارائه می‌کند.

در این ویجت امکان اجرای کارهای زیر وجود دارد:

• تعیین محدودیت بر اساس تنظیم خصوصیت‌های min و max
• تعیین مقداری برای خصوصیت step که دکمه‌های افزایش و کاهش ویجت به آن میزان عدد درون فیلد را تغییر می‌دهند.

مثال

1	<input type="number" name="age" id="age" min="1" max="10" step="2">

بدین ترتیب ویجتی ایجاد می‌کنیم که مقدار آن محدود به هر مقداری بین 1 و 100 است و دکمه‌های افزایش و کاهش آن مقدارش را 2 واحد تغییر می‌دهند.

ورودی‌های number در نسخه‌های 10 و پایین‌تر از اینترنت اکسپلورر پشتیبانی نمی‌شوند.

Slider

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

اسلایدر با استفاده از تعیین مقدار range برای خصوصیت type عنصر <input> به دست می‌آید. پیکربندی صحیح اسلایدر حائز اهمیت بالایی است. به این منظور قویاً توصیه می‌شود که خصوصیت‌های min، max و step تعیین شوند.

مثال

1	<input type="range" name="beans" id="beans" min="0" max="500" step="10">

این مثال یک اسلایدر می‌سازد که مقدار آن می‌تواند در بازه‌ای بین 0 و 500 تغییر پیدا کند و دکمه‌های افزایش/کاهش مقدار را به میزان 10+ و 10- تغییر می‌دهند.

یک مشکل اسلایدرها این است که هیچ نوع بازخورد بصری در مورد این که اسلایدر اکنون روی چه میزانی قرار دارد ارائه نمی‌کنند. شما باید خودتان با استفاده از جاوا اسکریپت این امکان را فراهم بسازید، اما اجرای آن هم چندان دشوار نیست. در این مثال ما یک عنصر خالی <span> اضافه می‌کنیم که در آن مقدار کنونی اسلایدر را نمایش داده و به محض تغییر آن را به‌روزرسانی می‌کنیم.

1 2 3

<label for="beans">How many beans can you eat?</label> <input type="range" name="beans" id="beans" min="0" max="500" step="10"> <span class="beancount"></span>

این مثال را می‌توان با استفاده از نوعی کد جاوا اسکریپت ساده پیاده‌سازی کرد:

1 2 3 4 5 6 7 8

var beans = document.querySelector('#beans'); var count = document.querySelector('.beancount');   count.textContent = beans.value;   beans.oninput = function() {   count.textContent = beans.value; }

در این مثال ارجاعی به ورودی بازه و span در دو متغیر ذخیره می‌کنیم و سپس بی‌درنگ textContent این span را روی value کنونی ورودی تنظیم می‌کنیم. در نهایت یک دستگیره رویداد oninput تنظیم می‌کنیم به طوری که هر بار اسلایدر جابجا می‌شود، textContent این span به مقدار ورودی جدید به‌روزرسانی شود.

ورودی‌های range در اینترنت اکسپلورر نسخه‌های زیر 10 پشتیبانی نمی‌شوند.

انتخاب‌گر تاریخ و زمان

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

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

datetime-local

با استفاده از این مقدار یک ویجت ایجاد می‌شود که امکان انتخاب تاریخ و زمان را فراهم می‌سازد، اما این ویجت هیچ منطقه زمانی مشخصی ندارد.

1	<input type="datetime-local" name="datetime" id="datetime">

Month

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

1	<input type="month" name="month" id="month">

Time

این مقدار یک ویجت ایجاد می‌کند که با استفاده از آن می‌توان زمانی را انتخاب کرد.

1	<input type="time" name="time" id="time">

Week

این مقدار ویجتی را نمایش می‌دهد که با استفاده از آن می‌توان شماره هفته سال را انتخاب کرد.

1	<input type="week" name="week" id="week">

همه کنترل‌های تاریخ و زمان می‌توانند با استفاده از خصوصیت‌های min و max محدود شوند.

1 2	<label for="myDate">When are you available this summer?</label> <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">

هشدار: ویجت‌های تاریخ و زمان پشتیبانی عمیقی ندارند. در زمان نگارش این مقاله کروم، Edge، فایرفاکس و اپرا از آن‌ها به خوبی پشتیبانی می‌کردند، اما اینترنت اکسپلورر و سافاری پشتیبانی ناقصی از آن داشتند.

انتخاب‌گر رنگ

مدیریت رنگ در صفحه‌های وب همواره دشوار بوده است. روش‌های مختلفی برای نمایش آن‌ها وجود دارد که شامل مقادیر RGB (ده‌دهی یا هگزادسیمال)، مقادیر HSL، کلیدواژه و غیره است. ویجت رنگ به کاربر امکان انتخاب رنگ را به روش متنی و همچنین بصری می‌دهد. ویجت رنگ با استفاده از تعیین مقدار color برای خصوصیت type عنصر <input> به دست می‌آید.

1	<input type="color" name="color" id="color">

هشدار: ویجت رنگ در حال حاضر پشتیبانی مناسبی ندارد. اینترنت اکسپلورر اصلاً از آن پشتیبانی نمی‌کند و سافاری نیز تا زمان نگارش این مقاله از آن پشتیبانی نکرده است. البته مرورگرهای عمده دیگر از آن پشتیبانی می‌کنند.

ویجت‌های دیگر

چند ویجت دیگر نیز وجود دارند که آن‌ها را نمی‌توان به آسانی طبقه‌بندی کرد، زیرا رفتارهای خاصی دارند اما به هر حال مفید هستند.

انتخاب‌گر فایل

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

برای ایجاد ویجت انتخاب‌گر فایل، می‌توانید با تعیین مقدار file برای خصوصیت type عنصر <input> استفاده کنید. نوع فایل‌هایی که قابل قبول هستند را می‌توان با استفاده از خصوصیت accept تعیین کرد. به علاوه اگر می‌خواهید به کاربر امکان انتخاب بیش از یک فایل را نیز بدهید می‌توانید این کار را با افزودن خصوصیت multiple انجام دهید.

مثال

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

1	<input type="file" name="file" id="file" accept="image/*" multiple>

محتوای پنهان

به دلایل فنی برخی اوقات راحت‌تر است که برخی بخش‌های داده‌ها در فرم ارسال شوند، اما به کاربر نمایش داده نشوند. به این منظور می‌توان عناصر پنهانی در فرم تعبیه کرد. برای انجام این کار باید مقدار hidden در خصوصیت type عنصر <input> مورد استفاده قرار گیرد.

اگر چنین عنصری را ایجاد می‌کنید، لازم است که خصوصیت‌های name و value را تعیین کنید:

1	<input type="hidden" id="timestamp" name="timestamp" value="1286705410">

دکمه تصویر

کنترل «دکمه تصویر» (image button) کنترلی است که دقیقاً مانند یک عنصر <img> نمایش پیدا می‌کند به جز این که وقتی کاربر روی آن کلیک بکند، رفتاری مانند دکمه تحویل فرم دارد.

دکمه تصویر با استفاده از تعیین مقدار image برای خصوصیت type عنصر <input> به دست می‌آید. این عنصر دقیقاً از همان مجموعه خصوصیات عنصر <img> به علاوه همه خصوصیت‌های مورد پشتیبانی از سوی دکمه‌های فرم دیگر پشتیبانی می‌کند:

1	<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

اگر دکمه تصویر برای تحویل فرم استفاده شود، این ویجت مقدار خودش را ارائه نمی‌کند، بلکه به جای آن مختصات X و Y نقطه کلیک روی تصویر ارائه می‌شود. توجه کنید که مختصات بر اساس تصویر، نسبی هستند، یعنی گوشه بالا-چپ تصویر مختصات 0 و 0 را دارد. این مختصات به صورت جفت کلید/مقدر ارسال می‌شود:

• کلید مقدار X مقدار خصوصیت name است که پس از رشته x. می‌آید.
• کلید مقدار Y مقدار خصوصیت name است که پس از رشته y. می‌آید.

بنابراین برای نمونه زمانی که روی تصویر این ویجت کلیک می‌کنید، یک URL مانند زیر ارسال می‌شود:

1	http://foo.com?pos.x=123&pos.y=456

این یک روش کاملاً آسان برای ساخت یک hot map است.

متر و نوارهای پیشروی

مترها و نوارهای پیشروی بازنمایی‌های بصری از مقادیر عددی محسوب می‌شوند.

پیشروی

نوار پیشروی مقداری است که در طی زمان تا رسیدن به یک حد بیشینه تعیین شده در خصوصیت max تغییر پیدا می‌کند. چنین نواری با استفاده از عنصر <progress> ایجاد می‌شود.

1	<progress max="100" value="75">75/100</progress>

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

محتوای درون عنصر <progress> یک fallback برای مرورگرهایی است که از این عنصر پشتیبانی نمی‌کنند و از فناوری‌های حمایتی برای بیان صوتی آن استفاده می‌شود.

متر

«نوار متر» (Meter Bar) نماینده یک مقدار ثابت دریک بازه است که به وسیله مقدار min و max نمایش پیدا می‌کند. این مقدار از نظر بصری به صورت یک نوار نمایش پیدا می‌کند و برای این که بدانید این نوار چگونه به نظر می‌رسد، مقدار آن را با برخی مقادیر تعیین شده دیگر مقایسه می‌کنیم:

• مقادیر low و high بازه را به سه بخش تقسیم می‌کنند:
  • بخش تحتانی بازه بین مقادیر min و low قرار دارد (که شامل آن مقادیر است).
  • بخش میانی بازه بین مقادیر low و high است (آن مقادیر را ندارد).
  • بخش فوقانی بازه بین مقادیر high و max است (شامل آن مقادیر است).
• مقدار بهینه (optimum) در واقع بهینه‌ترین مقدار را برای عنصر <meter> تعریف می‌کند. این مقدار به همراه مقدار low و high بخشی از بازه را تعریف می‌کند که ارجحیت دارد:
  • اگر مقدار optimum در بخش تختانی بازه باشد، بازه تحتانی به عنوان بخش ترجیحی تصور می‌شود، بازه میانی بخش میانگین و بازه فوقانی به عنوان بدترین بخش در نظر گرفته می‌شود.
  • اگر مقدار optimum در بخش مبانی باشد، بخش تختانی به عنوان بخش میانگین تصور می‌شود، بخش میانی به عنوان بخش ارجح تلقی می‌شود و بخش فوقانی نیز میانگین در نظر گرفته می‌شود.
  • اگر مقدار optimum در بخش فوقانی بازه باشد، بازه تحتانی به عنوان بدترین بخش نگریسته می‌شود، بخش میانی میانگین خواهد بود و بخش فوقانی دارای بالاترین ارجحیت تصور می‌شود.

همه مرورگرهایی که عنصر <meter> را پیاده‌سازی کرده‌اند، از مقادیر زیر برای تغییر رنگ نوار متر استفاده می‌کنند:

• اگر مقدار کنونی در بخش ارجح باشد، نوار سبز رنگ است.
• اگر مقدار کنونی در بخش میانگین باشد، نوار زرد رنگ است.
• اگر مقدار کنونی در بدترین بخش باشد، نوار قرمز رنگ است.

چنین نواری با استفاده از عنصر <meter> ساخته می‌شود. این عنصر می‌تواند برای پیاده‌سازی هر نوع متر مورد استفاده قرار گیرد. برای نمونه می‌توان نواری ساخت که فضای کل مصرف شده دیسک را نمایش می‌دهد و زمانی که نزدیک پر شدن دیسک است قرمز می‌شود.

1	<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

محتوای درون عنصر <meter> یک fallback برای مرورگرهایی است که از این عنصر پشتیبانی نمی‌کنند و به فناوری‌های حمایتی برای بیان صوتی آن کمک می‌کند.

پشتیبانی از عناصر پیشروی و متر نسبتاً مناسب است، هر چند اینترنت اکسپلورر از آن پشتیبانی نمی‌کند اما مرورگرهای دیگر از آن به طور کامل پشتیبانی می‌کنند.

سخن پایانی

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

منبع: فرادرس

کار با فایل های اکسل در پایتون — راهنمای مقدماتی

کار با پایتون در اغلب موارد به تنهایی خود یک نعمت محسوب می‌شود. افرادی که مدت زمان زیادی با پایتون کار کرده‌اند، غالباً اظهار می‌کنند که در کار با آن هیچ مشکلی ندارد، اما شاید آن‌ها مجبور به کار با «صفحه‌های گسترده» (اسپردشیت) و فایل های اکسل در پایتون نشده‌اند. پایتون ساختار آسانی برای نوشتن دارد و سبک دینامیک آن موجب شده که به گزینه‌ای عالی برای مبتدیان تبدیل شود. اما مزیت‌های آن به اینجا ختم نمی‌شود. پایتون می‌تواند در بسیاری از محصولات بزرگ مانند فریمورک Django استفاده شود و استفاده هم می‌شود.

جنگو قدرت برخی اپلیکیشن‌های رسانه‌ای مانند اینستاگرام را تأمین می‌کند. نمونه‌های دیگر شامل BitTorrent ،Google App Engine و Ubuntu Software Center هستند. حتی کارکردهای مرکزی یوتیوب نیز در پایتون نوشته شده‌اند. همه این مثال‌ها پایداری و مفید بودن پایتون را نشان می‌دهند.

کار با داده و فایل های اکسل در پایتون

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

این کار نیازمند واکشی داده‌ها از پایگاه داده و دستکاری آن‌ها به صورت یک فرم قابل ارائه است که به صورت کلی قالب «صفحه گسترده» است. در این نوشته به بررسی روش انجام این کار می‌پردازیم.

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

پکیج‌های شخص ثالث زیادی برای کار با اسپردشیت‌ها در پایتون وجود دارند. برخی از آن‌ها شامل فهرست زیر هستند:

• Openpyxl (+)
• Xlsxwriter (+)
• Xlrd (+)
• Xlwt (+)
• Xlutils (+)

شاید اطلاع داشته باشید که اکسل دو پسوند فایل برای صفحه‌های گسترده ارائه کرده است که یکی xls. و دیگری xlsx. است. اولی برای فایل‌هایی با قالب مایکروسافت اکسل 2003 و قبل‌تر است و دومی برای نسخه‌های جدیدتر استفاده می‌شود.

نخستین مشکلی که در زمان کار کردن با صفحه‌های گسترده در پایتون پیش می‌آید این است که دو پسوند فایل مختلف وجود دارند. پکیج xlwt از پسوند xls. برای فایل‌های اکسل پشتیبانی می‌کند و openpyxl نیز از پسوند xlsx. برای فایل‌های اکسل پشتیبانی می‌کند.

پکیج xlwt

در ادامه شیوه استفاده از پکیج xlwt را برای کار کردن با صفحه‌های گسترده توضیح می‌دهیم. شما می‌توانید این پکیج را با اجرای دستور زیر روی ترمینال یا اعلان فرمان، نصب کنید:

pip install xlwt

توجه کنید که باید pip روی سیستم شما نصب باشد. برای نصب pip از دستورالعمل‌های این مطلب استفاده کنید:

• نصب PIP پایتون روی ویندوز، مک و لینوکس — از صفر تا صد

در این مطلب از xlwt نسخه 1.3.0 استفاده شده است. پس از این که کار نصب پکیج کامل شد یک ویرایشگر متنی باز کنید و یک فایل جدید ایجاد کرده و نامی که دوست دارید را به آن بدهید. ما نام فایل خود را excelScript.py گذارده‌ایم.

درون این اسکریپت کد زیر را بنویسید:

1 2 3 4 5 6 7

import xlwt def main():     book = xlwt.Workbook()     sheet = book.add_sheet('Sheet 1')     book.save('Sample.xls') if __name__ == '__main__':     main()

کد فوق یک فایل اکسل خالی با نام Sample.xls ایجاد می‌کند که شامل یک برگه منفرد با عنوان Sheet 1 است. این برگه نمونه‌ای از ایجاد فایل ساده xls. است. اسکریپت فوق را می‌توانید به صورت زیر در خط فرمان اجرا کنید:

python excelScript.py

برای نوشتن داده‌ها در برگه اکسل، کد را به صورت زیر تغییر دهید:

1 2 3 4 5 6 7 8 9

import xlwt def main():     book= xlwt.Workbook()     sheet = book.add_sheet('Sheet 1') # sheet.write(r, c, <text>)     sheet.write(0, 0, 'sample') book.save('Sample.xls') if __name__ == '__main__':     main()

بدین ترتیب عبارت sample در ردیف صفر و ستون صفر نوشته می‌شود. به خاطر بسپارید که پکیج xlwt اندیس‌های ردیف‌ها و ستون‌ها را از صفر آغاز می‌کند. بدین ترتیب می‌توانیم هر تعداد برگه که می‌خواهید در فایل‌های اکسل بنویسید. این اسکریپت را با استفاده از دستور زیر در خط فرمان اجرا کنید:

python excelScript.py

این یک روش رایج برای نوشتن اکسل با استفاده از پکیج xlwt است که در آن می‌توانید ستون‌ها و ردیف‌ها را ادغام کنید. شما می‌توانید استایل نیز تعیین کنید. کد زیر روش انجام این کار را نشان می‌دهد:

1 2 3 4 5 6 7 8 9 10 11 12

import xlwt def main():     book= xlwt.Workbook()     sheet = book.add_sheet('Sheet 1') # sheet.write_merge(r1, r2, c1, c2, <text>)     # For styling add     # xlwt.easyxf('align: horz center, vert center')     # add the above after <text> as 6th argument to write_merge sheet.write_merge(0, 1, 0, 1, 'sample 1', xlwt.easyxf('align: horz center, vert center')) book.save('Sample.xls') if __name__ == '__main__':     main()

بدین ترتیب ستون‌های (0,1) و ردیف‌های (0,1) ادغام می‌شوند تا یک ستون منفرد تشکیل دهند و sample 1 در آن نوشته می‌شود که در جهات افقی و عمودی به صوت مرکزی هم‌راستا شده است. xlwt.easyxf کار استایل دادن را برای شما انجام می‌دهد. اگر فایل xls را باز کنید، نمونه قبلاً نوشته شده را می‌بینید. برای کسب اطلاعات بیشتر در مورد متدهای ارائه شده از سوی پکیج xlwt می‌توانید به صفحه مستندات آن (+) مراجعه کنید.

توجه داشته باشید که اگر از xlwt استفاده کنید و فایلی با همان نام وجود داشته باشد در این صورت فایل جایگزین خواهد شد. رویه فوق محدودیت‌هایی نیز دارد، زیرا می‌توانید تنها 65536 ردیف و 256 ستون در نسخه‌های قدیمی اکسل ایجاد کنید. به طور مشابه در زمان استفاده از این پکیج نیز تنها می‌توانید این تعداد ردیف و ستون ایجاد کنید. اگر می‌خواهید داده‌های بیشتر از این مقدار بنویسید، در این صورت متأسفانه این پکیج نمی‌تواند به شما کمک کند و باید از پکیج پایتون دیگری به نام openpyxl (+) استفاده کنید.

در زمان کار با پکیج xlwt متوجه شدیم که ایجاد فایل‌های xls. بسیار آسان است، اما اگر از قبل یک فایل xls. داشته باشیم و بخواهیم داده‌های جدیدی به فایل موجود الحاق کنیم چطور؟ در چنین حالتی پکیج xlwt مناسب نخواهد بود و باید این مشکل را رفع کنیم. توجه داشته باشید که اگر یک فایل xls. داشته باشید در این صورت نمی‌توانید از openpyxl استفاده کنید که از الحاق داده‌ها به فایل‌های موجود پشتیبانی می‌کند، زیرا این پکیج با نسخه‌های قدیمی فایل‌های اکسل ناسازگار است.

برای حل این مشکل به دو پکیج دیگر پایتون نیاز داریم. برای نمونه پکیج xlrd برای خواندن فایل اکسل و پکیج xlutils برای ایجاد یک کپی از شیء اکسل درون شیء xlwt است به طوری که بتوان درون آن چیزی نوشت. برای نصب این پکیج‌ها دستورهای زیر را اجرا کنید:

pip install xlrd
pip install xlutils

برای الحاق داده‌ها به یک فایل موجود xls. با استفاده از xlwt، رویه زیر می‌تواند مورد استفاده قرار گیرد. در فایل excelScript.py، کد را به صورت زیر تغییر دهید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

from xlutils.copy import copy import xlrd import xlwt def main():     rb = xlrd.open_workbook('sample.xls')          wb = copy(rb)     sheet = wb.get_sheet(0)        sheet.write(5, 5, 'sample 2')     sheet.write_merge(3, 4, 3, 4, 'sample 3', xlwt.easyxf('align: horse center, vert center')) wb.save('sample.xls') if __name__ == '__main__';     main()

زمانی که این اسکریپت را با استفاده از دستور زیر اجرا کنید:

python excelScript.py

و فایل اکسل ایجاد شده را باز کنید، متوجه خواهید شد که sample 1 در فایل xls. موجود قبلی نوشته شده است و sample 2 و sample 3 نیز به آن فایل اضافه شده است. این همان کارکردی است که به آن نیاز داریم. در ادامه روش اجرای آن را توضیح می‌دهیم.

سیر وقایعی که اتفاق می‌افتند به صورت زیر است. ابتدا فایل با استفاده از پکیج xlrd خوانده می‌شود و در یک متغیر به نام rb در قالب یک شیء ذخیره می‌شود. سپس این شیء با استفاده از متد copy در پکیج xlutils درون یک متغیر wb کپی می‌شود. این بدان معنی است که در بازه‌ای از زمان هر دو متغیر rb و wb حاوی داده‌های شیء یکسانی خواهند بود. اکنون با استفاده از اندیس صفر به برگه نخست اکسل دسترسی داریم و داده‌های شیء آن را درون متغیر sheet ذخیره می‌کنیم. همچنین در این زمان می‌توانیم از همه ظرفیت‌های کارکردی پکیج xlwt برای ذخیره نهایی برگه اکسل با همان نام قبلی یعنی sample.xls استفاده کنیم.

اگر مطالب فوق را به دقت پیگیری کرده باشید، در این صورت احتمالاً متوجه شده‌اید که داده‌ها در عمل واقعاً به فایل موجود الحاق نشده‌اند. در واقع کاری که ما انجام دادیم این است که داده‌های فایل موجود را با استفاده از xlrd درون حافظه کپی کرده‌ایم، پس آن‌ها را با استفاده از متد copy از پکیج xlutiles درون فایل اکسل جدیدی نوشته‌ایم و در نهایت داده‌های جدید را در فایل جدید اکسل نوشته‌ایم و آن را با همان نام قبلی ذخیره کرده‌ایم تا روی فایل قبلی بازنویسی شود.

پکیج openpyxl

در صورتی که با فایل‌های قدیمی xls. کار می‌کنید، شاید این روش چندان مناسب نباشد و قضیه به همین جا ختم نمی‌شود. همه این موارد که طرح شد به کار با فایل‌های xls. مربوط می‌شوند، اما گر بخواهیم همین کار را روی فایل‌های xlsx. انجام دهیم باید از پکیج openpyxl استفاده کنیم.

در ادامه به بررسی استفاده از پکیج پایتون openpyxl برای ایجاد صفحه‌های گسترده در قالب xlsx. می‌پردازیم. چنان که پیش‌تر گفتیم، اگر داده‌های زیادی در فایل خود داشته باشید و مشتری‌های زیادی وجود داشته باشند که قرار باشد به همه آن‌ها گزارش دهیم در این صورت دانستن روش کار با قالب‌های xls. و xlsx. به عنوان قالب‌های قدیمی و جدید ذخیره فایل اکسل مهارت مناسبی است که در اغلب موارد به کار شما می‌آید.

پکیج openpyxl (+) یک کتابخانه پایتون برای خواندن و نوشتن فایل‌های xlsx/xlsm/xltx/xltm است.

بدین ترتیب تنها با استفاده از یک پکیج می‌توان داده‌ها را خواند، نوشت و الحاق کرد. این پکیج را می‌توان با استفاده از دستور زیر در ترمینال یا اعلان فرمان نصب کرد:

pip install openpyxl

توجه کنید که pip باید روی سیستم نصب باشد. پس از این که نصب پکیج پایان یافت، ویرایشگر متنی را باز کنید تا یک فایل جدید ایجاد کنید و نامی که دوست دارید را روی آن بگذارید. ما فایل خود را excelScript.py نامیدیم. درون اسکریپت کد زیر را بنویسید:

1 2 3 4 5 6 7

import openpyxl def main():    book = openpyxl.Workbook()    book.create_sheet('Sample Sheet')    book.save('Sample.xlsx') if __name__ == '__main__':    main()

کد فوق یک فایل اکسل خالی به نام Sample.xlsx ایجاد می‌کند که شامل یک برگه منفرد به نام sheet 1 است. این برگه نمونه‌ای از فرایند ایجاد یک فایل xslx. است. اسکریپت زیر را با وارد کردن دستور زیر در خط فرمان اجرا کنید:

python excelScript.py

زمانی که این فایل xlsx. را باز کنید، می‌بینید که به جای یک برگه، دو برگه در فایل ایجاد شده است. دلیل رخ دادن این وضعیت آن است که در زمان ایجاد یک شیء با متد ()Workbook در پکیج openpyxl، این متد به طور پیش‌فرض به محض فراخوانی یک برگه به نام sheet ایجاد می‌کند.

اگر نام‌های برگه‌ای که روی آن کار می‌کنید، برایتان مهم نیست می‌توانید مستقیماً روی همین برگه کار کنید و نیازی به ایجاد برگه دیگر وجود ندارد. اگر کارتان طوری است که باید حتماً از یک برگه استفاده کنید، می‌توانید مستقیماً شروع به نوشتن در این برگه بکنید. در ادامه شیوه حذف برگه پیش‌فرض Sheet از فایل xlsx. را آموزش خواهیم داد. برای نوشتن داده‌ها در اکسل کد را به صورت زیر تغییر دهید:

1 2 3 4 5 6 7 8 9 10 11

import openpyxl def main():     book = openpyxl.Workbook()     book.create_sheet('Sample') # Acquire a sheet by its name     sheet = book.get_sheet_by_name('Sample') # Writing to sheet     sheet.cell(row=1, column=1).value = 'sample' book.save('Sample.xlsx') if __name__ == '__main__':     main()

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

python excelScript.py

همچنین می‌توانید به آن استایل نیز بدهید. کد زیر روش انجام این کار را به شما نشان می‌دهد:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import openpyxl def main():     book = openpyxl.Workbook()     book.create_sheet('Sample') # Acquire a sheet by its name     sheet = book.get_sheet_by_name('Sample') # Writing to sheet     sheet.cell(row=1, column=1).value = 'sample' # To set alignment of text inside cell and text wrapping     sheet.cell(row=1, column=1).alignment = openpyxl.styles.Alignment(horizontal='center', vertical='center', wrap_text=True) # To make font bold or italic     sheet.cell(row=1, column=1).font = openpyxl.styles.Font(bold=True, italic=True) book.save('Sample.xlsx') if __name__ == '__main__':     main()

بدین ترتیب عبارت sample در ردیف اول و ستون اول درج می‌شود. این سلول از جهات افقی و عمودی به صورت مرکرگزا همراستا شده است. برای کسب اطلاعات بیشتر در مورد متدهای ارائه شده از سوی پکیج openpyxl به مستندات آن (+) مراجعه کنید.

همچنین همانند کاری که با استفاده از xlwt انجام دادیم، می‌توانید با استفاده از openpyxl نیز سلول‌ها را در هم ادغام کنید. کد زیر روش ادغام سلول‌ها را با استفاده از openpyxl نشان می‌دهد:

1 2 3 4 5 6 7 8 9 10 11 12 13

import openpyxl def main():     book = openpyxl.Workbook()     book.create_sheet('Sample') # Acquire a sheet by its name     sheet = book.get_sheet_by_name('Sample') # Merging first 3 columns of 1st row     sheet.merge_cells('A1:C1') # Writing to sheet     sheet.cell(row=1, column=1).value = 'sample' book.save('Sample.xlsx') if __name__ == '__main__':     main()

کد فوق شیوه ادغام سلول‌ها را هنگامی نشان می‌دهد که نام سلول‌هایی که باید ادغام شوند را به طور کامل می‌دانید. مثلاً در کد فوق می‌دانستیم که نام سلول ستون اول و ردیف اول A1 و نام سلول ستون سوم و ردیف اول C1 است. در این حالت آن‌ها را مستقیماً با استفاده از متد merge_cells در پکیج openpyxl ادغام می‌کنیم. این یکی از دو متدی است که در openpyxl برای ادغام سلول‌ها استفاده می‌شود. متد دوم نیز به صورت زیر عمل می‌کند:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import openpyxl def main():     book = openpyxl.Workbook()     book.create_sheet('Sample') # Acquire a sheet by its name     sheet = book.get_sheet_by_name('Sample') # Merging first 3 columns of 1st 3 rows     r1 = 1     r2 = 3     c1 = 1     c2 = 3     sheet.merge_cells(start_row=r1, start_column=c1, end_row=r2, end_column=c2) # Writing to sheet     sheet.cell(row=1, column=1).value = 'sample' book.save('Sample.xlsx') if __name__ == '__main__':     main()

این متد زمانی به کار می‌آید که داده‌ها به صورت دینامیک در فایل اکسل نوشته شده باشند. اگر مطمئن نیستید که نام دقیق سلول‌هایی که قرار است ادغام شوند چه هستند، در این صورت می‌توانید از این متد استفاده کنید. این متد سه ستون اول از سه ردیف اول را در یک سلول منفرد ادغام می‌کند.

زمانی که سلول‌ها را ادغام می‌کنید، همواره به خاطر داشته باشید که باید مقدار را درون ستون اول سلول ادغام شده وارد کنید، چون در غیر این صورت مقدار مورد نظر از فایل اکسل حذف می‌شود. شما می‌توانید استایل سلول ادغام شده را به طرز مشابهی که قبلاً نشان دادیم اعمال کنید. اکنون نوبت به بررسی روش حذف برگه اضافی می‌رسد که به طور پیش‌فرض با فراخوانی متد ()Workbook کتابخانه openpyxl ایجاد شده است. روش انجام کار به صورت زیر است:

1 2 3 4 5 6 7 8 9

import openpyxl def main():     book = openpyxl.Workbook() book.create_sheet('Sample') extraSheet = book.get_sheet_by_name('Sheet')     book.remove_sheet(extraSheet) book.save('Sample.xlsx') if __name__ == '__main__':     main()

در این کد ما برگه‌ای با نام Sheet را با استفاده از متد ()get_sheet_by_name در یک شیء قرار می‌دهیم و سپس آن را در متغیر extraSheet ذخیره کرده و در نهایت برگه را با استفاده از فراخوانی متد ()remove_sheet روی متغیر extraSheet حذف می‌کنیم. بدین ترتیب با مراحل ایجاد یک فایل جدید xlxs.، نوشتن آن، ادغام سلول‌ها و استایل‌دهی آن آشنا شدیم. اکنون به بررسی روش خواندن و الحاق داده‌ها در فایل xlsx. با استفاده از پکیج openpyxl می‌پردازیم.

قبل از هر چیز روش خواندن فایل xlsx. را با استفاده از openpyxl بررسی می‌کنیم. همانند روش نوشتن می‌توان از ()openpyxl.load_workbook برای باز کردن یک ورک‌بوک موجود استفاده کرد:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import openpyxl def main():     book = openpyxl.load_workbook('Sample.xlsx')     print book.get_sheet_names()     # ['Sheet2', 'New Title', 'Sheet1'] # Get a sheet to read     sheet = book.get_sheet_by_name('Sheet1') # No of written Rows in sheet     r = sheet.max_row # No of written Columns in sheet     c = sheet.max_column # Reading each cell in excel     for i in xrange(1, r+1):         for j in xrange(1, c+1):             print sheet.cell(row=i, column=j).value if __name__ == '__main__':     main()

کد فوق همه سلول‌های نوشته شده در فایل اکسل را نمایش می‌دهد. حلقه for به جای 0 از 1 آغاز می‌شود چون openpyxl اندیس‌گذاری را از 1 آغاز می‌کند. همچنین می‌توان سلول‌ها را با استفاده از نام سلول‌ها نیز خواند:

1 2 3 4 5 6

# prints 1st row, 1st column directly print sheet['A1'] # get a range of cells cells = sheet['A1:C1'] for cell in cells[0]:     print cell.value

ما [cells[0 را انتخاب کردیم، زیرا [‘sheet[‘A1:C1 یک چندتایی از چندتایی‌ها ایجاد می‌کند و همه اشیای سلول در اندیس 0-ام چندتایی ذخیره شده‌اند، لذا [cells[0 را می‌خوانیم. در نهایت با روش الحاق داده‌ها به فایل xlsx. آشنا می‌شویم. کد زیر فرایند این کار را نشان می‌دهد:

1 2 3 4 5 6 7 8

import openpyxl def main():     book = openpyxl.load_workbook('Sample.xlsx')     sheet = book.get_sheet_by_name('Sample') sheet.cell(row=5, column=1).value = 'Appended Data' book.save('Sample.xlsx') if __name__ == '__main__':     main()

در واقع فرایند کار بسیار آسان است. کافی است فایل xlsx. موجود را درون یک شیء بارگذاری کنید و آن را با فراخوانی متد روی فایل Sample.xlsx در متغیر book ذخیره کنید. سپس برگه sample را با فراخوانی متد ()get_sheet_by_name روی شیء book به دست می‌آوریم.

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

به علاوه فراموش نکنید که در زمان کدنویسی از کدهای زیباتری استفاده کنید و استانداردهای PEP8 را رعایت کنید تا کد شما خواناتر باشد. پیش از عرضه کد خود از PyLint استفاده کنید. بدین ترتیب می‌توانید یک استاندارد کدنویسی در پروژه خود نگهداری کنید.

سخن پایانی

در این نوشته به معرفی روش‌های مختلف کار با فایل‌های صفحه گسترده در پایتون پرداختیم، اما کار به همین جا ختم نمی‌شود. این‌ها تنها مبانی مقدماتی روش خواندن، نوشتن و الحاق داده‌ها در فایل‌های xls. و xlsx. بودند. شما باید این پکیج‌ها را مورد بررسی بیشتر قرار دهید و بر اساس الزامات خود بسته به حالتی که داده‌ها را در فایل‌های اکسل نمایش می‌دهید، الگوریتم‌های خاص خود را بنویسید.

منبع: فرادرس