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

دسته بندی: آموزش
زمان مطالعه: 7 دقیقه
۱۸ مهر ۱۳۹۱
یاداوری :

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

text برای جعبه متن یک خطی، password برای جعبه متن رمزی، radio برای ایجاد دکمه‌های رادیویی، checkbox برای ایجاد چک باکس ها، submit برای ارسال فرم به صفحه پردازشگر، reset برای پاک کردن محتویات فیلدهای فرم، file برای آپلود یک فایل، image برای دکمه submit تصویری، email برای جعبه متن ایمیلی، url برای جعبه متن آدرس اینترنتی، number و range برای فیلدهای حاوی اعداد، color برای فیلدهای امکان انتخاب رنگ، date برای فیلدهای امکان انتخاب تاریخ و مقدار search برای ایجاد فیلدهای جستجو استفاده می‌کنیم.

حال در این جلسه با بقیه ی صفات تگ input آشنا خواهیم شد.

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 فقط یک آیتم می‌تواند این صفت را اختیار کند ولی در listbox چندین آیتم می‌تواند این صفت را داشته باشند.

مثال زیر نحوه ایجاد یک 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 آشنا خواهیم شد.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

amin

لطفا قبل از اینکه مشکلی پیش بیاد غلط املایی کلمه سرچ که به اشتباه س.ک.س نوشته شده رو اصلاح کنید

امیر

اقا بخدا خعلی گلـــی!

tanxcotx

عالی عالی عالی…

iamonline

سلام
ممنون از آموزش های خوبتون
فرق بین صفت های name و id رو می شه توضیح بدین؟

لقمان آوند

تو این صفحه به خوبی توضیح داده شده :
http://stackoverflow.com/questions/4487860/name-vs-id-attribute-in-html

iamonline

ممنون از لینکتون
یه مسأله فقط در مورد name بگم که تو مطالب آموزشی تو قسمت ۹ آموزش html تو بخش دوم در موردش نوشته شده که برای نام گذاری عناصر استفاده می شود و می بایست در کل صفحه یکتا باشد
ولی این طور که من فهمیدم ظاهرا درست نیست

لقمان آوند

سلام
از لحاظ منطقی نام هم باید یکتا باشه ولی لزومی نیست (مثلا فرض کن تو یه خانواده دو تا “علی” داشته باشیم !) . ولی id در کل صفحه باید یکتا باشه (مثلا شماره ملی افراد) .

iamonline

مرسی

حسین

مرسی

عباس بهرامی کیا

مرسی از مطلب بسیار مفیدت.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.