آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه سوم)

size: از این صفت هنگامی استفاده می‌شود که صفت type برابر با یکی از مقادیر password , text یا fiel باشد استفاده می‌شود و به وسیله آن عرض این نوع عناص را می‌توان کنترل کرد، این صفت مقداری عددی را می‌پذیرد و به اندازه همان تعداد کاراکتر به این نوع عناصر عرض می‌دهد. به عنوان مثال اگر برای این صفت 50 را در نظر بگیریم عنصر مورد نظر به اندازه 50 کاراکتر عرض خواهد داشت.

<input type="text" size="10">

maxlength: این مقدار هم عددی صحیح را می‌پذیرد و حداکثر تعداد کاراکتری را که کاربر می‌تواند در عناصری از نوع  password , text یا file وارد کند را مشخص می‌کند.

checked: هنگامی استفاده می‌شود که صفت type برابر checkbox یا radio باشد. این صفت بولین موجب می‌شود. که عناصر از این نوع به صورت پیشفرض به حالت انتخاب شده درآیند.

<input type="checkbox" value="Bake" /> I have a Bake
<br />
<input type="checkbox" value="Car" checked="checked" /> I have a Car

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

accept : از این صفت هنگامی استفاده می‌شود که صفت type برابر file باشد استفاده می‌شود. و میتوان نوع فایلهایی که کابر از کامپیوتر خود برای آپلود انتخاب کند را مشخص می‌کند. این صفت لیستی از MimeType  فایل‌های مورد نظر را به عنوان مقدار می‌پذیرد و به عنوان مثال در صورتی که بخواهیم کاربر فقط بتواند فایل هایی از نوع gif یا jpg را انتخاب کند کد آن به صورت زیر است:

<input type="file" accept="image/gif,image/jpeg" />

برای آشنایی با همه ی Mime typeهای موجود می‌توانید فایل زیر را دانلود کنید

readonly: از این صفت برای فقط خواندنی کردن عناصر فرم استفاده می‌شود. این صفت که جزء صفت‌های boolean است در صورتی که برای عناصر فرم استفاده شود، کاربر امکان تغییر محتویات آن عنصر را نخواهد داشت.

disabled : این صفت بولین عناصر را به حالت غیر فعال در می‌آورد.

صفات readonly و disabled تفاوت‌ها و شباهت هایی دارند که در تصویر زیر توضیح داده شده است:

صفت‌های جدید برای تگ input

همانند مقادیر جدیدی که برای صفت type در تگ input در HTML5 ارائه شده است در این نسخه صفت‌های جدیدی نیز برای این تگ در نظر گرفته شده است که در ادامه با آنها آشنا خواهیم شد:

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

First name: <input type="text" name="fname" autofocus="autofocus" />
<br />
Last name: <input type="text" name="lname" />
<br />
<input type="submit" />

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

<input type="search" name="user_search" placeholder="Search in Google" />
<input type="submit" />

required : از این صفت بولین برای آن دسته از عناصری که نمی‌توان آن‌ها را خالی رها کرد و در واقع وارد کردن آن الزامی است لستفاده می‌شود. از این صفت می‌توان در تگ‌های textarea و اغلب تگ‌های input استفاده کرد. مرورگر هایی که از این صفت پشتیبانی می‌کنند. در صورت خالی رها کردن فیلدهایی که این صفت را اختیار کرده اند پیغام خطا نمایش می‌دهند.

<form>
<input type="text" name="user_name" required="required" />
<input type="submit" />
</form>

ایجاد combobox و listboxها

از جمله مهمترین و البته پرکاربردترین عناصر فرم، comboboxها و listboxها هستند. این عناصر با استفاده از ترکیب تگ‌های select و option ایجاد می‌شوند. همچنین از تگ optgroup در داخل تگ select برای گروه بندی آیتم‌های عناصر فوقالذکر استفاده می‌شود.

تگ <select> : برای ایجاد عناصر combobox یا listbox استفاده میشود. این تگ از صفت‌های زیر استفاده  میکند.

• name : نامی برای عنصر انتخاب می‌کند.
• size :یزای ایجاد listboxها استفاده میشود. و عددی صحیح زرا میپذیرد و تعداد آیتم‌های نمایشی در listbox را مشخص مسی کند.
• multiple : این صفت بولین امکان انتخاب چندین گزینه در یک listbox را برای کاربر فراهم می‌کند. برای اینکار کاربر باید دکمه CTRL صفحه کلید را نگه دارد.

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

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

مثال زیر نحوه ایجاد یک comboboxرا نشان می‌دهد.

<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

حال اگر به دستورات فوق صفت multiple را نیز اضافه کنیم یک listbox ایجاد خواهد شد:

<select name="cars" id="cars" multiple="multiple">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

تگ <optgroup> : از این تگ برای گروه بندی optionهای listbox یا combobox استفاده می‌شود. برای اینکار می‌بایست optionهای موردنظر را داخل تگ باز و بسته optgroup قرار دهیم. صفت‌های این تگ به شرح زیر است:

label : عنوان هر گروه را مشخص می‌کند.

کد زیر نحوه گروه بندی عناصر یک combobox را با استفاده از این تگ نمایش می‌دهد.

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

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

نویسنده

طاها دریس