ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
همزمان با معرفی HTML5 انواع مختلفی از
input ها نیز به توسعه دهندگان معرفی شد تا بتوانند با استفاده از آن ها برنامه های کاربردی تر و راحت تری بنویسند. آن ها عبارت اند از:(
ایران گستر)
search
نکته: از آن جایی که این نوع input ها نسبتا جدید تر هستند ممکن است در تمام مروگر ها کار نکنند. اگر input ای در مرورگری پشتیبانی نشود، به جای آن یک فیلد خالی از نوع <"input type="text> نمایش داده خواهد شد.(
ایران گستر)
این نوع از 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> 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> |
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> 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> |
شما همچنین می توانید از 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>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> |
این نوع از 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> 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> |
این نوع 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> 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> |
سعی کنید در خروجی بالا یک ایمیل نا معتبر (مانند example.com یا example یا example.com@me و …) وارد کنید. خواهید دید که فرم ثبت نخواهد شد و به جای آن یک هشدار به شما نمایش داده می شود.(
ایران گستر)
کار این نوع 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>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> |
نوع <"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 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> |
این نوع 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> 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> |
این نوع 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 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> |
این نوع 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> 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> |
این input ها از نظر کارکرد و از نظر ظاهر هیچ تفاوتی با فیلد های متنی ساده ندارند. تفاوت اصلی در بحث semantics و درک موتور های جست و جو از سایت شما است.
این نوع 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> 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> |
احتمالا متوجه قسمت "{pattern="[0-9]{3}-[0-9]{2}-[0-9]{3 نشده اید. از آنجا که هر کشوری الگوی شماره تلفن های مخصوص خودش را دارد شما می توانید این الگو را بر اساس شماره تلفن های کشور خودتان تنظیم کنید. در الگوی بالا گفته شده است {3}[0-9] که یعنی 3 رقم اول شماره تلفن می توانند شامل اعداد 0 تا 9 (همه ی اعداد) بشوند. سپس دو رقم بعدی و در آخر سه رقم بعدی را مشخص کرده ایم. شما می توانید سعی کنید این الگو را مطابق با ایران طراحی کنید.(
ایران گستر)
این نوع 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 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> |
این نوع 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> 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> |
کار اصلی این نوع فیلد validate کردن داده ی کاربر است؛ یعنی چک می کند تا ببیند آیا آدرس
URL ای که کاربر وارد کرده است دارای الگوی صحیحی است یا خیر. می توانید این مورد را در خروجی بالا چک کنید.(
ایران گستر)
این نوع 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 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> |
درباره این سایت