آموزش فرم ها در HTML

4 سال پیش

امتیاز دهید post

آموزش فرم ها در HTML

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فرم ها در HTML خواهیم پرداخت.

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

یک فرم ورودی را از بازدید کننده سایت دریافت می کند و سپس آن را به یک برنامه پشتیبان مانند CGI ،ASP اسکریپت یا اسکریپت PHP ارسال می کند.

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

از تگ <HTML <form برای ایجاد فرم HTML استفاده می شود و دارای نحو زیر است –

&lt;form action = "Script URL" method = "GET|POST"&gt;
   form elements like input, textarea etc.
&lt;/form&gt;

form elements like input, textarea etc.

</form>

ویژگی های فرم ها در HTML

جدا از ویژگی های رایج، در زیر لیستی از ویژگی های فرم که بیشتر استفاده می شود وجود دارد –

action

اسکریپت Backend آماده برای پردازش داده های منتقل شده.

method

روشی که برای بارگذاری داده استفاده می شود. متداول ترین روش ها GET و POST است.

target

پنجره یا قاب هدف را مشخص کنید که در آن نتیجه اسکریپت نمایش داده شود. مقادیری مانند _blank, _self, _parent و غیره را می گیرد.

enctype

می توانید از ویژگی enctype برای تعیین نحوه رمزگذاری مرورگر قبل از ارسال اطلاعات به سرور، استفاده کنید. مقادیر احتمالی عبارتند از –

application / x-www-form-urlencoded – این روش استاندارد است که بیشتر فرم ها در سناریوهای ساده از آن استفاده می کنند.

mutlipart / form-data – این مورد زمانی به کار می رود که می خواهید داده های باینری را به صورت پرونده هایی مانند تصویر، فایل word و غیره بارگذاری کنید.

توجه – برای جزئیات بیشتر در مورد نحوه بارگذاری داده های فرم ها در HTML می توانید به Perl & CGI مراجعه کنید.

کنترل فرم HTML

انواع مختلفی از کنترل فرم وجود دارد که می توانید برای جمع آوری داده ها با استفاده از فرم HTML استفاده کنید –

Text Input Controls
Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Hidden Controls
Clickable Buttons
Submit and Reset Button

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

Single-line text input controls – این کنترل برای مواردی استفاده می شود که فقط به یک خط ورودی کاربر نیاز دارند، مانند جعبه های جستجو یا نام ها. آنها با استفاده از تگ <HTML <input ایجاد می شوند.

Password input controls – این نیز یک متن ورودی تک خطی است اما به محض ورود کاربر به آن شخصیت را می پوشاند. آنها همچنین با استفاده از تگ <HTTl <input ایجاد می شوند.

Multi-line text input controls – این مورد زمانی استفاده می شود که کاربر ملزم به ارائه جزئیاتی باشد که ممکن است از یک جمله بیشتر باشد. کنترل های ورودی چند خطی با استفاده ازتگ <HTML <textarea ایجاد می شوند.

کنترل های ورودی متن تک خطی (Single-line text input controls)

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

مثال

در اینجا یک مثال کلی از ورودی متن تک خطی وجود دارد که برای گرفتن نام و نام خانوادگی استفاده می شود –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Text Input Control&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;form &gt;
         First name: &lt;input type = "text" name = "first_name" /&gt;
         &lt;br&gt;
         Last name: &lt;input type = "text" name = "last_name" /&gt;
      &lt;/form&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!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:

First name:

Last name:

ویژگی ها

در زیر لیستی از ویژگی های تگ <input> برای ایجاد قسمت متن آورده شده است.

type

نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی متن روی متن تنظیم می شود.

name

برای دادن نام به کنترل که برای شناسایی و دریافت مقدار به سرور ارسال می شود، استفاده می شود.

value

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

size

اجازه می دهد تا عرض کنترل ورودی متن را از نظر کاراکتر مشخص کنید.

maxlength

اجازه می دهد تا حداکثر تعداد کاراکترهایی که کاربر می تواند در جعبه متن وارد کند را مشخص کنید.

کنترل های ورودی رمز عبور (Password input controls)

این یک ورودی متن تک خطی است اما به محض ورود کاربر به آن کاراکتر را مخفی می کند. آنها همچنین با استفاده از تگ <HTML <input ایجاد می شوند اما ویژگی type بر روی رمز عبور تنظیم شده است.

مثال

در اینجا یک مثال اساسی از ورودی رمز عبور تک خطی وجود دارد که برای گرفتن رمز عبور کاربر استفاده می شود –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Password Input Control&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;form &gt;
         User ID : &lt;input type = "text" name = "user_id" /&gt;
         &lt;br&gt;
         Password: &lt;input type = "password" name = "password" /&gt;
      &lt;/form&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!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:

User ID :

Password:

ویژگی ها

در زیر لیستی از ویژگی های برچسب <input> برای ایجاد قسمت رمز عبور آورده شده است.

type

نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی رمز عبور روی گذرواژه تنظیم می شود.

name

برای دادن نام به کنترل که برای شناسایی و دریافت مقدار به سرور ارسال می شود، استفاده می شود.

value

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

size

اجازه می دهد تا عرض کنترل ورودی متن را از نظر کاراکتر مشخص کنید.

maxlength

اجازه می دهد تا حداکثر تعداد کاراکتر هایی که کاربر می تواند در جعبه متن وارد کند را مشخص کنید.

کنترل های ورودی متن چند خطی (Multiple-Line Text Input Controls9)

این مورد زمانی استفاده می شود که کاربر ملزم به ارائه جزئیاتی باشد که ممکن است از یک جمله بیشتر باشد. کنترل های ورودی چند خطی با استفاده از تگ <HTML <textarea ایجاد می شوند.

مثال

در اینجا یک مثال اساسی از ورودی متن چند خطی وجود دارد که برای گرفتن توضیحات مورد استفاده می شود –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Multiple-Line Input Control&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;form&gt;
         Description : &lt;br /&gt;
         &lt;textarea rows = "5" cols = "50" name = "description"&gt;
            Enter description here...
         &lt;/textarea&gt;
      &lt;/form&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Multiple-Line Input Control</title>

</head>

<body>

<form>

Description : <br />

Enter description here...

</textarea>

</form>

</body>

</html>

خروجی

Description:
 
Enter description here...

Description:

Enter description here...

ویژگی ها
در زیر لیستی از ویژگی های تگ <textarea> آورده شده است.

name

برای دادن نام به کنترل که برای شناسایی و دریافت مقدار به سرور ارسال می شود ، استفاده می شود.

rows

تعداد سطرهای جعبه متن را نشان می دهد.

cols

تعداد ستون های کادر منطقه متن را نشان می دهد

کنترل چک باکس

کادرهای تأیید یا چک باکس ها هنگامی استفاده می شوند که بیش از یک گزینه برای انتخاب مورد نیاز باشد. آنها همچنین با استفاده از تگ <HTML <input ایجاد می شوند اما ویژگی type بر روی کادر انتخاب تنظیم شده است.

مثال

در اینجا مثالی از کد HTML برای فرم با دو کادر انتخاب وجود دارد –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Checkbox Control&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;form&gt;
         &lt;input type = "checkbox" name = "maths" value = "on"&gt; Maths
         &lt;input type = "checkbox" name = "physics" value = "on"&gt; Physics
      &lt;/form&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!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

ویژگی ها

در زیر لیستی از ویژگی های تگ <checkbox> آورده شده است.

type

نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی جعبه تأیید روی جعبه تأیید تنظیم می شود ..

name

برای دادن نام به کنترل که برای شناسایی و دریافت مقدار به سرور ارسال می شود، استفاده می شود.

value

مقداری که در صورت انتخاب کادر انتخاب استفاده خواهد شد.

checked

اگر می خواهید به طور پیش فرض آن را انتخاب کنید، روی checked تنظیم کنید.

کنترل دکمه رادیویی

دکمه های رادیویی هنگامی استفاده می شوند که از گزینه های زیادی خارج شوند، فقط یک گزینه برای انتخاب مورد نیاز است. آنها همچنین با استفاده از تگ <HTML <input ایجاد می شوند اما ویژگی type بر روی رادیو تنظیم شده است.

مثال

این مثال کد HTML برای فرم با دو دکمه رادیویی است –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Radio Box Control&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;form&gt;
         &lt;input type = "radio" name = "subject" value = "maths"&gt; Maths
         &lt;input type = "radio" name = "subject" value = "physics"&gt; Physics
      &lt;/form&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!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

ویژگی ها

در زیر لیستی از ویژگی های دکمه رادیویی آورده شده است.

type

نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی کادر تأیید روی رادیو تنظیم می شود.

name

برای دادن نام به کنترل که برای شناسایی و دریافت مقدار به سرور ارسال می شود، استفاده می شود.

value

مقداری که در صورت انتخاب جعبه رادیو استفاده خواهد شد.

checked

اگر می خواهید به طور پیش فرض آن را انتخاب کنید، روی checked تنظیم کنید.

انتخاب جعبه کنترل

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

مثال

در اینجا کد HTML مثالی برای فرم با یک جعبه کشویی آورده شده است

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Select Box Control&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;form&gt;
         &lt;select name = "dropdown"&gt;
            &lt;option value = "Maths" selected&gt;Maths&lt;/option&gt;
            &lt;option value = "Physics"&gt;Physics&lt;/option&gt;
         &lt;/select&gt;
      &lt;/form&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Select Box Control</title>

</head>

<body>

<form>

<option value = "Maths" selected>Maths</option>

<option value = "Physics">Physics</option>

</select>

</form>

</body>

</html>

خروجی

ویژگی ها

در زیر لیستی از ویژگی های مهم تگ <select> وجود دارد –

name

برای دادن نام به کنترل که برای شناسایی و دریافت مقدار به سرور ارسال می شود، استفاده می شود.

size

این می تواند برای ارائه یک جعبه لیست پیمایش استفاده شود.

multiple

اگر روی “multiple” تنظیم شود، به کاربر اجازه می دهد چندین مورد را از فهرست انتخاب کند.

در زیر لیستی از ویژگی های مهم تگ<option> وجود دارد –

value

مقداری که در صورت انتخاب گزینه ای در جعبه انتخاب استفاده خواهد شد.

selected

مشخص می کند که هنگام بارگیری صفحه، این گزینه باید مقدار اولیه انتخاب شده باشد.

label

یک روش جایگزین برای گزینه های برچسب زدن

جعبه بارگذاری فایل

اگر می خواهید به یک کاربر اجازه دهید پرونده ای را در وب سایت شما بارگذاری کند، باید از جعبه بارگذاری پرونده استفاده کنید که به عنوان باکس انتخاب فایل نیز شناخته می شود. این نیز با استفاده از عنصر <input> ایجاد می شود اما ویژگی type بر روی پرونده تنظیم می شود.

مثال

در اینجا کد HTML برای فرم با یک جعبه بارگذاری پرونده وجود دارد –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;File Upload Box&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;form&gt;
         &lt;input type = "file" name = "fileupload" accept = "image/*" /&gt;
      &lt;/form&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>File Upload Box</title>

</head>

<body>

<form>

</form>

</body>

</html>

خروجی

ویژگی ها

در زیر لیستی از ویژگی های مهم جعبه بارگذاری فایل وجود دارد –

name

برای دادن نام به کنترل که برای شناسایی و دریافت مقدار به سرور ارسال می شود، استفاده می شود.

accept

انواع فایل هایی را که سرور آن را قبول می کند مشخص می کند.

کنترل های دکمه ای

روش های مختلفی در HTML برای ایجاد دکمه های قابل کلیک وجود دارد. همچنین می توانید با تنظیم ویژگی نوع آن روی دکمه، با استفاده از تگ <input> یک دکمه قابل کلیک ایجاد کنید. ویژگی type می تواند مقادیر زیر را بگیرد –

submit

با این کار دکمه ای ایجاد می شود که به صورت خودکار فرم را ارسال می کند.

reset

با این کار دکمه ای ایجاد می شود که کنترل های فرم را به طور خودکار به مقادیر اولیه خود بازنشانی می کند.

button

با این کار دکمه ای ایجاد می شود که برای شروع اسکریپت سمت مشتری هنگام کلیک کاربر روی آن دکمه استفاده می شود.

image

این یک دکمه قابل کلیک ایجاد می کند اما ما می توانیم از یک تصویر به عنوان پس زمینه دکمه استفاده کنیم.

مثال

در اینجا کد HTML مثالی برای فرم با سه نوع دکمه آورده شده است –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;File Upload Box&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;form&gt;
         &lt;input type = "submit" name = "submit" value = "Submit" /&gt;
         &lt;input type = "reset" name = "reset"  value = "Reset" /&gt;
         &lt;input type = "button" name = "ok" value = "OK" /&gt;
         &lt;input type = "image" name = "imagebutton" src = "/html/images/logo.png" /&gt;
      &lt;/form&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>File Upload Box</title>

</head>

<body>

<form>

</form>

</body>

</html>

خروجی

کنترل های فرم پنهان

کنترل های فرم پنهان برای پنهان کردن داده ها در داخل صفحه استفاده می شود که بعداً می توانند به سرور فرستاده شوند. این کنترل درون کد پنهان می شود و در صفحه واقعی ظاهر نمی شود. به عنوان مثال، از فرم مخفی زیر برای حفظ شماره صفحه فعلی استفاده می شود. هنگامی که کاربر روی صفحه بعدی کلیک می کند ، مقدار کنترل پنهان به وب سرور ارسال می شود و در آنجا تصمیم می گیرد که کدام صفحه بعدی بر اساس صفحه فعلی عبور داده شده نمایش داده شود.

مثال

در اینجا کد HTML به عنوان مثال برای نشان دادن استفاده از کنترل پنهان وجود دارد –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;File Upload Box&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;form&gt;
         &lt;p&gt;This is page 10&lt;/p&gt;
         &lt;input type = "hidden" name = "pagename" value = "10" /&gt;
         &lt;input type = "submit" name = "submit" value = "Submit" /&gt;
         &lt;input type = "reset" name = "reset"  value = "Reset" /&gt;
      &lt;/form&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>File Upload Box</title>

</head>

<body>

<form>

</form>

</body>

</html>

خروجی

This is page 10

منبع.

لیست جلسات قبل آموزش HTML

امتیاز دهید post

نویسنده مطلب saber

آموزش فرم ها در HTML

آموزش فرم ها در HTML

ویژگی های فرم ها در HTML

کنترل فرم HTML

کنترل های ورودی متن تک خطی (Single-line text input controls)

مثال

ویژگی ها

کنترل های ورودی رمز عبور (Password input controls)

مثال

ویژگی ها

کنترل های ورودی متن چند خطی (Multiple-Line Text Input Controls9)

مثال

کنترل چک باکس

مثال

ویژگی ها

کنترل دکمه رادیویی

مثال

ویژگی ها

انتخاب جعبه کنترل

مثال

ویژگی ها

جعبه بارگذاری فایل

مثال

ویژگی ها

کنترل های دکمه ای

مثال

کنترل های فرم پنهان

مثال

لیست جلسات قبل آموزش HTML

دیدگاه شما

بدون دیدگاه

آموزش فرم ها در HTML

ویژگی های فرم ها در HTML

کنترل فرم HTML

کنترل های ورودی متن تک خطی (Single-line text input controls)

مثال

ویژگی ها

کنترل های ورودی رمز عبور (Password input controls)

مثال

ویژگی ها

کنترل های ورودی متن چند خطی (Multiple-Line Text Input Controls9)

مثال

کنترل چک باکس

مثال

ویژگی ها

کنترل دکمه رادیویی

مثال

ویژگی ها

انتخاب جعبه کنترل

مثال

ویژگی ها

جعبه بارگذاری فایل

مثال

ویژگی ها

کنترل های دکمه ای

مثال

کنترل های فرم پنهان

مثال

لیست جلسات قبل آموزش HTML

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه