فرم‌ها در HTML | سکان آکادمی

عنصر <form>

از فرم‌ها برای جمع آوری اطلاعات از کاربر استفاده می‌شود. در HTML فرم‌ها با استفاده از تگ‌های باز و بسته‌ی <form>، تعریف می‌شوند:

<body>
<form></form> 
</body>

در ادامه به بررسی ویژگی‌های (attributes) این تگ می‌پردازیم:

ویژگی action

از ویژگی action برای ارسال داده‌های فرم استفاده می‌شود؛ در واقع مقدار ویژگی action (که یک URL است) تعیین می‌کند که داده‌ها باید پس از ثبت فرم به کجا ارسال شوند.

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


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

ویژگی method

ویژگی method، نوع HTTP ای را مشخص می‌کند که در هنگام ارسال فرم‌ها استفاده می‌شود. این ویژگی می‌تواند مقادیر GET یا POST را بپذیرد (مقدار پیش‌فرض GET است):

<form action="url" method="GET">

<form action="url" method="POST">

⚠️ وقتی از GET استفاده می‌شود، داده های فرم در آدرس صفحه (URL) قابل مشاهده خواهد بود. پس هیچ‌گاه از GET برای ارسال اطلاعات حساس (مانند رمز عبور) استفاده نمی‌شود؛ اما POST امنیت بهتری ارائه می دهد چرا که داده‌های ارسالی در آدرس صفحه قابل مشاهده نیستند.

عنصر <input>

معمولا برای دریافت ورودی کاربر در فرم، از عنصر <input> استفاده می شود. این عنصر پر استفاده ترین عنصر فرم است.

یک عنصر <input> را بسته به ویژگی type، می‌توان به روش‌های مختلفی نمایش داد. ویژگی type می‌تواند مقادیری مانند text ،password ،radio ،submit و .. باشد. در ادامه به مثال‌هایی از این مقادیر اشاره می‌کنیم:

مثال زیر فرم درخواست نام کاربری و رمز عبور را نشان می‌دهد:

<form>
  <label for="username" id="username">Username:</label><br>
  <input type="text" name="username"><br>
  <label for="password" id="password">Password:</label><br>
  <input type="password" name="password">
</form>

⚠️ویژگی name، نامی را برای یک فرم مشخص می‌کند.

همانطور که مشاهده می‌کنید، در این مثال مقدار text ،type بوده و کاربر مقادیر درخواستی را به صورت متنی وارد می کند.

اگر نوع ورودی (type) به radio تغییر داده شود، به کاربر این امکان را می‌دهد که تنها یکی از تعدادی گزینه را انتخاب کند:

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

نوع "checkbox" به کاربر اجازه می‌دهد تا بیش از یک گزینه را انتخاب کند:

<form>
  <input type="checkbox" name="gender" value="1">Male <br>
  <input type="checkbox" name="gender" value="2">Female <br>
</form>

⚠️ عنصر <input> هیچ تگ پایانی ندارد.

اگر مقدار type به submit تغییر داده شود، دکمه ثبت (submit) داده‌های فرم را به ویژگی action آن ارسال می کند:

<form action="/action_page.php">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="text" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form>

⚠️ پس از ارسال فرم، داده ها باید با استفاده از یک زبان برنامه نویسی مانند PHP روی سرور پردازش شوند.