مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
آموزش کامل کار با Form فرم ها در HTML
زمانی فرم های HTML به کار می آیند، که شما می خواهید برخی از داده ها را از بازدید کننده سایت جمع آوری کنید. برای مثال، در هنگام ثبت نام کاربر می خواهید اطلاعاتی مانند نام، آدرس ایمیل، کارت اعتباری و غیره را جمع آوری کنید.
یک فرم، داده ها را از بازدیدکننده سایت، دریافت می کند و سپس آن را به یک برنامه ی پشت صحنه (back-end)، مانند CGI، اسکریپت ASP یا اسکریپت PHP و غیره ارسال می نماید. برنامه ی پشت صحنه (back-end)، پردازش مورد نیاز را روی داده های انتقال داده شده، انجام خواهد داد. این پردازش، بر اساس منطقِ کارِ تعریف شده در داخل برنامه، انجام خواهد شد.
عناصر مختلفی برای فرم در دسترس هستند، مانند text fields، textarea fields، منوهای کشویی (drop-down menus)، دکمه های رادیویی (radio buttons)، checkboxes و غیره
برچسب <form> برای ایجاد یک فرم در HTML استفاده می شود و دارای syntax زیر است -
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
ویژگی های form
به غیر از ویژگی های متداول و معمول، در زیر لیستی از ویژگی های بیشتری از فرم را مشاهده می کنید -
|
شماره ردیف |
ویژگی |
توضیحات |
|
1 |
action |
مشخص می کند که داده های انتقال داده شده از طریق فرم، به کجا ارسال شوند. |
|
2 |
method |
مشخص می کند که از کدام متد HTTP (GET یا POST) برای ارسال داده ها استفاده شود. |
|
3 |
target |
پنجره یا frame ی که قرار است نتیجه اسکریپت در آن نمایش داده شود را مشخص می کند. که می تواند مقادیری مانند _blank, _self, _parent را بگیرد. |
|
4 |
enctype |
شما می توانید از ویژگی enctype برای مشخص کردن نحوه کد گذاری داده های مرورگر، قبل از ارسال آن به سرور، استفاده کنید.
application / x-www-form-urlencoded - این روش استانداردی است که اکثر فرمها در سناریوهای ساده از آن استفاده می کنند.
mutlipart / form-data - این روش هنگامی مورده استفاده قرار می گیرد که شما می خواهید داده های باینری را به صورت فایل هایی مانند تصویر، فایل word و غیره بارگذاری کنید.
|
کنترل های فرم HTML
انواع مختلفی از کنترل های فرم وجود دارد که می توانید از آنها برای جمع آوری داده های فرم HTML استفاده کنید.
- کنترل های ورودی متن (Text Input Controls)
- کنترل های چک باکس (Checkboxes Controls)
- کنترل های رادیو باکس (Radio Box Controls)
- کنترل های انتخاب باکس (Select Box Controls)
- باکس های انتخاب فایل (File Select boxes)
- کنترل های مخفی (Hidden Controls)
- دکمه های قابل کلیک شدن (Clickable Buttons)
- ثبت و تنظیم مجدد (Submit and Reset Button)
کنترل ورودی متن (Text Input Controls)
سه نوع ورودی متنی در فرمها وجود دارد -
کنترل های ورودی متن تک خطی (Single-line text input controls) - این کنترل ها برای مواردی که فقط به یک خط از ورودی کاربر نیاز داریم، مانند جعبه های جستجو یا نام ها استفاده می شوند. آنها با استفاده از تگ <input> در HTML ایجاد می شوند.
کنترل های ورودی رمز عبور (Password input controls) - این کنترل نیز یک ورودی تک خطی است، اما به محض اینکه کاربر، کاراکتر را وارد کند، آن کاراکتر را ماسک می کند یا می پوشاند. این کنترل با استفاده از برچسب <input> در HTML ساخته می شود.
کنترل های ورودی متن چند خطی (Multi-line text input controls) – از این کنترل زمانی استفاده می شود که کاربر نیاز به ارائه جزئیاتی دارد که ممکن است طولانی تر از یک جمله باشد. کنترلهای ورودی چند خطی با استفاده از برچسب <textarea> در HTML ایجاد می شوند.
کنترل های ورودی متن تک خطی (Single-line text input controls)
از این کنترل زمانی استفاده می شود که، فقط به یک خط از ورودی کاربر، نیاز داشته باشیم: مانند باکس های جستجو یا نام ها. آنها با استفاده از برچسب <input> در HTML ایجاد می شوند.
مثال
در زیر یک مثال ساده از یک ورودی متنی تک خطی است که برای وارد نمودن نام و نام خانوادگی استفاده می شود.
<!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>
کد فوق نتیجه زیر را تولید می کند -
ویژگی ها
در زیر لیستی از ویژگی های برچسب <input> برای ایجاد یک فیلد متنی را می توانید مشاهده کنید.
|
شماره ردیف |
ویژگی |
توضیحات |
|
1 |
type |
به وسیله ی این ویژگی می توان نوع کنترل input را مشخص کنیم. مثلا برای کنترل ورودی برای رمز عبور، این ویژگی راروی مقدار password تنظیم می کنیم. |
|
2 |
name |
به وسیله ی این ویژگی می توان یک نام برای کنترل ورودی متن (text-input) اختصاص داد. این نام به سرور فرستاده می شود و به وسیله ی آن می توانیم به مقدار کنترل ورودی متن (text-input) دسترسی پیدا کنیم. |
|
3 |
value |
به وسیله ی این ویژگی می توان یک مقدار اولیه برای کنترل ورودی متن (text-input) اختصاص داد. |
|
4 |
size |
مشخص می کند چه تعداد کارکتر می تواند در عرض کنترل ورودی متن (text-input) قرار گیرد. |
|
5 |
maxlength |
حداکثر تعداد کاراکتر هایی که کاربر می تواند در کادر متنی وارد کند را مشخص می کند. |
کنترل های ورودی متن چند خطی (Multi-line text input controls)
زمانی از این کنترل استفاده می شود که کاربر ملزم به ارائه جزئیاتی است که از یک جمله طولانی تر هستند. کنترلهای ورودی چند خطی با استفاده از برچسب <textarea> در HTML ایجاد می شوند.
مثال
در زیر یک مثال ساده از یک ورودی متن چند خطی را مشاهده می کنید که برای ارائه ی توصیفات یک آیتم استفاده می شود -
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
ویژگی ها
در زیر لیستی از ویژگی ها برای برچسب <textarea> را مشاهده می کنید.
|
شماره ردیف |
ویژگی |
توضیحات |
|
1 |
name |
به وسیله ی این ویژگی می توان یک نام برای کنترل اختصاص داد. این نام به سرور فرستاده می شود و به وسیله ی آن می توانیم به مقدار کنترل دسترسی پیدا کنیم. |
|
2 |
rows |
به وسیله ی این ویژگی می توان تعداد ردیف های کنترل textarea را مشخص کنیم. |
|
3 |
cols |
به وسیله ی این ویژگی می توان تعداد ستون های کنترل textarea را مشخص کنیم. |
کنترل Checkbox
Checkbox ها زمانی استفاده می شوند که بیش از یک گزینه مورد نیاز برای انتخاب وجود داشته باشد. این کنترل ها با استفاده از تگ input>> ایجاد می شوند، بطوریکه در آن ویژگی type را روی مقدار checkbox تنظیم می کنیم.
مثال
در زیر مثالی را مشاهده می کنید که در یک فرم، از دو checkboxe استفاده شده است -
<!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>
کد فوق نتیجه زیر را تولید می کند –
ویژگی های برچسب checkbox
در زیر لیستی از ویژگیهای برچسب <checkbox> را مشاهده می کنید:
|
شماره ردیف |
ویژگی |
توضیحات |
|
1 |
type |
به وسیله ی این ویژگی می توان نوع کنترل input را مشخص کنیم. برای کنترل ورودی checkbox، این ویژگی راروی مقدار checkbox تنظیم می کنیم. |
|
2 |
name |
به وسیله ی این ویژگی می توان یک نام برای کنترل اختصاص داد. این نام به سرور فرستاده می شود و به وسیله ی آن می توانیم به مقدار کنترل دسترسی پیدا کنیم. |
|
3 |
value |
اگر چک باکس انتخاب شود، از این مقدار استفاده می شود. |
|
|
checked |
اگر بخواهیم چک باکس به طور پیش فرض انتخاب شود، با ویژگی checked تنظیم می شود. |
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
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
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
