تگ <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>
خروجی:
تگ <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>
خروجی:
تگ <button>
توسط این المان می توان یک دکمه ایجاد نمود. می توان این تگ را خارج از تگ <form> نیز استفاده نمود.
<!DOCTYPE html> <html> <body> <button type="button">Click Me!</button> </body> </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>
خروجی: