ایجاد فرم برای وارد کردن پسورد
با قرارا دادن عبارت password در اتریبیوت type فرم پسورد ساخته می شود که کاراکتر های ورودی خود را به صورت دایره های مشکی کوچک نمایش می دهد.
<!DOCTYPE html> <html> <body> <form action=""> User name:<br> <input type="text" name="userid"> <br> User password:<br> <input type="password" name="psw"> </form> <p>The characters in a password field are masked (shown as asterisks or circles).</p> </body> </html>
خروجی:
دکمه ریست کردن فرم
به کمک این دکمه می توان فرم را به حالت پیش فرض دراورده و تمام اطلاعات وارد شده را پاک کرد.
<!DOCTYPE html> <html> <body> <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> <input type="reset"> </form> <p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p> </body> </html>
ایجاد چک باکس در فرم
با قرار دادن غبارت checkbox در اتریبیوت type میتوان چک باکس ایجاد نمود.
<!DOCTYPE html> <html> <body> <form action="/action_page.php"> <input type="checkbox" name="vehicle1" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle2" value="Car">I have a car <br><br> <input type="submit"> </form> </body> </html>
خروجی:
input type های جدید درHTML5
انتخابگر رنگ
با قرار دادن عبارت color برای اتریبیوت type میتوان انتخابگر رنگ را به فرم افزود البته باید مرورگر وب شما آپدیت بوده و از این قابلیت پشتیبانی نماید.
<!DOCTYPE html> <html> <body> <p> Depending on browser support:<br> A color picker can pop-up when you enter the input field. </p> <form action="/action_page.php"> Select your favorite color: <input type="color" name="favcolor" value="#ff0000"> <input type="submit"> </form> <p><b>Note:</b> type="color" is not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions.</p> </body> </html>
انتخابگر تاریخ میلادی
این انتخابگر در مرورگر های IE و firefox پشتیبانی نمی گردد.
<!DOCTYPE html> <html> <body> <p> Depending on browser support:<br> A date picker can pop-up when you enter the input field. </p> <form action="/action_page.php"> Birthday: <input type="date" name="bday"> <input type="submit"> </form> <p><strong>Note:</strong> type="date" is not supported in Firefox, or Internet Explorer 11 and earlier versions.</p> </body> </html>
ورودی E-mail در فرم
با کمک این اتریبیوت اعتبار سنجی برای درست وارد شدن فرمت ایمیل در فرم ورودی اعمال می گردد.
<!DOCTYPE html> <html> <body> <form action="/action_page.php"> E-mail: <input type="email" name="email"> <input type="submit"> </form> <p> <b>Note:</b>type="email" is not supported in IE9 and earlier.</p> </body> </html>
انتخابگر تاریخ و زمان
استفاده از این قابلیت برای دریافت اطلاعات دقیق تاریخ تولد مناسب می باشد چرا که در یک فرم هم تاریخ و هم زمان را میتوان مشخص نمود.
این قابلیت تا تاریخ نگارش این مطلب در فیر فاکس پشتیبانی نمی گردد.
<!DOCTYPE html> <html> <body> <p> Depending on browser support:<br> A date picker can pop-up when you enter the input field. </p> <form action="/action_page.php"> Birthday (date and time): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Send"> </form> <p><strong>Note:</strong> type="datetime-local" is not supported in Firefox, or Internet Explorer 12 and earlier versions.</p> </body> </html>
ورودی عددی با محدود سازی
<!DOCTYPE html> <html> <body> <p>Numeric restrictions will apply in the input field:</p> <form action="/action_page.php"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>Note:</b> type="number" is not supported in IE9 and earlier.</p> </body> </html>
ایجاد range
<!DOCTYPE html> <html> <body> <p> Depending on browser support:<br> The input type "range" can be displayed as a slider control. </p> <form action="/action_page.php" method="get"> Points: <input type="range" name="points" min="0" max="10"> <input type="submit"> </form> <p> <b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions. </p> </body> </html>
ایجاد فرم search
<!DOCTYPE html> <html> <body> <form action="/action_page.php"> Search Google: <input type="search" name="googlesearch"> <input type="submit"> </form> </body> </html>