Input های جدید در HTML5

Input های HTML5

همزمان با معرفی HTML5 انواع مختلفی از input ها نیز به توسعه دهندگان معرفی شد تا بتوانند با استفاده از آن ها برنامه های کاربردی تر و راحت تری بنویسند. آن ها عبارت اند از:

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

نکته: از آن جایی که این نوع input ها نسبتا جدید تر هستند ممکن است در تمام مروگر ها کار نکنند. اگر input ای در مرورگری پشتیبانی نشود، به جای آن یک فیلد خالی از نوع <"input type="text> نمایش داده خواهد شد.

Input های رنگی

این نوع از input ها به صورت <"input type="color> مشخص می شوند و کارشان ایجاد فیلد هایی است که رنگ خاصی را انتخاب کنند. اگر مرورگر کاربر از این input پشتیبانی کند یک color picker برای کاربر نمایش داده خواهد شد:

<!DOCTYPE html>
<html>
<body>

<h2>Color Picker</h2>
<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<p dir='rtl'>رنگ مورد نظرتان را انتخاب کنید</p>

<form dir='rtl' action="/action_page.php">
  <input type="color" name="favcolor" value="#ff0000">
  <input type="submit" value='ارسال رنگ'>
</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و safari 9.1 و نسخه های قبلی این دو مرورگر پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

Input های تاریخ

input های نوع <"input type="date> فیلد هایی مخصوص نگه داری تاریخ می سازند. اگر مرورگر کاربر از آن پشتیبانی کند یک date picker نمایش داده خواهد شد:

<!DOCTYPE html>
<html>
<body>

<h2>Date Field</h2>
<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>
<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.<p>

<form dir='rtl' action="/action_page.php">
  تاریخ تولد:
  <input type="date" name="bday">
  <input type="submit" Value='ارسال فرم'>
</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

شما همچنین می توانید از attribute های min و max استفاده کنید تا محدودیت هایی را برای این تاریخ ایجاد کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Date Field Restrictions</h2>
<p>Use the min and max attributes to add restrictions to dates:</p>

<form dir='rtl' action="/action_page.php">
تاریخی قبل از سال 1980-01-01 را انتخاب کنید:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
تاریخی بعد از سال 2000-01-01 را انتخاب کنید:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit" value='ارسال فرم'> 
</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

Input های Datetime-local

این نوع از input ها با <"input type="datetime-local> مشخص شده و کار آنها دریافت ساعت و تاریخ (بدون هر گونه time zone - منطقه ی زمانی) می باشد:

<!DOCTYPE html>
<html>
<body>

<h2>Local Date Field</h2>
<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>
<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 dir='rtl'>این قابلیت در internet explorer 12 و نسخه های قبلی آن و همچنین در  safari و firefox پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

Input های ایمیل

این نوع input ها با <"input type="email> مشخص می شوند و کارشان دریافت ایمیل کاربران است. این نوع input ها معمولا از نظر ظاهری دقیقا شبیه به فیلدهای متنی ساده هستند و تنها تفاوتشان در این است که آدرس ایمیل کاربر را validate می کنند؛ یعنی چک می کنند که آدرس ایمیل نامعتبر نباشد و از الگوی صحیح پیروی کند.

همچنین برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید "com." را اضافه کنند.

<!DOCTYPE html>
<html>
<body>

<h2>Email Field</h2>
<p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p>

<form action="/action_page.php">
  E-mail:
  <input type="email" name="email">
  <input type="submit">
</form>

<p dir='rtl'>
<b>هشدار:</b>این قابلیت در Internet Explorer 9 و نسخه های قبل از آن پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

سعی کنید در خروجی بالا یک ایمیل نا معتبر (مانند example.com یا example یا example.com@me و ...) وارد کنید. خواهید دید که فرم ثبت نخواهد شد و به جای آن یک هشدار به شما نمایش داده می شود.

Input های فایل

کار این نوع input ها که با <"input type="file> مشخص می شوند دریافت فایل های کاربر است. در صورتی که نیاز باشد کاربر فایلی را روی سرور شما آپلود کند (مانند تصویر پروفایل) می توانید از این نوع input استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<h1>File upload</h1>

<p>Show a file-select field which allows a file to be chosen for upload:</p>
  <br>
<form dir='rtl' action="/action_page.php">
  یک فایل انتخاب کنید: 
  <input type="file" name="myFile"><br><br>
  <input type="submit" Value='ارسال فرم'>
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

Input های ماه

نوع <"input type="month> به کاربر اجازه می دهد که یک ماه و سال را انتخاب کند:

<!DOCTYPE html>
<html>
<body>

<h2>Month Field</h2>
<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>
<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 (month and year):
  <input type="month" name="bdaymonth">
  <input type="submit">
</form>

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

Input های عددی

این نوع input ها که به صورت <"input type="number> مشخص می شوند به کاربر اجازه میدهند که در یک فیلد تنها از اعداد استفاده کند. شما می توانید با min و max حداقل و حداکثر اعداد مجاز را نیز تعیین کنید.

در مثال زیر به مرورگر گفته ایم که کاربر حق دارد یک عدد بین 1 و 5 را انتخاب کند:

<!DOCTYPE html>
<html>
<body>

<h2>Number Field</h2>
<p>The <strong>input type="number"</strong> defines a numeric input field.</p>
<p>You can use the min and max attributes to add numeric restrictions 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 dir='rtl'><b>هشدار:</b> این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

Input های محدوده

این نوع input ها با <"input type="range> مشخص می شوند و کارشان تعیین عددی است که مقدار دقیق آن برای ما مهم نیست (مانند slider ها). حد پیش فرض آن از 0 تا 100 است اما شما می توانید آن را تغییر دهید:

<!DOCTYPE html>
<html>
<body>

<h2>Range Field</h2>
<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" value='ارسال فرم'>
</form>

<p dir='rtl'>
<b>هشدار:</b>
این قابلیت در internet explorer 9 و نسخه های قبل تر از آن پشتیبانی نمی شود.
</p>

</body>
</html>

مشاهده ی خروجی در JSBin

Input های جست و جو

این نوع input ها با <"input type="search> مشخص می شوند و فیلدهایی برای قسمت جست و جو در سایت شما هستند:

<!DOCTYPE html>
<html>
<body>

<h2>Search Field</h2>
<p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text field):</p>

<form action="/action_page.php">
  Search Google:
  <input type="search" name="googlesearch">
  <input type="submit">
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

این input ها از نظر کارکرد و از نظر ظاهر هیچ تفاوتی با فیلد های متنی ساده ندارند. تفاوت اصلی در بحث semantics و درک موتور های جست و جو از سایت شما است.

Input های تلفن

این نوع input ها که با <"input type="tel> مشخص می شوند مسئولیت دریافت شماره تلفن کاربران را دارند:

<!DOCTYPE html>
<html>
<body>

<h2>Telephone Field</h2>
<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>

<form action="/action_page.php">
Telephone: <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
<input type="submit">
<span>Format: 123-45-678</span>
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

احتمالا متوجه قسمت "{pattern="[0-9]{3}-[0-9]{2}-[0-9]{3 نشده اید. از آنجا که هر کشوری الگوی شماره تلفن های مخصوص خودش را دارد شما می توانید این الگو را بر اساس شماره تلفن های کشور خودتان تنظیم کنید. در الگوی بالا گفته شده است {3}[0-9] که یعنی 3 رقم اول شماره تلفن می توانند شامل اعداد 0 تا 9 (همه ی اعداد) بشوند. سپس دو رقم بعدی و در آخر سه رقم بعدی را مشخص کرده ایم. شما می توانید سعی کنید این الگو را مطابق با ایران طراحی کنید.

Input های زمان

این نوع input ها با <"input type="time> مشخص می شوند و به کاربر اجازه می دهند که بدون ذکر هیچ time zone یا منطقه ی زمانی، یک زمان خاص را انتخاب کند:

<!DOCTYPE html>
<html>
<body>

<h2>Time Field</h2>
<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>

<p>Depending on browser support:<br>A time picker might pop-up when you enter the input field.</p>

<form action="/action_page.php">
  Select a time:
  <input type="time" name="usr_time">
  <input type="submit">
</form>

<p dir='rtl'>این قابلیت در internet explorer 12 و نسخه های قبل تر آن و همچنین در safari پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

Input های URL

این نوع input ها به صورت <"input type="url> مشخص می شوند و مسئولیت دریافت یک آدرس اینترنتی (URL) را دارند. برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید "com." را اضافه کنند:

<!DOCTYPE html>
<html>
<body>

<h2>URL Field</h2>
<p>The <strong>input type="url"</strong> is used for input fields that should contain a URL address:</p>

<form action="/action_page.php">
  Add your homepage:
  <input type="url" name="homepage">
  <input type="submit">
</form>

<p dir='rtl'>این قابلیت در internet explorer 9 و نسخه های قبل آن پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

کار اصلی این نوع فیلد validate کردن داده ی کاربر است؛ یعنی چک می کند تا ببیند آیا آدرس URL ای که کاربر وارد کرده است دارای الگوی صحیحی است یا خیر. می توانید این مورد را در خروجی بالا چک کنید.

Input های هفته

این نوع input ها به صورت <"input type="week> نوشته می شوند و به کاربر اجازه می دهند تا یک هفته و یک سال را انتخاب کند:

<!DOCTYPE html>
<html>
<body>

<h2>Week Field</h2>
<p>The <strong>input type="week"</strong> allows the user to select a week and year:</p>
<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

<form action="/action_page.php">
  Select a week:
  <input type="week" name="year_week">
  <input type="submit">
</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

front-end developer

26 آبان 1400

با سلام سایت فوق العاده ای دارید هر مبحثی را به طور کامل توضیح داده اید. من برای جمع بندی و نکات تکمیلی همیشه به سایت شما مراجعه میکنم. با آرزوی موفقیت برای شما و سایت بسیار خوبتون