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

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

آموزش عناصر فرم HTML

عناصر <form> HTML <form>عنصر HTML می تواند شامل یک یا چند عنصر شکل زیر باشد: <input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist> <output> <option> <optgroup> عنصر <input> یکی از پرکاربردترین عناصر شکل ، عنصر است <input>. <input>عنصر را می توان در راه…

محمد یوسفی

1 جولای 2021

عناصر <form> HTML

<form>عنصر HTML می تواند شامل یک یا چند عنصر شکل زیر باشد:

  • <input>
  • <label>
  • <select>
  • <textarea>
  • <button>
  • <fieldset>
  • <legend>
  • <datalist>
  • <output>
  • <option>
  • <optgroup>

عنصر <input>

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

<input>عنصر را می توان در راه های مختلفی نمایش داده شده، بسته به type ویژگی.

مثال

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

عنصر <برچسب>

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

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

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

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


عنصر <select> را انتخاب کنید

این <select>عنصر یک لیست کشویی را تعریف می کند:

مثال

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<option>عناصر گزینه ای است که می تواند انتخاب شود تعریف می کند.

به طور پیش فرض ، اولین مورد در لیست کشویی انتخاب می شود.

برای تعریف یک گزینه از پیش انتخاب شده ، selectedویژگی را به گزینه اضافه کنید:

مثال

<option value="fiat" selected>Fiat</option>

مقادیر قابل مشاهده:

از sizeویژگی برای تعیین تعداد مقادیر قابل مشاهده استفاده کنید:

مثال

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

اجازه انتخاب های چندگانه:

از multipleویژگی استفاده کنید تا به کاربر اجازه دهید بیش از یک مقدار را انتخاب کند:

مثال

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

عنصر <textarea>

این <textarea>عنصر یک فیلد ورودی چند خطی (یک منطقه متن) را تعریف می کند:

مثال

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

rowsویژگی تعداد قابل مشاهده خطوط در یک متن مشخص می کند.

colsویژگی عرض قابل مشاهده یک متن مشخص می کند.

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

با استفاده از CSS می توانید اندازه متن را نیز تعریف کنید:

مثال

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

عنصر <دکمه>

این <button>عنصر یک دکمه قابل کلیک را تعریف می کند:

مثال

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

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

توجه:type ویژگی را همیشه برای عنصر دکمه مشخص کنید. مرورگرهای مختلف ممکن است از انواع مختلف پیش فرض برای عنصر دکمه استفاده کنند.


عناصر <fieldset> و <legend>

این <fieldset>عنصر برای گروه بندی داده های مرتبط در یک فرم استفاده می شود.

<legend>عنصر یک عنوان برای تعریف <fieldset> عنصر.

مثال

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <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">
  </fieldset>
</form>

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


عنصر <datalist>

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

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

listصفت از <input>عنصر، باید به مراجعه idصفت از <datalist>عنصر.

مثال

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

عنصر <خروجی>

این <output>عنصر نتیجه محاسبه را نشان می دهد (مانند آنچه توسط اسکریپت انجام می شود).

مثال

یک محاسبه را انجام دهید و نتیجه را در یک <output>عنصر نشان دهید:

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

منبع

مطالب مرتبط

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