سعید شعبانی

کار کردن با فرم ها

10 پست در این موضوع قرار دارد

سلام

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

1- چجوری یک متن را می توان در یک فرم قرار داد "مانند فرم جستجوی همین انجمن" تا زمانی که متنی را در فرم نوشته نشده است کلمه جستجو پیدا باشد و بعد از پاک کردن متن نیز دوباره کلمه پیدا شود.

2- چگونه دکمه جلوی فرم را به داخل فرم بیاوریم؟

3- برای فرم هایی که قبلا متن هایی را در آن وارد کرده ایم چگونه استایل مشخصی قرار دهیم؟

به اشتراک گذاری این پست


لینک به پست

1- بکمک جاوااسکریپت میشه. در html5 هم این خاصیت پیش فرض وجود داره.

<input type="text" name="s" id="search-input" value="جستجو کنید..." onclick="this.value = ''" onblur="this.value = 'جستجو کنید...'"/>

2- با استایل و margin منفی دادن اینکار انجام میشه.

3- متوجه نشدم! بیشتر توضیح بدید

به اشتراک گذاری این پست


لینک به پست

1- بکمک جاوااسکریپت میشه. در html5 هم این خاصیت پیش فرض وجود داره.

<input type="text" name="s" id="search-input" value="جستجو کنید..." onclick="this.value = ''" onblur="this.value = 'جستجو کنید...'"/>

من از این کد در بخش نظرات پستها استفاده کردم ولی مشکلی که وجود داره این هست که زمانی که در فرم ها متنی رو می نویسم بعد از خروج از فرم متن دوباره به متن پیش فرض تغییر پیدا می کند.

نمونه : http://dnoj.ir/post/%D8%A8%D8%A7-%DA%A9%DB%8C%D9%88%D8%A8%D9%84%D8%AA-%D9%87%D8%A7-%D8%B1%D8%A8%D8%A7%D8%AA-%D8%AE%D9%88%D8%AF%D8%AA%D8%A7%D9%86-%D8%B1%D8%A7-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D8%AF.html

3- متوجه نشدم! بیشتر توضیح بدید

مانند این تصویر post-412-0-93845700-1357037915_thumb.png

ویرایش شده در توسط سعید شعبانی

به اشتراک گذاری این پست


لینک به پست

بنظر از مرورگر هست من مشکلی ندیدم!

به اشتراک گذاری این پست


لینک به پست
بنظر از مرورگر هست من مشکلی ندیدم!

من با ie هم چک کردم مشکل داره منظور من بخش نظرات هست نه جستجو !

به اشتراک گذاری این پست


لینک به پست

به اینصورت تست کنید:

<input type="text" name="s" id="search-input" value="جستجو کنید..." onclick="this.value = ''"/>

به اشتراک گذاری این پست


لینک به پست

درست شد. فقط در بخش متن نظرات هم من از همین کد استفاده کردم ولی برای اون تا زمانی که کلیک در فرم نکنم نوشته پیشفرض نشون داده نمیشه و البته بعصی از مواقع هم نوشته ای که می نویسم پاک میشه!

این هم کدش


<textarea name="comment" value="نظر شما چیست" onclick="this.value = ''" class="textarea" rows="10" cols="50" tabindex="4"></textarea>

بروز شده :


placeholder="your text"

آقا مرتضی این کد رو همین الان از سایت css-tricks.com پیدا کردم. با این کد دیگه لازم به استفاده از کد های بالا نیست.

ویرایش شده در توسط سعید شعبانی

به اشتراک گذاری این پست


لینک به پست

این کد پیش فرض برای html5 هست و در مرورگرهایی که html5 ساپورت نیستن کلا کار نمیکنه.

به اشتراک گذاری این پست


لینک به پست

این کد پیش فرض برای html5 هست و در مرورگرهایی که html5 ساپورت نیستن کلا کار نمیکنه.

کدوم ورژن مرورگر ها از html5 پشتیبانی می کند؟

به اشتراک گذاری این پست


لینک به پست

بجز نسخه های 10 به پایین ie بقیه همه پشتیبانی میکنن

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط webdesign
      فرم های کوتاه
      سعی کنید اطلاعاتی را از کاربر بخواهید که واقعاً مورد نیاز است و از قرار دادن فیلدهای اضافی در فرم ها خودداری نمایید. معمولاً کاربران تمایلی به پر کردن فرم هایی که اطلاعات خیلی شخصی میخواهند، ندارند. چنانچه نیاز به اطلاعات بیشتری راجع به کاربر دارید بعد از ثبت فرم میتوانید از طریق ایمیل آن اطلاعات را درخواست کنید. پس از دریافت اطلاعات اضافه و غیر ضروری خودداری کنید و سعی کنید فیلدهای مشابه در فرم قرار ندهید برای مثال چند فیلد شماره تلفن
      در نهایت
       بعد از پر کردن فرم و ثبت آن توسط کاربر از کاربر تشکر کرده و فیدبک بدهید. ایجاد یک فرم استاندارد و کاربرپسند شانس شما را برای جمع آوری اطلاعات و تبدیل یک بازدید کننده به کاربر دائمی وب سایت را افزایش میدهد.
       
      استفاده از فرم های عمودی
      فرم های عمودی نسبت به فرم های افقی و چند ستونه، کاربرپسندتر هستند به خصوص در فرم های طولانی. بهترین حالت این است که تمامی فیلدها در یک صفحه از بالا تا پایین قرار بگیرند بدون اینکه کاربر نیاز به اسکرول کردن برای دیدن ادامه فرم داشته باشد.
       فرم های افقی تنها در صورتی که فرم خیلی کوتاه باشد مثلا فقط نیاز به وارد کردن ایمیل و رمز عبور باشد میتوانند به کار برده شوند. در غیر این صورت کلا بهتر است فرم را به صورت عمودی طراحی نمایید.
       همچنین فیلدهای فرم باید یک ترتیب منطقی داشته باشند مثلاً بعد از نام همیشه نام خانوادگی را قرار میدهیم و بعد فیلدهای دیگر. برای مثال ترتیب نام، ایمیل، نام خانوادگی یک ترتیب غیرمنطقی میباشد.
      سهولت در خواندن و اسکن کردن فرم
      همانطور که میدانید کاربران در وب سایت ها معمولاً مطالب را اسکن میکنند یعنی نگاه اجمالی به همه مطالب می اندازند تا مطلب مورد نظر خود را پیدا کنند یا تصمیم بگیرند که چه عملیاتی را در سایت انجام خواهند داد. همین مسئله برای فرم ها هم صدق میکند. کاربر با دیدن فرم باید به سرعت متوجه شود که آن فرم چه کاربردی دارد و چه اطلاعاتی میخواهد.
      ویژگی های مورد نیاز برای اینگونه فرم ها عبارتند از:
      • تضاد یا کنتراست: متن ها فرم باید کوتاه و به راحتی قابل خواندن باشند. هرگز از رنگ های مختلف در فرم استفاده نکنید و سعی کنید همان حالت استاندارد و رایج نوشته تیره بر روی زمینه روشن را به کار ببرید.
      • گروه بندی و فاصله گذاری: اطلاعات مشابه را در فرم های طولانی گروه بندی کنید. برای مثال در زمان جمع آوری اطلاعات پرداخت: اطلاعات مربوط به حمل و نقل، آدرس،  کد پستی و ... در یک گروه قرار دهید. فاصله بین برچسب ها و فیلدهای مربوط به آن ها را با دقت قرار دهید تا کاربر به راحتی متوجه شود که کدام برچسب و عنوان متعلق به کدام فیلد میباشد.
      • پایان مشخص: دکمه ثبت یا پایان را به طور مشخص و بزرگ قرار دهید. متن داخل دکمه باید دقیقاً به کاربر بگوید که با فشار دادن آن چه اتفاقی خواهد افتاد مانند کلمه  های ثبت، پرداخت یا مرحله بعد. در صورت انجام عملیات ثبت، حتماً کاربر را از تمام شدن عملیات و ثبت شدن کامل فرم مطلع نمایید.
      قرار دادن برچسب های شناور

        همیشه در مورد اینکه آیا باید از متن های راهنما و کمکی در فیلدهای یک فرم استفاده کرد یا نه بحث های زیادی بوده است. مشکل اصلی استفاده از این متن ها زمانی است که با کلیک کردن بر روی فیلد مورد نظر، متن راهنما همچنان درون فیلد باقی میماند و کاربر برای وارد کردن اطلاعات مجبور به پاک کردن آن میشود.
       اگر نیاز به استفاده از متن و برچسب های راهنما دارید سعی کنید آن ها را به صورت تعاملی و واکنش گرا قرار دهید یعنی با کلیک کردن کاربر برچسب جا بجا شده و به سمت بالا برود. به اینگونه برچسب ها برچسب شناور میگویند. همچنین این حالت حرکت برچسب باعث جلب توجه کاربر و جذابیت هم میشود.
      فرمت گذاری یا ماسک فیلد
      گذاشتن فرمت یا ماسک برای فیلد به این معنی است که در زمان تایپ و وارد کردن اطلاعات توسط کاربر در یک فیلد، آن فیلد به طور خودکار به اطلاعات ورودی کاربر یک فرمت خاص میدهد. برای مثال جدا کردن روز و ماه و سال یا جدا کردن کد منطقه در شماره تلفن و ... به طور خودکار. این کار از بروز خطاهای احتمالی در زمان تایپ جلوگیری کرده و ورود اطلاعات را برای کاربر آسان تر می نماید.
      به مثال زیر توجه نمایید، یک شماره تلفن در فرمت های مختلف:
      • (000) 000-0000
      • 000-000-0000
      •  0000000000
      کاربر میتواند شماره تلفن را به هر 3 مدل بالا وارد کند، چطور باید تشخیص دهد که فرمت درست و مدنظر شما کدام است؟ اینجاست که ماسک فیلد یا همان فرمت گذاری به کمکتان می آید. با استفاده از این ویژگی خود فیلد به طور خودکار کاربر را راهنمایی میکند و کاربر بدون فکر کردن تنها نیاز دارد که شماره را وارد کند. (این کار همچنین باعث راحتی کاربران موبایل میشود چون دیگر نیازی به سوئیچ کردن بین اعداد و نوشته در کیبورد ندارند).
      ایجاد فرم های سازگار با کیبورد
      از آنجایی که نمی دانید کاربر با استفاده از چه دستگاهی اقدام به پر کردن فرم می نماید باید طراحی فرم به گونه ای باشد که چه در موبایل و چه در کامپیوترهای خانگی به راحتی قابل پر کردن باشد. پس با در نظر گرفتن کیبوردهای موجود در دستگاه های مختلف، فیلد های فرم را متناسب با آن ها طراحی نمایید.
      در دسکتاپ، کاربر باید بتواند بدون نیاز به کلیک کردن بر روی هر فیلد، فیلد ها را به ترتیب پر کرده و به طور اتوماتیک با پر کردن فیلد یا فشار دادن دکمه های tabb یا enter ، جلو برود. سایت w3.org مجموعه کاملی از کیبوردها را ارائه کرده است.
      در موبایل، نوع کیبورد را با نوع داده ای که مورد نیاز است هماهنگ تنظیم نمایید. اگر داده ورودی از نوع حروف میباشد، از کیبورد آلفا و برای اعداد از کیبورد  numeric استفاده کنید.
      حالت تشخیص اتوماتیک
      سعی کنید فیلدها را طوری طراحی کنید که در صورت برخورد با کاراکترهای خاص و کلمات مشخص، به کاربر پیشنهاداتی را برای پر کردن فیلد ارائه کنند. درست مانند سیستم جستجوی گوگل که به محض تایپ کردن یک کلمه تعداد زیادی پیشنهاد به کاربر ارائه میکند. مثلاً در فیلد ایمیل به محض تایپ شدن عبارت web@g... ، گزینه web@gmail.com به کاربر ارائه شود.
      مزایای این کار:
      • پر کردن فرم برای کاربر راحتتر میشود به خصوص در موبایل
       • از اشتباهات تایپی کاربر جلوگیری میشود.
      منبع : 7 نکته کاربردی در طراحی فرم های استاندارد
    • توسط iHooMan
      درود و وقت بخیر 
       
      من  توی پروژه ای لازم دارم از فرم وب سایت مبدا وارد یه وب سایت دیگه بشم .
      که دو حالت داره یکی یوزر معمولی - یکی همکار 
      واسه یوزر معمولی فقط کپچا میخواد سایت مقصد  واسه همکار یوزر و پسورد و کپچا 
      من میخوام با یه فرم تو وب سایت خودمون اطلاعات بگیرم پاس بدم توی اون وبسایت نمیخوام اون اطلاعات تو وبسایت مقصد پر بشه ( لوگین توی وب سایت ما انجام بشه بعد به صفحه لوگین شده اونور پاس بده )
      از چی استفاده کنم ajax یا ... ? 
      روند کاریش تو وردپرس کسی میتونه توضیح بده ؟
      پینوشت : وب سایت مقصد از md5.js واسه اینکرپشن دیتا استفاده میکنه . 
       
      سپاس
       
    • توسط newharf
      سلام چطور میتونم همچین فرمی برای دیدگاه های مطالب بسازم
      http://uupload.ir/files/ajsr_untitled-233.jpg
    • توسط Mohammad B2F
      سلام
      تو این مدت که سایت داشتم و کار کردم اصلا سمت فروم برای سایتم نرفتم...
      الان تصمیم گرفتم فروم برای ساتم راه اندازی کنم !
      ولی هیچ اطلاعات و دانشی ازش ندارم...
      یکم سرچ کردم ، اما فهمیدم چندین و چند سیستم مدیریت فروم هست ...
      اما از اونجایی که تجربه ندارم و هیچ شناختی ندارم نیاز به راهنماییتون دارم.
      کدوم سیستم مدیریت فروم رو نصب کنم بهتره ؟
      فکر کنم مهمترین چیزی که نیاز دارم سئوست ...
      بعد از اون هم راحت بودن بخش مدیریت.
      + بعضی از این فروم ها نیاز به لایسنس دارند ! لطفا بفرمایید لایسنیس معتبر از کجا خریداری کنم ؟
    • توسط mrneo8
      با سلام
      می خواستم یه سایت راه بیاندازم که مطالب درسی رو برای رشته های مختلف با دسته بندی داخلش بگذاریم
      مثلا :
      ریاضی
      هنر
      فلسفه
      برا همین هم می خواهم یک فرم ثبت نام درست کنم تا هر فرد ی توش ثبت نام کنه و رشته مورد علاقه اش رو انتخاب کنه
      بعد یه وجهی برا ثبت نام واریز کنه . پس از واریز وجه، فقط مطالب مربوطه اش رو ببینه مثلا مطالب هنر رو.
      مراحل:
      -فرم ثبت نام با قابلیت دسته بندی
      -درگاه واریز وجه متصل به فرم
      -مشاهده مطالب دسته مخصوص به خود
      *عزیزان لطفا راهنمایی کنید چه کنم (صرفا نگید افزونه گرویتی یا اشتراک ویژه)
      *اگر هم انجام می دهید هزینه رو توی خصوصی اعلام کنید