فرم های HTML

یادگیری HTML

تعداد بازدید : 5005

تاریخ و ساعت انتشار : چهار شنبه 1 شهریور 1396 01:59

عنصر <form>

این عنصر در HTML فرم ها را برای دریافت و جمع آوری اطلاعات کاربر ، تعریف می کند :

عناصر فرم

<form>
.
عناصر فرم
.
</form>

مشاهده مثال

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

عنصر <input>

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

نمونه هایی از صفات type :

Type
<"input type="text>
<"input type="radio>
<"input type="submit>

* در درس های آینده در مورد نوع ورودی ها بیشتر آشنا خواهید شد.

ورودی متن

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

مثال :

ورودی متنی

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

مشاهده مثال

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

دکمه رادیویی

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

مشاهده مثال

دکمه ثبت

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

form-handler معمولا یک صفحه سرور به همراه کدهایی است که پردازش داده های وارد شده را انجام می دهد. form-handler در صفت action فرم ، مشخص می شود :

مثال :

دکمه ثبت

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

مشاهده مثال

صفت action

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

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

صفت action

<form action="/action_page.php">

مشاهده مثال

اگر صفت action نوشته نشود (فراموش شود) ، action بر روی صفحه جاری تنظیم می شود.

صفت method

صفت method یک متد HTTP (مانند : POST یا GET) را تعیین می کند تا به هنگام ارسال داده های فرم ، استفاده شود :

صفت method

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

مشاهده مثال

یا

صفت method 2

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

مشاهده مثال

چه زمانی از GET استفاده کنیم؟

متد پیش فرض به هنگام ثبت فرم ، GET است. البته وقتی از GET استفاده می کنیم ، داده ثبت شده در فرم در فیلد آدرس صفحه وبمورد نظر نمایش داده می شود :

استفاده از GET

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

مشاهده مثال

نکته : به هنگام ثبت اطلاعات حساس نباید از GET استفاده کنید. متد GET به علت محدودیت سایز ، برای داده های غیر حساس و کوتاه استفاده می شود.

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

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

صفت name

هر فیلد ورودی باید دارای صفت name باشد تا بتواند ثبت شود. اگر صفت name نوشته نشود (فراموش شود) ، داده آن فیلد ورودی اصلا ارسال نخواهد شد.

مثال زیر فقط ورودی فیلد "نام خانوادگی" را ارسال خواهد کرد :

مثال :

صفت name

<form action="/action_page.php">
  First name:<br>
  <input type="text" value="hamed"><br>
  Last name:<br>
  <input type="text" name="lastname" value="moez"><br><br>
  <input type="submit" value="Submit">
</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>

مشاهده مثال

ارسال ایمیل از طریق فرم

ارسال ایمیل با فرم

<!DOCTYPE html>
<html>
<body>

<h2>Send e-mail to someone@example.com:</h2>

<form action="mailto:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

</body>
</html>

مشاهده مثال

لیست صفات <form> :

صفت	توضیحات
accept-charset	تعیین مجموعه کاراکتر های مورد استفاده در فرم ثبت شده (پیش فرض : کاراکتر های صفحه)
action	تعیین آدرس صفحه ای که فرم باید در آن ثبت شود ( پیش فرض : صفحه ثبت فرم)
autocomplete	تعیین روشن یا خاموش بودن قابلیت تکمیل خودکار فرم (پیش فرض : روشن)
enctype	تعیین نحوه کدگذاری داده های ارسالی فرم (پیش فرض : مانند url)
method	تعیین متد HTTP به هنگام ثبت فرم ( پیش فرض : GET )
name	تعیین یک نام برای شناسایی فرم
novalidate	تعیین اینکه نیازی به اعتبارسنجی داده های فرم وجود ندارد
target	تعیین هدف آدرس در صفت action