٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

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

از فرم HTML برای جمع آوری ورودی کاربر استفاده می شود. ورودی کاربر اغلب برای پردازش به یک سرور ارسال می شود. عنصر <form> از <form>عنصر HTML برای ایجاد فرم HTML برای ورودی کاربر استفاده می شود: <form> . form elements . </form> این <form>عنصر…

محمد یوسفی

1 جولای 2021

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


عنصر <form>

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

<form>
.
form elements
.
</form>

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


عنصر <input>

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

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

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

فیلدهای متن

<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 بالا در یک مرورگر نمایش داده می شود:

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


عنصر <برچسب>

به استفاده از <label>عنصر در مثال بالا توجه کنید.

این <label>برچسب برای بسیاری از عناصر فرم یک برچسب را تعریف می کند.

این <label>عنصر برای کاربران صفحه خوان مفید است ، زیرا خواننده صفحه با تمرکز کاربر بر روی عنصر ورودی ، برچسب را با صدای بلند می خواند.

این <label>عنصر همچنین به کاربرانی که در کلیک کردن روی مناطق بسیار کوچک (مانند دکمه های رادیویی یا کادرهای تأیید) مشکل دارند ، کمک می کند – زیرا وقتی کاربر متن را در داخل <label>عنصر کلیک می کند ، دکمه / جعبه رادیو را ضامن می کند.

forصفت از <label>تگ باید به برابر باشد idصفت از <input> عنصر به آنها پیوند می دهد.


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

<input type="radio">یک دکمه رادیویی تعریف می کند.

دکمه های رادیویی به کاربر اجازه می دهد یکی از تعداد محدودی گزینه را انتخاب کند.

مثال

فرم با دکمه های رادیویی:

<p>Choose your favorite Web language:</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>

کادرهای تأیید

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

کادرهای تأیید به کاربر اجازه می دهند گزینه های صفر یا بیشتر از تعداد محدودی گزینه را انتخاب کند.

مثال

فرم با کادرهای انتخاب:

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

دکمه ارسال

<input type="submit">یک دکمه برای ارسال داده های فرم را به یک فرم کنترل تعریف می کند.

فرم-اداره کننده معمولاً فایلی در سرور است که دارای اسکریپتی برای پردازش داده های ورودی است.

فرم دهنده در action ویژگی فرم مشخص شده است .

مثال

فرم با دکمه ارسال:

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

توجه داشته باشید که هر قسمت ورودی باید یک nameویژگی برای ارسال داشته باشد.

اگر nameصفت حذف شود ، مقدار فیلد ورودی اصلاً ارسال نمی شود.

مثال

این مثال مقدار فیلد ورودی “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>

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها