خانه / آموزش HTML / بخش سی و سوم-عناصر فرم HTML

مهندس زهرا بهرامی

تاریخ بروزرسانی: ۱۱ آذر ۱۳۹۷ تعداد بازدید : 15 بازدید بدون دیدگاه

بخش سی و سوم-عناصر فرم HTML

قدم قبلی >

< قدم بعدی

در این آموزش html به معرفی عناصر فرم HTML می پردازیم.

در این فصل تمام عناصر فرم HTML را معرفی میکنیم.

عنصر input

مهمترین عنصر فرم، عنصر <input> است.

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

<input name="firstname" type="text">

1	<input name="firstname" type="text">

اگر نوع ویژگی حذف شود، فیلد ورودی نوع پیش فرض را می گیرد: “text”.

تمام انواع ورودی های مختلف در فصل بعدی پوشش داده می شود.

عنصر select

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

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<option value="volvo">Volvo</option>

</select>

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

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

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

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

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

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

از مقدار اندازه برای مشخص کردن تعداد مقادیر قابل مشاهده استفاده کنید:

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

<option value="volvo">Volvo</option>

</select>

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

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

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

<option value="volvo">Volvo</option>

</select>

عنصر textarea

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

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

The cat was playing in the garden.

</textarea>

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

خصیصه cols مشخص عرض عرض یک ناحیه متن را مشخص می کند.

این چگونگی کد HTML بالا در مرورگر نمایش داده می شود.

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

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

The cat was playing in the garden.

</textarea>

عنصر button

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

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

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

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

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

عناصر فرم HTML5

HTML5 عناصر فرم زیر را اضافه کرد:

<datalist>
<output>

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

عنصر datalist

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

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

خصیصه لیست عنصر <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>

</datalist>

</form>

عنصر output

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

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