کار با فرم ها در HTMLقسمت اول
کار با فرم ها در HTML
ساخت فرم های متفاوت با استفاده از HTML
منظور از فرم ها چیست ؟ چگونه با استفاده از یک سند HTML فرم ثبت نام ایجاد کنیم؟ چگونه اطلاعاتی را پس از ارسال در یک فرم دریافت کنیم؟ در این مقاله میخواهیم به صورت کامل با فرم ها آشنا شویم و اطلاعاتی در رابطه با آنها بدست آوریم.
- 1 تگ Form در HTML
- 1.1 عنصر ورودی در تگ Form یا تگ input
- 1.2 فیلد متن (Text Field)
- 1.3 عنصر <lable> در تگ Form
- 1.4 دکمه های رادیویی (Radio Buttons) در تگ Form
- 1.5 کلید ثبت (Submit Button) در تگ Form
- 2 خاصیت های موجود در تگ Form
- 2.1 خاصیت Action
- 2.2 خاصیت Target
- 2.3 خاصیت Method
- 2.4 خاصیت Name
تگ Form درHTML
منظور از تگ Form به بخشی از صفحه گفته میشود که کاربر میتواند فرمی را پر کند با استفاده از ورودی ها:
<form> . عناصر درون تگ Form . </form>
هر فرم در HTML دارای عناصر داخلی ای میباشد که آن را تکمیل میکنند؛ نوع های مختلفی نظیر نوع های زیر را دارند که در این فصل ، بیشتر به آنها میپردازیم:
- فیلد های متنی
- چک باکس
- دکمه های رادیویی
- دکمه ثبت فرم
- و دیگر عناصر ورودی
عنصر ورودی در تگ Form یا تگ input
عنصر ورودی یا تگ input را میتوانیم مهمترین عنصر هر فرم HTML معرفی کنیم. این عنصر به چندین راه نمایش داده میشود و بستگی به نوع صفت هایش دارد.
برای مثال در زیر نمونه هایی از عناصر ورودی را در جدولی برایتان آورده ایم.
نوع | توضیحات |
<input type=”text”> | به معنی ایجاد یک فیلد تک خطی ورودی است |
<input type=”radio”> | به معنی ایجاد دکمه های رادیویی هست |
<input type=”submit”> | برای یک کلید ثبت نهایی فرم ایجاد میکند |
در رابطه با input ها شما در مقاله آشنایی با input ها بیشتر آشنا خواهید شد ولی قبلش بیایم کمی بیشتر با عناصر هر فرم آشنا بشیم.
فیلد متن (Text Field)
با استفاده از <input type="text">
میتوانیم یک فیلد متنی تک خطی را ایجاد کنیم.
مثال – در کد های زیر ما دو فیلد تک خطی ایجاد کرده ایم که نام و نام خانوادگی را دریافت میکند.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Raheleh"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="tabrizi">
</form>
عنصر <lable> در تگ Form
اگر یادتون باشه در مثال بخش قبل از عنصری به نام Label استفاده کردیم. عنصر Label همانطور که از نامش پیداست برای قرار دادن نام یا لیبل در فرم های ما استفاده میشود.
عنصر Label برای کاربرانی که گذری صفحه وب سایت را نگاه میکنند خیلی خیلی کاربردی هست، چرا که فرم هایی که اطلاعات مورد نظرشان را در داخل input نمایش میدهند برای اینجور کاربران خیلی نامفهوم هست و باعث کاهش تجربه کاربری ما میشود.
همچنین عنصر label باعث میشود تا شما در تگ Form برای کاربرانی که مشکلاتی برای انتخاب المان های کوچک مانند دکمه های رادیویی و چک باکس ها دارند، کار را راحت تر کنید. زیرا با توجه به تعریف شدن id با انتخاب کردن label توسط کاربران نیز میتوانند دکمه های رادیویی یا چک باکس ها را انتخاب کنند.
در نظر داشته باشید که برای متصل شدن عنصر label به عنصر input حتما باید خاصیت Id در آنها، کاملا یکسان باشد.
دکمه های رادیویی (Radio Buttons) در تگ Form
برای نمایش دکمه های رادیویی از <input type="radio">
استفاده میکنیم.
دکمه های رادیویی به کاربر این امکان را میدهد که از بین گزینه های نشان داده شده یکی را انتخاب کند. ( یعنی محدود به یک گزینه هستش )
<!DOCTYPE html>
<html>
<body>
<h2>FARAZNETWORK Radio Buttons</h2>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male"> Male </label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female"> Female </label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other"> Other </label>
</form>
</body>
</html>
کلید ثبت (Submit Button) در تگ Form
برای ارسال نهایی فرم به یک کنترل کننده فرم از عنصر <input type="submit">
یا کلید ثبت استفاده میکنیم.
کنترل کننده فرم به طور کلی یک صفحه در سرور هستش که اسکریپت هایی برای پردازش اطلاعات یا داده های درون ورودی ها درونش وجود داره.
کنترل کننده های فرم توسط خاصیت Action در فرم ها مشخص میشوند.
خاصیت های موجود در تگ Form
کار با فرم ها در HTML
در جدول زیر خاصیت های موجود در تگ form را با همدیگر بررسی میکنیم.
خاصیت
توضیحات
accept-charset
خاصیت Charset پشتیبانی شده توسط فرم که به صورت پیشفرض از Charset صفحه پشتیبانی میکند.
action
لینک صفحهای که میخواهیم، اطلاعات فرم در آن ثبت شود.
autocomplete
اگر میخواهید بخشی مرورگر خودش کامل کند. (پیشفرض فعال است)
enctype
برای اینکه اطلاعات ارسال شده به صفحه به صورت کد شده ارسال شود (پیشفرض فعال است)
method
نوع متد HTTP را مشخص میکند.( به صورت پیشفرض بر روی GET ست شده است)
name
برای هر فرم یک نام مشخص میکند. (این خاصیت در عنصر ها نیز باید رعایت شود و همچنین برای پیمایش آن در جاوا اسکریپت میتوانید از document.forms.name استفاده کنید.
novalidate
مشخص میکند که مرورگر ما نیازی نیست که حتما فرم را راستی آزمایی کند. (تایید کند)
target
هدف فرم را پس از کلیک بر روی Submit نشان میدهد که به صورت پیشفرض بر روی _Self ست شده است و از مقادیر پر استفاده در آن _blank میباشد که پس از کلیک نتیجه را در صفحه ای دیگر نمایش میدهد.
در ادامه با خاصیت های خیلی مهم هر تگ Form آشنا میشویم.
خاصیت Action
خاصیت Action به معنی عملکردی است که فرم بعد از کلیک بر روی کلید ثبت باید انجام دهد.
معمولا ، دادههای درون فرم بعد از کلیک بر روی کلید ثبت به یک صفحه در سرور ما ارسال میشود.
برای مثال در یک صفحه مثل "/FARAZNET WORK_form.php"
که در بخش سرور ما قرار دارد، میتواند این عمل را برای ما انجام دهد.
<form action="/faraznetwork_form.php">
اگر خاصیت Action درون صفحه ما وجود نداشته باشد، عملیات در همان صفحه فرم انجام میشود.
خاصیت Target
خاصیت Target مشخص میکند که هنگامی که ما بر روی کلید ثبت کلیک میکنیم عملیات چطور انجام شود.
عملیات میتواند در یک صفحه جدید، در یک فریم جدید یا در همان صفحه ایجاد شود.
به صورت پیشفرض همانطور که در جدول خاصیت ها گفتیم بر روی <strong>_self</strong>
تنظیم شده است.
برای اینکه پس از ثبت فرم، نتیجه در یک صفحه جدید ایجاد شود نیز باید از <strong>_blank</strong>
استفاده کنید.
مثلا در نمونه زیر، پس از کلیک بر روی کلید ثبت نتیجه در یک صفحه جدید نمایش داده میشود.
<form action="/faraznetwork_form.php" target="_blank">
در ادامه میخواهیم با خاصیت Method که یکی از مهمترین خاصیت های ما در تگ Form هست آشنا شویم.
خاصیت Method
کار با فرم ها در HTML
خاصیت Method در فرم ها متد HTML فرم را که میتواند از دو نوع Get و Post باشد، مشخص میکند.
مثال ۱ – ست کردن GET
برای استفاده از متد GET در فرم از کد زیر استفاده میکنیم:
<form action="/action_page.php" method="get">
مثال ۲ – ست کردن POST
برای استفاده از متد POST در فرم از کد زیر استفاده میکنیم:
<form action="/action_page.php" method="post">
چه زمانی از متد Get در فرم استفاده میکنیم؟
به صورت کلی متد HTML پیشفرض فرم ها بر روی متد GET ست شده است.
با اینحال، وقتی شما از متد GET استفاده میکنید، اطلاعات درون فرم شما در آدرس بار مرورگر شما نمایش داده میشود.
/action_page.php?firstname=John&lastname=Doe
درمورد تگ Get بدانید:
- اطلاعات فرم شما را در URL مرورگر شما نام و مقدارها را نمایش میدهد.
- طول هر رشته URL محدود به ۲۰۴۸ کاراکتر میباشد.
- برای اطلاعات خیلی مهم و محرمانه از GET هیچ وقت استفاده نمیکنیم! (چرا؟ چون داخل URL مرورگر نمایش داده میشه)
- برای زمانی که کاربران میخواهند نتیجه را پس از ثبت یاداشت و ذخیره کنند (Bookmark) پیشنهاد میشود.
- بهتر است از متد GET زمانی که اطلاعاتی غیر امنیتی مانند سرچ گوگل که از GET استفاده میکند، استفاده کنید.
چه زمانی از متد Post در فرم استفاده میکنیم؟
از متد POST همیشه زمانی استفاده کنید که اطلاعات درون فرم شما خیلی محرمانه یا خصوصی هست. متد POST هیچ چیزی را در آدرس بار مرورگر شما نمایش نمیدهد.
در مورد تگ POST بدانید:
- هیچ محدودیتی در فرم ها ندارد و برای ارسال اطلاعات بسیار طولانی مورد استفاده قرار میگیرد.
- اطلاعات درون متد Post امکان بوکمارک شدن ندارد.
خاصیت Name
هر فیلد عنصر ورودی میبایست یک خاصیت name داشته باشد.
اگر فیلدی خاصیت name را نداشته باشد، دیتایی از آن عنصر ورودی به صفحه Action ما ارسال نمیشود.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
در این مقاله با فرم ها و عناصر اصلی موجود در آن آشنا شدیم. در مقاله های بعدی با دیگر عناصر موجود در فرم ها آشنا میشویم و جزء به جزء هر فرم را بررسی میکنیم.
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده:راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.