عنصر <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 روی سرور پردازش شوند.

2-1
عناوین (Headings) در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/15
2-2
کامنت گذاری (Comment) و خطوط افقی (Horizontal Rule) در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/15
2-3
پاراگراف ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/15
2-4
تگ های فرمت دهی در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/22
2-5
پروژه وبلاگ: درباره من
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/02
2-6
عناصر HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/02
2-7
ویژگی‌ها (Attributes) در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/06
2-8
تصاویر در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/09
2-9
آزمون اول فصل دوم دوره HTML (لطفا وارد وبسایت شوید)
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/13
2-10
لیست ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/20
2-11
پروژه وبلاگ : مهارت‌های من
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/27
2-12
جدول‌ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/27
2-13
لینک‌ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/30
2-14
پروژه وبلاگ : برنامه‌ی من
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/05
2-15
عناصر Inline و Block در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/05
2-16
فرم‌ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/09
2-17
پروژه وبلاگ: فرم تماس
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/14
2-18
آزمون دوم فصل دو دوره HTML (لطفا وارد وبسایت شوید)
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/18
دوره در حال تکمیل است ... rocket