عناصر فرم در HTML

عنصر <input>

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

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

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

مثال :

صفت selected
<option value="fiat" selected>Fiat</option>
مشاهده مثال

 

عنصر <textarea>

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

مثال :

عنصر textarea
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
مشاهده مثال


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

عنصر <button>

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

مثال :

عنصر button
<button type="button" onclick="alert('Hello World!')">Click Me!
مشاهده مثال


در HTML5 عناصر جدید فرم به شرح زیر است :
 

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



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

عنصر <datalist>

این عنصر لیستی از گزینه های از قبل تعریف شده برای عنصر <input> تعریف می کند. کاربران حین تایپ کردن و ورود داده ، لیستی از گزینه های از قبل تعریف شده را بصورت کشویی مشاهده خواهند کرد.
صفت list عنصر <input> باید به صفت id عنصر <datalist> ارجاع داده شود.

مثال :

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

مثال :

عنصر keygen
<form action="/action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</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>
مشاهده مثال

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب بپیوندید

   
   
عضویت
پیام تستی برای وبساز