• آموزش html
  • تهران کد

سایر تگ ها در فرم

اکتبر 23, 2017adminskآموزش htmlبدون دیدگاه

تگ <select>

از این تگ برای ایجاد فرم باز شو با انتخاب های مختلف استفاده می گردد:

برای قرار دادن یک option به صورت پیش فرض کافی است عبارت selected را درون تگ <option> بگذاریم.

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  <select name="cars">
    <option value="volvo" selected>Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br> <br><br> <br>
  <input type="submit">
</form>
</body>
</html>

خروجی:

تگ select در html

تگ <textarea>

این تگ امکان ایجاد ورودی متن به صورت چند خطی را می دهد. با اتریبیوت row  میتوان تعداد سطر ها یا ارتفاع ورودی متن را مشخص کرد و همچنین با اتریبیوت col می توان طول ورودی متن را مشخص نمود.

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br>
  <input type="submit">
</form>
</body>
</html>

خروجی:

text area در html

تگ <button>

توسط این المان می توان یک دکمه ایجاد نمود. می توان این تگ  را  خارج از تگ <form> نیز استفاده نمود.

<!DOCTYPE html>
<html>
<body>
<button type="button">Click Me!</button>
</body>
</html>

خروجی:

ایجاد دکمه در html

آشنایی با دو تگ جدید در فرم با html5

  • <datalist>
  • <output>

تگ <datalist>

با این تگ می تواندر یک فرم ورودی مقادیری را متناسب با کلمات ورودی حدس زد و به کاربر امکان انتخاب انرا داد.

برای مثال در کد زیر با وارد کردن حرف c در ورودی کلمه chrome به شما پیشنهاد داده می گردد چرا که در ساختار کلمه chrome حرف c بکار رفته است. برای درک بهتر به مثال زیر و خروجی آن توجه فرمایید:

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>
</body>
</html>

مشاهده خروجی و ویرایش آنلاین

تگ <output>

با این تگ می توان حاصل محاسبات را نمایش داد. در مثال زیر به کمک این تگ مجموع اعداد یک ورودی عددی و یک ورودی به سبک range را نمایش می دهیم:

<!DOCTYPE html>
<html>
<body>
<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>
<p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet Explorer and earlier versions.</p>
</body>
</html>

خروجی:

مشاهده خروجی و ویرایش آنلاین

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بخش بندی آموزش HTML

  • آموزش html مقدمه
  • شروع کار با HTML در رایانه شخصی
  • مفاهیم پایه‌ای HTML
  • المان های HTML
  • صفت یا اتریبیوت ها در HTML
  • تگ های عنوان در HTML
  • پاراگراف ها در HTML
  • استایل دهی مستقیم به تگ ها
  • فرمت دهی به متن در HTML
  • نقل قول و عناصر استنادی در HTML
  • رنگ ها در html
  • css در HTML
  • لینک ها در HTML
  • عکس ها در HTML
  • جدول ها در HTML
  • لیست ها در html
  • المان های block و inline
  • تگ iframe در html
  • تگ script در HTML
  • تگ head در html
  • صفحه چینی در html
  • HTML واکنشگرا
  • کاراکتر های رزرو شده
  • فرم ها در HTML
  • سایر تگ ها در فرم
  • input type های مختلف در فرم
  • اتریبیوت های فرم
  • ویدیو در HTML
  • پخش صدا در html