HTMLطراحی سایتگوناگون

۱۴-فرم های ورود اطلاعات در HTML

فرم های HTML و گروهی از عناصر درون آن به دریافت و ارسال اطلاعات به سمت سرور کمک خواهند کرد.

 

 

فرم های HTML

 

از فرم های HTML برای ارسال اطاعات به سرور استفاده می شود.

یک فرم می تواند شامل عناصر ورودی(Input) مانند فیلد های متنی، چک باکس ها، رادیو باتن ها، دکمه های ارسال، لیست های انتخاب و … باشد.

از تگ <form> برای ایجاد یک فرم HTML استفاده می شود:

 

 

 

فرم های HTML وعناصر ورودی

 

یکی از مهمترین عناصر فرم، عنصر input است.

در این عنصر خصوصیتی به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد و می توان آن را با یکی از مقادیر زیر تنظیم کرد:

text , checkbox , radio , password , hidden , submit , reset , button , file , image

در ادامه به شرح بعضی از typeهای پرکاربرد بالا خواهیم پرداخت:

 


 

فیلد input ازنوع text

 

اگر می خواهید که بازدیدکننده، اطلاعاتی از قبیل متن، اعداد و … را وارد کند، خصوصیت type را با مقدار “text” تنظیم کنید:

 

  • کد HTML بالا به صورت زیر در مرورگر نمایش داده میشود:

 

 

 

 

 

توجه: تگ فرم در مرورگر قابل رویت نیست. همچنین توجه داشته باشید که یک فیلد متنی به صورت پیش فرض به اندازه ۲۰ کاراکتر عرض دارد.

نحوه نمایش عناصر ورودی در مروگر نمایش داده نمی شود.

 


 

 

فیلد input از نوع password

 

اگر می خواهید که بازدیدکننده، کلمه عبور را وارد کند، خصوصیت type را با مقدار “password” تنظیم کنید:

 

  • کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

 

 

 

 

توجه: کاراکترها در فیلد پسورد به صورت ماسک شده نمایش داده می شوند.(ستاره ای یا دایره ای)

 


 

 

فیلد input از نوع radio

 

اگر می خواهید که بازدیدکننده، فقط یک گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار “radio” تنظیم کنید:

 

  • کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

 

 

 

 


 

 

فیلد input ازنوع checkbox

 

اگر میخواهید که بازدیدکننده، یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار “checkbox” تنظیم کنید:

 

  • کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

 

 

 

 

 


 

 

فیلد input از نوع submit

 

 

در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال یا Submit استفاده می شود و با کلیک کاربر روی این دکمه، اطلاعات درون فرم به فایلی دیگر ارسال خواهند شد.

برای تعیین مقصد ارسال اطلاعات باید درون تگ form از شناسه ای به نام action استفاده کنید. مقدار شناسه action آدرس یا url فایلی است که به دریافت و سپس پردازش اطلاعات دریافتی خواهد پرداخت.

معمولا فایلهای بخش action برنامه ها و اسکریپت های نوشته شده با زبانهای cgi مانند ASP.NET ، Perl ، PHP و … بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها می باشد:

 

  • کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

 

 

 

 

 

اگر در فیلد متنی بالا کاراکترهایی را تایپ کنید و روی دکمه “submit” کلیک کنید، مرورگر، ورودی شما را به صفحه ای به نام “html_form_action.php” ارسال خواهد کرد.

 

 


مثال های بیشتر :

 

۱-چگونه یک radio button ایجاد کنیم.

 

۲-چگونه یک checkbox ایجاد کنیم. کاربر می تواند در انتخاب مختار باشد.

 

۳-چگونه یک checkbox ایجاد کنیم. کاربر می تواند در انتخاب مختار باشد. 

 

۴-چگونه یک لیست کشویی با مقدار انتخاب شده از قبل ایجاد کنیم.

 

۵-چگونه یک کنترل ورودی متن چند خطه ایجاد کنیم. در یک text-area کاربر می تواند تعداد نامحدودی کاراکتر تایپ کند.

 

۶-چگونه یک دکمه برای کلیک کردن ایجاد کنیم.

 

۷-چگونه یک فرم با دو فیلد متنی و یک دکمه submit ایجاد کنیم.

 

۸-چگونه یک لبه یا border، اطراف عناصر داخل یک فرم ایجاد کنیم.

 

۹-چگونه یک فرم با دو checkbox و یک دکمه submit ایجاد کنیم.

 

۹-چگونه یک فرم با دو radio button و یک دکمه submit ایجاد کنیم.

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

همچنین ببینید

بستن
بستن