نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

در این جلسه در طراحی سایت با ادامه کار با فرم ها در HTML پیش می رویم:

يادآوري :

در جلسه قبل با مقادیر مختلف صفت 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" />

readonly:

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

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" />

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند