مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
آموزش تگ form در html و عناصر مربوط به آن به همراه مثال
اگر بخواهید اطلاعاتی از بازدید کنندگان سایت خود را جمع آوری کنید ،نیاز به ایجاد یک فرم (form) پیدا خواهید کرد.منظور از اطلاعات بازدید کنندگان چیست؟
مثلا هنگامی که یک کاربر قصد ثبت نام در سایت شما را دارد، اطلاعاتی مانند نام، آدرس ایمیل و شماره کارت اعتباری و غیره را وارد میکند و شما می بایست آنها را ثبت کنید.این اطلاعات داخل فرم ها ثبت و نگهداری میکند.
یک فرم در html ، داده ها را از بازدید کننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی عملیات مورد نیاز را ، بر اساس دستور العمل تعریف شده در برنامه، روی داده ی مورد نظر انجام می دهد.
تگ های متفاوتی برای ایجاد form در html در دسترس می باشند، مانند فیلد های متن، فیلدهای textarea، منوهای رو به پایین، دکمه های رادیو، چک باکس ها و غیره.
تگ <form> مربوط به HTML ، برای ایجاد یک فرم HTML استفاده می شود و دارای سینتکس زیر می باشد :
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
مشخصه های فرم های html :
علاوه بر ویژگی های متداول، در زیر لیستی از متداول ترین ویژگی های مربوط به فرم را مشاهده می کنید :
- Action: مسیر اسکریپت backend برای پردازش داده ی انتقال شده .
- Method: متداول ترین روش برای بارگزاری داده می باشد . (متداول ترین GET و POST )
- Target: پنجره ی هدف یا فریم ، جایی که نتیجه ی اسکریپت نمایش داده میشود را مشخص میکند. این مشخصه میتواند مقادیر self ، blankو ... را بگیرد .
- Enctype: شما می توانید از ویژگی enctype برای مشخص کردن چگونگی برنامه نویسی توسط مرورگر قبل از ارسال به سرور، استفاده کنید. مقادیر ممکن عبارتند از: application/x-www-form-urlencoded - این روش استانداردی است که بیشتر فرم ها در سناریو های ساده استفاده می کنند. mutlipart/form-data - این روش زمانی استفاده می شود که شما می خواهید داده های چندگانه را به شکل فایل هایی مانند تصویر بارگذاری کنید.
کنترل های فرم html :
انواع مختلفی از کنترل های فرم وجود دارند که می توانید برای جمع آوری داده با استفاده از فرم از آنها استفاده کنید.
- کنترل های ورودی متن
- کنترل های چک باکس
- کنترل های رادیو باکس
- کنترل های انتخاب باکس
- باکس های انتخاب فایل
- کنترل های مخفی
- دکمه های قابل کلیک شدن
- ثبت و تنظیم مجدد
کنترل های ورودی متن (text input) :
سه نوع ورودی متن وجود دارد که در فرم ها استفاده می شوند :
- کنترل های ورودی متن تک خطی(Single-line text input controls) : این کنترل برای آیتم هایی استفاده می شود که کاربر فقط یک خط ورودی را وارد می کند ، مانند باکس های جستجو و نام ها. این کنترل ها با استفاده از تگ < input> مربوط به HTML ایجاد می شود.
- کنترل ورودی گذر واژه ( Password input controls) : این نیز یک متن ورودی تک خطی می باشد، اما به محض اینکه کاربر کاراکتر را وارد می کند، این کنترل آن را می پوشاند.
- کنترل های متن ورودی چند خطی(Multi-line text input controls) : زمانی استفاده می شود که لازم است کاربر جزئیاتی را وارد کند که بیشتر از یک خط می باشند. کنترل های ورودی چند خطی با استفاده از تگ <textarea> به کار گرفته می شوند .
کنترل های ورودی تک خطی (Single-line text input controls) فرم ها :
همانطور که در پاراگراف بالا گفته شد ، این کنترل ها در مواردی استفاده می شوند که کاربر فقط یک خط ورودی را وارد کند ، مانند باکس های جستجو و نام ها و با استفاده از تگ <input> مربوط به HTML ایجاد می شوند.
مثال زیر یک مثال اساسی از یک ورودی متنی تک خطی (Single-line text input controls) است که برای نام و نام خانوادگی به کار گرفته شده است:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
:نتیجه خروجی به شکل زیر خواهد بود
First name: Last name:
مشخصه های تگ <input> :
در زیر لیستی از ویژگی های برچسب <input> را برای ایجاد فیلد متن می بینید :
کنترل های Password input :
همانطور که در پاراگراف های قبل گفته شد این کنترل نیز یک کنترل تک خطی می باشد، اما به محض اینکه کاربر کاراکترها را وارد می کند، آنها را می پوشاند. این ها نیز با استفاده از تگ <input> مربوط به HTML ایجاد می شوند، اما نوع مشخصه با عنوان password تنظیم می شود.
نمونه ای از Password input را در مثال زیر بررسی میکنیم :
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
خروجی زیر را خواهید دید :
User ID :
Password:
در لیست زیر مشخصه های تگ <input> را برای ایجاد فیلد پسورد می بینید :
کنترل های ورودی چند خطی (Multi-line text input controls) :
زمانی استفاده می شود که یک کاربر باید جزئیاتی را وارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از تگ <textarea> ایجاد می شوند.
مشخصه های این کنترل (Multi-line text input controls) :
چک باکس :
چک باکس ها زمانی استفاده می شوند که قرار است بیشتر از یک گزینه انتخاب شود. این نیز با استفاده از تگ <input> ایجاد می شوند، اما نوع ویژگی به checkbox تنظیم می شود.
نمونه کد به صورت زیر خواهد بود :
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>
خروجی :
Maths Physics
در چک باکس امکان انتخاب همزمان بیش از یک گزینه وجود دارد.
مشخصه های چک باکس :
کنترل دکمه ی رادیو:
دکمه های رادیو زمانی استفاده می شوند که بین چندین گزینه تنها یک گزینه باید انتخاب شود( با توجه به پاراگراف قبل کارکرد دکمه های رادیو برعکس چک باکس است) . این کنترل ها نیز با تگ < input> ایجاد می شوند، اما نوع مشخصه با radio تنظیم می شود.
قطعه کد زیر را ببینید :
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>
خروجی :
Maths Physics
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب میشود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
3
,
تعداد قسمت ها:
25
,
سطح:
صفر تا صد
این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
