فرم های html

وقتی که می خواهید داده هایی را از سایت بازدیدکننده جمع آوری کنید، به فرم های HTML احتیاج خواهید داشت. به عنوان مثال در هنگام ثبت کاربر، اطلاعاتی مانند نام، آدرس ایمیل و کارت اعتباری و غیره را جمع آوری می کنید. یک فرم داده ها را از بازدیدکننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی فرایندهای مورد نیاز را بر اساس کار تعریف شده در برنامه، روی داده ی منتقل شده انجام می دهد.
عناصر متفاوتی برای فرم در دسترس میباشند، مانند فیلدهای متن، فیلدهای textarea، منوهای رو به پایین، دکمه های رادیو، چک باکس ها و غیره.
برچسب < form> مربوط به HTML، برای ایجاد یک فرم HTML استفاده می شود و دارای ترکیب زیر می باشد

< form action="Script URL" method="GET|POST">
    form elements like input, textarea etc.
< /form>

ویژگی های فرم

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

Attribute Description

action

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

method

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

target

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

enctype

شما می توانید از ویژگی enctype برای مشخص کردن چگونگی برنامه نویسی توسط مرورگر قبل از ارسال به سرور، استفاده کنید. مقادیر ممکن عبارتند از: application/x-www-form-urlencoded - این روش استانداردی است که بیشتر فرم ها در سناریو های ساده استفاده می کنند. mutlipart/form-data - این روش زمانی استفاده می شود که شما می خواهید داده های دوتایی را به شکل فایل هایی مانند تصویر بارگذاری کنید.

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

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

کنترل های ورودی متن
کنترل های چک باکس
کنترل های رادیو باکس
کنترل های انتخاب باکس
باکس های انتخاب فایل
کنترل های مخفی
دکمه های قابل کلیک شدن
ثبت و تنظیم مجدد

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

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

کنترل های ورودی متن تک خطی: این کنترل برای آیتم هایی استفاده می شود که فقط یک خط از ورودی کاربر را لازم دارد، مانند باکس های جستجو و نام ها. این کنترل ها با استفاده ازبرچسب < input> مربوطبه HTML ایجاد می شوند.
کنترل ورودی گذرواژه: این نیز یک متن ورودی تک خطی می باشد، اما به محض اینکه کاربر کاراکتر را وارد می کند، این کنترل آن را می پوشاند.
کنترل های متن ورودی چند خطی: زمانی استفاده می شود که لازم است کاربر جزئیاتی را وارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea> استفاده می شوند.

کنترل های ورودی تک خطی

این کنترل ها برای آیتم هایی استفاده می شوند که کاربر فقط یک خط ورودی احتیاج دارد، مانند باکس های جستجو و نام ها و با استفاده از برچسب < 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>را برای ایجاد فیلد متن می بینید.

Attribute Description

type

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

name

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

value

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

size

اجازه می دهد تا عرض کنترل متن ورودی را متناسب با کاراکترها تعیین کنید.

maxlength

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

کنترل های پسورد ورودی

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

مثال:

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

نمونه دو

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

ویژگی ها

در زیر لیست مربوط به ویژگی های برچسب < input>را برای ایجاد فیلد پسوورد می بینید.

Attribute Description

type

نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی پسوورد، برای password تنظیم خواهد شد.

name

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

value

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

size

اجازه می دهد تا عرض کنترل متن ورودی را با کاراکترها تعیین کنید.

maxlength

اجازه می دهد تا حداکثر تعداد کاراکترهایی را که یک کاربر می تواند در یک تکست باکس وارد کند، تعیین کنید.

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

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

مثال:

در اینجا مثالی را می بینید از یک ورودی متن چند خطی که برای ارائه ی توصیفات آیتم استفاده می شود.

نمونه سه

<!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> ارائه شده اند.

Attribute

Description

name

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

rows

تعداد ردیف های area box مربوط به متن را نشان می دهد.

cols

تعداد ستون های area box مربوط به متن را نشان می دهد.

کنترل چک باکس

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

مثال:

در اینجا مثالی از کد HTML را مشاهده می کنید برای یک فرم با دو چک باکس.

نمونه چهار

<!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> را می بینید:

Attribute

Description

type

نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی چک باکس با checkbox کنترل خواهد شد.

name

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

value

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

checked

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

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

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

مثال:

در اینجا مثالی از کد HTML می بینید برای یک فرم با دو دکمه ی رادیو.

نمونه پنج

<!DOCTYPE html>
<html>
<head>
   <title>Checkbox Control</title>
</head>
<body>
   <form>
       <input type="radio" name="maths" value="on"> Maths
       <input type="radio" name="physics" value="on"> Physics
   </form>
</body>
</html>

ویژگی ها

در زیر لیستی از ویژگی های دکمه ی رادیو را می بینید.

Attribute

Description

type

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

name

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

value

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

checked

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

کنترل Select Box

یک Select Boxکه منوی رو به پایین نیز نامیده می شود، گزینه ای را برای ارائه ی گزینه های مختلف به شکل یک لیست رو به پایین ارائه می دهد، که کاربر می تواند از آن یک یا بیشتر از یک گزینه را انتخاب کند.

مثال:

در اینجا مثالی از کد HTML برای یک فرم با یک جعبه ی رو به پایین می بینید.

نمونه شش

<!DOCTYPE html>
<html>
<head>
   <title>Select Box Control</title>
</head>
<body>
   <form>
       <select name="dropdown">
           <option value="Maths" selected>Maths</option>
           <option value="Physics">Physics</option>
       </select>
   </form>
</body>
</html>

در زیر لیستی از ویژگی های برچسب < select> را می بینید.

Attribute

Description

name

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

size

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

multiple

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

در زیر لیستی از ویژگی های مهم برچسب < option> ارائه شده است.

Attribute

Description

value

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

selected

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

label

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

فایل آپلود باکس

اگر می خواهید به کاربر اجازه دهید تا فایلی را روی وب سایت شما آپلود کند، به یک کنترل فایل آپلود احتیاج خواهید داشت، که Select Boxنیز نامیده می شود. این ویژگی با استفاده از برچسب < input> نیز ایجاد می شود، اما نوع ویژگی با file تنظیم می شود.

مثال:

در اینجا مثالی را می بینید از کد HTML برای یک فرم با یک فایل آپلود باکس.

نمونه هفت

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

پیکسلر | شبکه اجتماعی برنامه نویسان

فرم های html