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

یک فرم ورودی بازدید کننده سایت را دریافت می کند و سپس آن را برای یک برنامه back-end مانند CGI ، ASP Script یا اسکریپت پی اچ پی و غیره ارسال می کند. منطق در برنامه.

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

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

<form action = “آدرس اسکریپت URL” = = “GET | POST”>
عناصر مانند ورودی ، متن و غیره را تشکیل دهید
</form>
ویژگی های فرم
جدا از ویژگی های رایج ، در زیر لیستی از متداول ترین ویژگی های فرم –

ویژگی و توضیحات Sr.No
1
عمل

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

2
روش

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

3
هدف

پنجره یا قاب مورد نظر را در جایی که نتیجه فیلمنامه نمایش داده می شود مشخص کنید. مقادیری مانند _blank ، _ Self ، _parent و غیره را می گیرد.

4
متن

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

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

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

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

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

کنترل ورودی متن
کادرهای کنترل
کنترل رادیو جعبه
کادر کنترل را انتخاب کنید
کادرهای پرونده را انتخاب کنید
کنترل های پنهان
دکمه های قابل کلیک
دکمه ارسال و تنظیم مجدد
کنترل ورودی متن
سه نوع ورودی متن روی فرم ها وجود دارد –

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

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

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

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

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

نسخه ی نمایشی زنده
<! DOCTYPE html>
<html>

<head>
<title> کنترل ورودی متن </title>
</head>

<body>
<form>
نام و نام خانوادگی: <input type = “text” name = “first_name” />
…
نام خانوادگی: <input type = “text” name = “last_name” />
</form>
</body>

</html>
این نتیجه زیر را حاصل می کند –

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

ویژگی و توضیحات Sr.No
1
نوع

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

2
نام

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

3
ارزش

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

4
اندازه

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

5
بیشترین طول

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

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

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

نسخه ی نمایشی زنده
<! DOCTYPE html>
<html>

<head>
<title> کنترل ورودی رمزعبور </title>
</head>

<body>
<form>
شناسه كاربر: <input type = “text” name = “user_id” />
…
گذرواژه: <input type = “password” name = “password” />
</form>
</body>