خانه / آموزش HTML / بخش سی و دوم-فرم های HTML

مهندس زهرا بهرامی

تاریخ بروزرسانی: ۱۰ آذر ۱۳۹۷ تعداد بازدید : 23 بازدید بدون دیدگاه

بخش سی و دوم-فرم های HTML

قدم قبلی >

< قدم بعدی

در این آموزش html به فرم های HTML می پردازیم.

تگ form در html

تگ form یک فرم را تعریف می کند که برای جمع آوری ورودی کاربر استفاده می شود:

<form>
.
form elements
.
</form>

<form>

form elements

</form>

یک فرم HTML حاوی عناصر فرم است.

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

تگ input در html

عنصر <input> مهمترین عنصر فرم است.

عنصر <input> می تواند به روش های مختلف نمایش داده شود، بسته به نوع ویژگی.

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

ورودی متن input

<input type = “text”> یک فیلد ورودی یک خط برای ورود متن را تعریف می کند:

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form

<form>

First name:<br>

Last name:<br>

</form

توجه: فرم خود قابل مشاهده نیست همچنین توجه داشته باشید که عرض پیش فرض یک فیلد متنی ۲۰ کاراکتر است.

ورودی دکمه رادیویی

<input type = “radio”> یک دکمه رادیویی را تعریف می کند.

دکمه های رادیویی به کاربر اجازه می دهد یکی از تعداد محدودی از گزینه ها را انتخاب کند:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

<form>

<input type="radio" name="gender" value="female"> Female<br>

<input type="radio" name="gender" value="other"> Other

</form>

دکمه ارسال

<input type = “submit”> یک دکمه را برای ارسال اطلاعات فرم به یک handler form تعریف می کند.

متلب فرم معمولا یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.

فرم دستیار در مشخصه عمل فرم مشخص شده است:

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

First name:<br>

Last name:<br>

</form>

خصوصیت Action

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

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

در مثال بالا، داده های فرم به یک صفحه در سرور به نام “/action_page.php” ارسال می شود. این صفحه شامل یک اسکریپت سمت سرور است که داده های فرم را پردازش می کند:

<form action="/action_page.php">

1	<form action="/action_page.php">

اگر ویژگی Action حذف شود، عمل بر روی صفحه فعلی تنظیم می شود.

خصوصیت Target

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

مقدار پیش فرض “_self” است که به این معنی است که فرم در پنجره فعلی نمایش داده می شود.

برای ایجاد فرم باز در یک برگه مرورگر جدید، از مقدار “_blank” استفاده کنید:

<form action="/action_page.php" target="_blank">

1	<form action="/action_page.php" target="_blank">

مقادیر قانونی دیگر “_parent”، “_top” یا نامی هستند که نام یک iframe را نشان می دهند.

خصوصیت Method

متد attribute متد HTTP (GET یا POST) را که هنگام ارسال داده های فرم مورد استفاده قرار می گیرد مشخص می کند:

<form action="/action_page.php" method="get">

1	<form action="/action_page.php" method="get">

یا:

<form action="/action_page.php" method="post">

1	<form action="/action_page.php" method="post">

زمان استفاده از GET

روش پیش فرض در هنگام ارسال اطلاعات فرم، GET است.

با این حال، هنگامی که GET استفاده می شود، داده های فرم ارسال شده در قسمت آدرس صفحه قابل مشاهده خواهد بود:

/action_page.php?firstname=Mickey&lastname=Mouse

1	/action_page.php?firstname=Mickey&lastname=Mouse

نکاتی از GET:

فرم داده ها را به URL در جفت نام / ارزش اضافه می کند
طول URL محدود است (حدود ۳۰۰۰ کاراکتر)
هرگز برای ارسال اطلاعات حساس از GET استفاده نکنید! (در URL قابل مشاهده است)
برای ارسال مقالات مفید است که در آن کاربر می خواهد نتیجه را نشانه گذاری کند
GET برای داده های غیر امن، مانند رشته های پرس و جو در Google بهتر است

چه زمانی از POST استفاده می شود؟

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

نکاتی از POST:

POST هیچ محدودیتی در اندازه ندارد و می تواند برای ارسال مقادیر زیاد داده ها استفاده شود.
فرم ارسال با POST نمی تواند نشانه گذاری شود

خصوصیت Name

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

اگر مشخصه اسم حذف شود، داده های آن فیلد ورودی در همه ارسال نمی شود.

این مثال تنها فیلد ورودی «نام خانوادگی» را ارسال می کند:

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

First name:<br>

Last name:<br>

</form>

فرم گروه بندی با <fieldset>

عنصر <fieldset> برای گروه بندی داده های مرتبط در یک فرم استفاده می شود.

عنصر <legend> یک عنوان را برای عنصر <fieldset> تعریف می کند.

<form action="/action_page.php">
  <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>