• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

31384 ۱۹ مهر ۹۱
1 2

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

ایجاد لیست های داده

یکی از امکانات جدید فراهم شده در HTML5 در رابطه با عناصر فرم امکان ایجاد لیست های داده است. لیست های داده بسیار شبیه comboboxها هستند با این تفاوت که، برخلاف combobox که امکان انتخاب یک گزینه از میان گزینه های از پیش تعریف شده را می دهد. در لیست های داده امکان وارد کردن گزینه مورد نظر کاربر که در میان گزینه های از پیش تعریف شده نیست وجود دارد. برای ایجاد یک datalist نیاز به یک کادر متنی و یک تگ <datalist> خواهیم ادشت. سپس کافی است نامی برای تگ <datalist> از طریق صفت id تعیین کرده و صفت جدید list را در تگ input مربوطه برابر آن قرار دهید. به کد زیر توجه کنید:

نتیجه در مرورگر فایرفاکس:

ایجاد کادرهای متنی چند خطی

تگ <textarea> : از این تگ برای ایجاد نواحی متنی چند خطی استفاده می شود و صفت های زیر را می پذیرد:

  • rows : عددی صحیح را به عنوان مقدار می پذیرد و به همان تعداد سطر به ناحیه متنی ارتفاع می دهد.
  • cols : عددی صحیح را به عنوان مقدار می پذیرد و به همان تعداد کاراکتر به ناحیه متنی عرض می دهد.
  • readonly : در جلسه قبل توضیح داده شده است.
  • disabled : در جلسه قبل توضیح داده شده است.

کد زیر را در نظر بگیرید :

نتیجه در مرورگر :

ایجاد انواع دکمه ها

تگ <button> : از این تگ برای ایجاد هر سه نوع دکمه ای که قبلا به آن اشاره شد می توان استفاده کرد. این تگ از صفت های زیر استفاده می کند.

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

  • submit : یک دکمه از نوع submit برا ارسال فرم ایجاد می کند.
  • reset : یک دکمه از نوع reset به منظور پاک کردن عناصر فرم ایجاد می کند.
  • button : یک دکمه از نوع ساده که رفتار پیش فرضی از خود ندارد ایجاد می کند.

در این نوع دکمه متنی که داخل تگ باز و بسته button قرار می گیرد عنوان دکمه خواهد بود.

1 2
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 9 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    miay tabadole link konim? 4e soale bikhodi kardam albate ghabol nemikoni webe to koja webe man koja.ama inam begam age webe iranfull mano filter nemikardan alan ham sathe webe to bodam…..hala age delet ye zamani sokht mano ba onvene I L♀VE Y♂U link kon va bego ba 4e onvani linket konam bye bye 😥

    • ‏‏
      سجاد دریس(۲۳ مهر ۱۳۹۱)

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

  • ‏‏
    محمد سلطان زاده(۱۴ آذر ۱۳۹۱)

    سلام
    خیلی ممنون

    لطفا طریقه ارسال داده ها و ثبت اون ها در صفحه ی دیگر رو هم آموزش بدین. ممنون

    • ‏‏
      سجاد دریس(۱۴ آذر ۱۳۹۱)

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

      • ‏‏
        محمد3724(۱۵ آذر ۱۳۹۱)

        ممنون.
        میخواستم ببینم به وسلیه ی html یا js این کار امکان پذیر نیست؟

        • ‏‏
          سجاد دریس(۱۵ آذر ۱۳۹۱)

          خیر ذخیره و ارسال داده های فرم فقط با استفاده از php انجام میشه

  • ‏‏

    سلام….
    آموزشهای html رو تقریبا تموم کردم………
    خیلی خیلی ازتون ممنونم …. عالی بود …. من هر دفعه دنبال یادگیری html , css میرفتم همون وسطای کار ، به خاطر گنگ بودن و منظم نبودن آموزشا دلزده میشدم و ادامه نمیدادم ، اما آموزشهای شما رو با علاقه تا اینجا خوندم و خوب هم فهمیدم و الان هم با علاقه بقیشو دنبال میکنم….خدا خیرتون بده واقعا…

    یه سوال هم برام پیش اومده ، توی آموزشها شما هر جا که لازم شده تغییرات html5 رو هم گفتین………
    یعنی کسی که به این آموزشهاتون مسلط بشه میشه گفت به html5 هم مسلطه ؟؟
    یعنی html5 نکته دیگه ای نداره؟؟ همش همینا بود؟

    • ‏‏
      کیوان علی محمدی(۲۳ تیر ۱۳۹۲)

      سلام این آموزش ها در واقع Essential (ضروریات) هستن،یعنی شما تا حد خیلی زیادی این مبحث رو یاد می گیرید.
      اما HTML5 مباحث پیشرفته دیگه ای همانند localStorage و 2D/3D Graphics , Local SQL Database ,Web Applications رو هم داره
      که انشاالله بتونیم در همین سایت هم این مباحث پیشرفته رو آموزش بدیم.

  • ‏‏

    سلام…
    خیلی خیلی ازتون متشکرم، آخه خیلی خوشحالم که تا اینجای کار با html رو جلو رفتم و پیشرفت خوبی داشتم

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram