021-20483015

فرم های HTML

عنصر <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

 

 

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط