آموزش فرم ها در HTML

از یک فرم(form) در HTML برای جمع آوری ورودی از کاربر استفاده می شود. ورودی های کاربر، اغلب برای پردازش، به یک سرور ارسال می شوند.

بررسی عنصر <form> در HTML

از عنصر <form> در HTML برای ایجاد یک فرم برای دریافت ورودی های کاربر استفاده می شود:

<form>

عناصر فرم

</form>

عنصر <form> یک ظرف برای نگهداری انواع مختلف عناصر ورودی(input) مانند موارد زیر است:

• فیلدهای متنی(text fields)
• چک باکس ها(checkboxes)
• دکمه های رادیویی(radio buttons)
• دکمه های ارسال یا سابمیت(submit buttons)

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

 بررسی عنصر <input> در HTML

ما از عنصر <input> در عنصر فرم(form) بیشترین استفاده را می بریم. یک عنصر <input> را می توانیم به روش های مختلفی نمایش دهیم، و این، به مقدار خصوصیت type از عنصر <input> بستگی دارد. به مثال های زیر توجه کنید:

 در این فصل از سایت W3schools تمام نوع های ورودی، توضیح داده شده اند.

فیلدهای متنی در HTML

عبارت <input type="text"> برای متن ورودی، یک فیلدِ ورودی تعریف می کند.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form> 

 کد HTML بالا، به صورت زیر در مرورگر نمایش داده می شود:

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

استفاده از عنصر <label> در فرم های HTML

به کاربرد عنصر <label> در مثال بالا توجه کنید. از عنصر <label> برای مشخص کردن برچسب عناصر استفاده می شود. عنصر <label> برای صفحه خوان ها(screen-reader) مفید است.زیرا وقتی که کاربر روی عنصر input کلیک کند یا لمس کند، این پیغام در دستگاه فرد نابینا یا کم بینا قرائت می شود.

عنصر <label> همچنین برای کسانی که در کلیک کردن بر روی ناحیه های کوچک مشکل دارند(مانند دکمه های رادیویی یا چک باکس ها) مفید است. زیرا وقتی این کاربر، بر روی متن داخل عنصر <label> کلیک می کند، دکمه رادیویی یا چک باکس انتخاب می شود. خصوصیتِ for در تگ <label> باید با خصوصیت id عنصرِ <input> برابر باشد تا آنها به هم متصل شوند.

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

با استفاده از تگ <input type="radio"> می توانیم یک دکمه ی رادیویی را تعریف کنیم. دکمه های رادیویی به کاربر امکان می دهند تا از یک تعداد دکمه ی محدود، یکی را انتخاب کند.

 <p>زبان برنامه نویسی وب خود را انتخاب کنید:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form> 

کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

زبان برنامه نویسی وب خود را انتخاب کنید:

آموزش چک باکس ها در HTML

با استفاده از تگ <input type="checkbox"> یک چک باکس تعریف می شود. چک باکس ها به کاربر امکان می دهند تا از یک تعداد گزینه ی محدود، هیچ، یا چند مورد را انتخاب کند.

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> حافظ</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> سعدی</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> مولانا</label><br><br>
  <input type="submit" value="ارسال">
</form>

کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

دکمه ی ارسال یا Submit در HTML

با استفاده از عبارت <input type="submit"> یک دکمه برای ارسال اطلاعات فرم به یک اسکریپتِ به کار برنده(form-handler) استفاده می شود. آدرس این اسکریپت به کار برنده در داخل خصوصیت action از فرم قرار می گیرد:

<form action="/action_page.php">
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" value="احسان"><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname" value="عباسی"><br><br>
  <input type="submit" value="ارسال">
</form>

استفاده از خصوصیت name برای تگ <input>

توجه کنید که هر تگ input باید یک خصوصیت name داشته باشد تا بتواند اطلاعات خود را ارسال(submit) کند. اگر خصوصیت name از قلم انداخته شود، مقدارِ این فیلدِ input  به هیچ وجه ارسال نخواهد شد.

<form action="/action_page.php">
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" value="احسان"><br><br>
  <input type="submit" value="ارسال">
</form>