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

input type های مختلف در فرم

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

ایجاد فرم برای وارد کردن پسورد

با قرارا دادن عبارت 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>

خروجی:

ایجاد فرم پسورد در 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>

خروجی:

ایجاد چک باکس در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>

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

 

 

 

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

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

بخش بندی آموزش 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