در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML گام به گام قسمت 18 : فرم ها

فرم های اچ تی ام ال برای جمع آوری یکسری اطلاعات از کاربر استفاده می شود. ساخت فرم در اچ تی ام ال توسط تگ <form> انجام پذیر است. این تگ دارای ورودی های مختلفی است که از طریق تگ input می توان مقادیر مختلفی دریافت کرد. تگ input دارای صفت type می باشد که می تواند شامل text ,radio, submit و... باشد. در این سری آموزش به طور مفصل تک تک آنها را آموزش می دهیم. به طور کلی از این تگ به صورت زیر استفاده می شود.

ورودی text:

انتخاب input از نوع text موجب ساختن فرم ورودی متن می شود. از این فرم می توانید اطلاعات را به صورت رشته ای وارد کنید.


<!Doctype HTML>
<html>
<head>
	<title>HTML Form</title>
	</head>
	<body>
		<form>
		Name:	<input type="text"/>
		</form>
	</body>
</html>

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

<form>
	Name:	<input type="text" name="name"/><br>
	Family: <input type="text" name="family"/>
</form>

ورودی radio:

Radio Button ها امکان انتخاب فقط یک گزینه را در بین چندین انتخاب فراهم می کند. این انتخاب برای زمانی استفاده می شود که در بین چند گزینه فقط یکی از آنها درست است. مثل سوالات چند گزینه.

<form>
	<p>What is your gender?</p>
	<input type="radio" name="gender" value="Man" checked/>Man <br>
	<input type="radio" name="gender" value="Woman"/> Woman 
</form>

البته خاصیت Value هیچ تاثیری در نمایش نمی گذارد، متنی که در بیرون تگ input قرار می گیرد به نمایش در می آید.

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

ورودی submit:

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

<form>
  First name:<br>
  <input type="text" name="firstname" value="Arastoo"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Abbasi"><br><br>
  <input type="submit" value="Submit">
</form> 

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

نکته: خاصیت value برای تعیین مقدار پیشفرض در اکثر ورودی ها استفاده می شود. در مثال بالا ورودی های متنی دارای مقادیر اولیه هستند.

خاصیت Action:

همانطور که گفته شد از ورودی submit برای کنترل فرم مورد استفاده قرار می گیرد، البته یکی دیگر از مسائل مهم در کنترل و انجام عملیات در فرم یکی از خاصیت های تگ form به نام action است. این خاصیت مشخص می کند بعد از کلیک روی یک ورودی دکمه یا submit اطلاعات فرم به کجا برای انجام عملیات روی داده ها ارسال شود. به مثال زیر توجه کنید:

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form> 

در این سند اطلاعات جمع آوری شده پس از کلیک روی دکمه submit به پرونده action_page.php ارسال می شود.

خاصیت Method:

شیوه ارسال اطلاعات از پرونده ای به پرونده دیگر بسیار مهم است، این شیوه توسط خاصیت method در تگ form مشخص می شود. خاصیت method دارای دو مقدار Post و Get است.

• Post: در مواقعی که فرم دارای موارد ویرایشی است و یا فرم های ورودی اطلاعات مهمی مثل رمز عبور را دریافت می کنند از این شیوه استفاده می شود. در این شیوه اطالاعات ارسالی درون کادر PageAddres مرورگر نمایش داده می شود. (امنیتی)

• Get: درمواردی که اطلاعات دارای اهمیت خاصی نیستند، یا اینکه بتوان محتوای این متون را در موقع ارسال تغییر داد از این شیوه استفاده می شود. شیوه ارسال اطلاعات در موتور جستجوی گوگل به این شیوه است. (فاقد امنیت)

گروه بندی fieldset:

برای آنکه از چندین فرم مستقل در یک صفحه بهره ببرید می توانید آن ها را گروه بندی کنید، این کار علاوه بر آنکه ورودی ها را قبل فهم می کند، از تداخل اطلاعات با هم جلوگیری می کند. بعد از تگ form اطلاعات ورودی را داخل تگ <fieldset> قرار دهید و برای انتخاب نام گروه از تگ <legend> استفاده کنید. مثال زیر را اجرا کنید:

<form>
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form> 

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_قدم_به_قدم_html #آموزش_تگ_ها_در_html #آموزش_html #فرم_ها_در_html #آمورش_html #آموزش_گام_به_گام_html #استفاده_از_تگ_های_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
0 نظر

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

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

You can buy cheaper in our wonderful discounts