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 برای کاربر نمایش داده خواهد شد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>Color Picker</h2>
<p>The<strong>input type="color"</strong>isused forinput fields that should containacolor.</p>
<pdir='rtl'>رنگموردنظرتانراانتخابکنید</p>
<form dir='rtl'action="/action_page.php">
<input type="color"name="favcolor"value="#ff0000">
<input type="submit"value='ارسال رنگ'>
</form>
<pdir='rtl'>اینقابلیتدرinternet explorer11وsafari9.1ونسخههایقبلیایندومرورگرپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Input های تاریخ
input های نوع <"input type="date> فیلد هایی مخصوص نگه داری تاریخ می سازند. اگر مرورگر کاربر از آن پشتیبانی کند یک date picker نمایش داده خواهد شد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>Date Field</h2>
<p>The<strong>input type="date"</strong>isused forinput fields that should containadate.</p>
<p>Depending on browser support:<br>Adate 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>
<pdir='rtl'>اینقابلیتدرinternet explorer11ونسخههایقبلیآنوهمچنیندرsafariپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شما همچنین می توانید از attribute های min و max استفاده کنید تا محدودیت هایی را برای این تاریخ ایجاد کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<body>
<h2>Date Field Restrictions</h2>
<p>Usethe min andmax attributes toadd restrictions todates:</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>
<pdir='rtl'>اینقابلیتدرinternet explorer11ونسخههایقبلیآنوهمچنیندرsafariپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Input های Datetime-local
این نوع از input ها با <"input type="datetime-local> مشخص شده و کار آنها دریافت ساعت و تاریخ (بدون هر گونه time zone – منطقه ی زمانی) می باشد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>Local Date Field</h2>
<p>The<strong>input type="datetime-local"</strong>specifiesadate andtime input field,with no time zone.</p>
<p>Depending on browser support:<br>Adate picker can pop-up when you enter the input field.</p>
<form action="/action_page.php">
Birthday(date andtime):
<input type="datetime-local"name="bdaytime">
<input type="submit"value="Send">
</form>
<pdir='rtl'>اینقابلیتدرinternet explorer12ونسخههایقبلیآنوهمچنیندر safariوfirefoxپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Input های ایمیل
این نوع input ها با <"input type="email> مشخص می شوند و کارشان دریافت ایمیل کاربران است. این نوع input ها معمولا از نظر ظاهری دقیقا شبیه به فیلدهای متنی ساده هستند و تنها تفاوتشان در این است که آدرس ایمیل کاربر را validate می کنند؛ یعنی چک می کنند که آدرس ایمیل نامعتبر نباشد و از الگوی صحیح پیروی کند.
همچنین برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید “com.” را اضافه کنند.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>Email Field</h2>
<p>The<strong>input type="email"</strong>isused forinput fields that should contain ane-mail address:</p>
<form action="/action_page.php">
E-mail:
<input type="email"name="email">
<input type="submit">
</form>
<pdir='rtl'>
<b>هشدار:</b>اینقابلیتدرInternet Explorer9ونسخههایقبلازآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
سعی کنید در خروجی بالا یک ایمیل نا معتبر (مانند example.com یا example یا example.com@me و …) وارد کنید. خواهید دید که فرم ثبت نخواهد شد و به جای آن یک هشدار به شما نمایش داده می شود.
Input های فایل
کار این نوع input ها که با <"input type="file> مشخص می شوند دریافت فایل های کاربر است. در صورتی که نیاز باشد کاربر فایلی را روی سرور شما آپلود کند (مانند تصویر پروفایل) می توانید از این نوع input استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<h1>File upload</h1>
<p>Showafile-select field which allowsafile tobe chosen forupload:</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> به کاربر اجازه می دهد که یک ماه و سال را انتخاب کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>Month Field</h2>
<p>The<strong>input type="month"</strong>allows the user toselectamonth andyear.</p>
<p>Depending on browser support:<br>Adate picker can pop-up when you enter the input field.</p>
<form action="/action_page.php">
Birthday(month andyear):
<input type="month"name="bdaymonth">
<input type="submit">
</form>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer11ونسخههایقبلیآنوهمچنیندرsafariوfirefoxپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Input های عددی
این نوع input ها که به صورت <"input type="number> مشخص می شوند به کاربر اجازه میدهند که در یک فیلد تنها از اعداد استفاده کند. شما می توانید با min و max حداقل و حداکثر اعداد مجاز را نیز تعیین کنید.
در مثال زیر به مرورگر گفته ایم که کاربر حق دارد یک عدد بین 1 و 5 را انتخاب کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>Number Field</h2>
<p>The<strong>input type="number"</strong>definesanumeric input field.</p>
<p>You can usethe min andmax attributes toadd numeric restrictions inthe input field:</p>
<form action="/action_page.php">
Quantity(between1and5):
<input type="number"name="quantity"min="1"max="5">
<input type="submit">
</form>
<pdir='rtl'><b>هشدار:</b>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Input های محدوده
این نوع input ها با <"input type="range> مشخص می شوند و کارشان تعیین عددی است که مقدار دقیق آن برای ما مهم نیست (مانند slider ها). حد پیش فرض آن از 0 تا 100 است اما شما می توانید آن را تغییر دهید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<p>Depending on browser support:<br>The input type"range"can be displayed asaslider control.<p>
<form action="/action_page.php"method="get">
Points:
<input type="range"name="points"min="0"max="10">
<input type="submit"value='ارسال فرم'>
</form>
<pdir='rtl'>
<b>هشدار:</b>
اینقابلیتدرinternet explorer9ونسخههایقبلترازآنپشتیبانینمیشود.
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Input های جست و جو
این نوع input ها با <"input type="search> مشخص می شوند و فیلدهایی برای قسمت جست و جو در سایت شما هستند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<body>
<h2>Search Field</h2>
<p>The<strong>input type="search"</strong>isused forsearch fields(behaves likearegular 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> مشخص می شوند مسئولیت دریافت شماره تلفن کاربران را دارند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<body>
<h2>Telephone Field</h2>
<p>The<strong>input type="tel"</strong>isused forinput fields that should containatelephone 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 یا منطقه ی زمانی، یک زمان خاص را انتخاب کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<body>
<h2>Time Field</h2>
<p>The<strong>input type="time"</strong>allows the user toselectatime(no time zone):</p>
<p>Depending on browser support:<br>Atime picker might pop-up when you enter the input field.</p>
<form action="/action_page.php">
Selectatime:
<input type="time"name="usr_time">
<input type="submit">
</form>
<pdir='rtl'>اینقابلیتدرinternet explorer12ونسخههایقبلترآنوهمچنیندرsafariپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Input های URL
این نوع input ها به صورت <"input type="url> مشخص می شوند و مسئولیت دریافت یک آدرس اینترنتی (URL) را دارند. برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید “com.” را اضافه کنند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>URL Field</h2>
<p>The<strong>input type="url"</strong>isused forinput fields that should containaURL address:</p>
<form action="/action_page.php">
Add your homepage:
<input type="url"name="homepage">
<input type="submit">
</form>
<pdir='rtl'>اینقابلیتدرinternet explorer9ونسخههایقبلآنپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
کار اصلی این نوع فیلد validate کردن داده ی کاربر است؛ یعنی چک می کند تا ببیند آیا آدرس URL ای که کاربر وارد کرده است دارای الگوی صحیحی است یا خیر. می توانید این مورد را در خروجی بالا چک کنید.
Input های هفته
این نوع input ها به صورت <"input type="week> نوشته می شوند و به کاربر اجازه می دهند تا یک هفته و یک سال را انتخاب کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<body>
<h2>Week Field</h2>
<p>The<strong>input type="week"</strong>allows the user toselectaweek andyear:</p>
<p>Depending on browser support:<br>Adate picker can pop-up when you enter the input field.</p>
<form action="/action_page.php">
Selectaweek:
<input type="week"name="year_week">
<input type="submit">
</form>
<pdir='rtl'>اینقابلیتدرinternet explorer11ونسخههایقبلیآنوهمچنیندرsafariوfirefoxپشتیبانینمیشود.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟