چگونه می توان پنجره جدید در HTML ایجاد کرد؟


آموزش بعدی آموزش قبلی

عنصر <form>

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

.

</form>

عنصر <form> ظرفی برای انواع مختلف عناصر ورودی است ، مانند: زمینه های متن ، کادرهای تأیید ، دکمه های رادیویی ، دکمه های ارسال و غیره.

تمام عناصر مختلف فرم در این فصل آورده شده است: عناصر فرم HTML.

________________________________________

عنصر <input>

عنصر HTML <input> پرکاربردترین عنصر شکل است.

یک عنصر <input> بسته به ویژگی نوع ، از بسیاری جهات قابل نمایش است.

در اینجا چند نمونه آورده شده است:

نوع توصیف

<input type = “text”> یک قسمت ورودی متن تک خطی را نمایش می دهد

<input type = “radio”> یک دکمه رادیو را نمایش می دهد (برای انتخاب یکی از بسیاری از گزینه ها)

<input type = “checkbox”> کادر تأیید را نمایش می دهد (برای انتخاب صفر یا بیشتر از بسیاری از گزینه ها)

<input type = “submit”> دکمه ارسال را نمایش می دهد (برای ارسال فرم)

<input type = “button”> دکمه قابل کلیک را نمایش می دهد


Text Fields کادرهای متنی

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

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

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

چک باکس ها Checkboxes

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

دکمه ارسال Submission Button
دکمه ای را برای ارسال داده های فرم به یک فرم دهنده کنترل می کند.
فرم-اداره کننده معمولاً فایلی در سرور است که دارای اسکریپت پردازش داده های ورودی است.
فرم دهنده در ویژگی عمل فرم مشخص شده است.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

ویژگی نام برای <input>
توجه داشته باشید که هر قسمت ورودی باید دارای ویژگی نام باشد تا ارسال شود.
اگر ویژگی نام حذف شود ، مقدار فیلد ورودی اصلاً ارسال نمی شود.
مثال
این مثال مقدار فیلد ورودی “First name” را ارسال نمی کند:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

صفات فرم HTML


این فصل ویژگی های مختلف عنصر HTML را توصیف می کند.


صفت Action
صفت action عملیاتی را که باید هنگام ارسال فرم انجام شود ، تعریف می کند.
معمولاً وقتی کاربر روی دکمه ارسال کلیک می کند ، داده های فرم به پرونده ای در سرور ارسال می شود.
در مثال زیر ، داده های فرم به فایلی به نام “action_page.php” ارسال می شود. این پرونده شامل یک اسکریپت سمت سرور است که داده های فرم را مدیریت می کند:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

صفت target
ویژگی target مشخص می کند که پاسخی را که پس از ارسال فرم دریافت می شود ، نمایش دهد.
ویژگی target می تواند یکی از مقادیر زیر را داشته باشد:

blank_ پاسخ در یک پنجره یا برگه جدید نمایش داده می شود self پاسخ در پنجره فعلی نمایش داده می شود
parent_ پاسخ در کادر والدین نمایش داده می شود
top_ پاسخ در بدنه کامل پنجره نمایش داده می شود
framename_ پاسخ در یک iframe نامگذاری شده نمایش داده می شود.

مقدار پیش فرض _ self است که به این معنی است که پاسخ در پنجره فعلی باز می شود.
مثال
در اینجا ، نتیجه ارسال شده در یک برگه مرورگر جدید باز می شود:

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

ویژگی method
مشخصه روش ، روش HTTP را مشخص می کند تا هنگام ارسال داده های فرم ، از آن استفاده شود.
داده های فرم را می توان به عنوان متغیرهای GET یا به عنوان معامله POST ارسال کرد.
روش پیش فرض HTTP هنگام ارسال داده های فرم GET است.
مثال
این مثال هنگام ارسال داده های فرم از روش GET استفاده می کند:

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

مثال
این مثال هنگام ارسال داده های فرم از روش POST استفاده می کند:

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

یادداشت های مربوط به GET:
• داده های فرم را به دو جفت نام / مقدار به URL اضافه می کند
• هرگز از GET برای ارسال اطلاعات حساس استفاده نکنید! (داده های فرم ارسالی در URL قابل مشاهده است!)
• طول یک URL محدود است (2048 نویسه)
• برای ارسال فرم در مواردی که کاربر بخواهد نتیجه را علامت گذاری کند مفید است
• GET برای داده های غیر ایمن مانند رشته های جستجوی Google مفید است
یادداشت ها در مورد POST:
• داده های فرم را در قسمت اصلی درخواست HTTP ضمیمه می کند (داده های فرم ارسالی در URL نشان داده نمی شود)
• POST محدودیتی در اندازه ندارد و می تواند برای ارسال مقدار زیادی داده استفاده شود.
• فرم های ارسالی با POST را نمی توان نشانه گذاری کرد.

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>