عنصر <input>

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

تمامی انواع ورودی ها را در درس بعدی مشاهده خواهید کرد.
 

عنصر <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> یک گزینه برای انتخاب ، تعریف می کند. بطور پیش فرض ، اولین آیتم در لیست کشویی انتخاب شده است. برای تعریف یک گزینه از قبل انتخاب شده ، صفت selected را به آن گزینه اضافه کنید :

مثال :

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

عنصر <textarea>

این عنصر یک فیلد متنی چند خطی تعریف می کند.

مثال :

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

عنصر <button>

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

مثال :

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

•     <datalist>
•     <keygen>
•     <output>

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

عنصر <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>

عنصر <keygen>

هدف از استفاده عنصر <keygen> ارائه روشی امن برای شناسایی کاربران می باشد. این عنصر یک فیلد مولد یک جفت کلید در فرم را تعریف می کند. زمانی که فرم ثبت می شود دو کلید تولید می شود ، یکی عمومی و یکی خصوصی.
کلید خصوصی بصورت محلی و کلید عمومی در سرور ذخیره می شود. کلید عمومی را می توان برای تولید یک مجوز کلاینت برای شناسایی کاربر در آینده استفاده کرد.

مثال :

<form action="/action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

عنصر <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>