Html 5 چند شناسه جدید و کارآمد به تگ input اضافه کرده است که در زیر لیست آنها را مشاهده میکنید که در این مقاله قصد داریم با آنها آشنا شویم.

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

شناسه autocomplete در تگ input

خاصیت autocomplete تعیین می کند که آیا کادر های متن موجود در فرم بایستی قابلیت پر شدن خودکار داشته باشند یا خیر . هنگامی که فیلد های موجود در یک فرم قابلیت پر شدن خودکاردارند ، مرورگر بصورت اتوماتیک مقادیر آنها را بر حسب مقادیری که قبلا کاربر وارد نموده است ، پر می کند . این خاصیت با دو مقدار on و off قابل تنظیم است.

این خاصیت برا تگ های form و input از نوع text, search, url, tel, email, password, datepickers, range, and color. قابل اجراست.

مثال:

<form autocomplete="on">

  First name:<input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  E-mail: <input type="email" name="email" autocomplete="off"><br>

  <input type="submit">

</form>

فرم زیر را پر کنید وپس از ارسال، صفحه را رفرش کنید و دوباره فرم را پر کنید و نتیجه را ببینید.

First name:
Last name:
E-mail:
 

نکته: در برخی از مرورگرها باید در تنظیمات قابلیت پر شدن خودکار را فعال کرد .

شناسه novalidate در تگ فرم

این خاصیت در یک فرم تعیین می کند که آیا مقادیر وارد شده در فیلد های آن در هنگام ارسال اعتبارسنجی شوند یا خیر .

این خاصیت یک مقدار Boolean است و اگر آن را در تگ ابتدایی < form> قرار دهید ، مانع اعتبارسنجی داده های ورودی در فیلد های فرم می شود . برای مثال اگر در یک کنترل Email در فرم وجود داشته باشد و این خاصیت را برای فرم تنظیم کرده باشید ، حتی اگر آدرس ایمیل با فرمت نادرست نیز وارد کنید ، فرم ارسال می شود .

مثال:

<form novalidate>

E-mail: <input type="email" name="user_email">

<input type="submit">

</form>

خروجی

E-mail:  

شناسه autofocus در تگ input

با فعال کردن این شناسه تگ input بعد از لود شد پیج به حالت focus میشود و مکان نمای موس در ان فیلد قرار میگیرد .

<form>

  First name:<input type="text" name="fname" autofocus><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit">

</form>

خاصیت form در تگ input

<form action="/action_page.php" id="form1">

First name: <input type="text" name="fname"><br>

<input type="submit" value="Submit">

</form>

<p>فیلد "last name "خارج از تگ فرم است و لی قسمتی از تگ فرم محسوب میشود و با ارسال فرم مقدار آن هم فرستاده میشود.</p>

Last name: <input type="text" name="lname" form="form1">

خاصیت formaction در تگ input

این شناسه در مواقعی به کار میرود که دوتا دکمه submit یا ارسال داریم که میخواهیم اگر روی دکمه اول کلیک شد اطلاعات به فایل file1.php ارسال شود و در صورتی که روی دکمه دوم کلیک شد اطلاعات به فایل file2.php ارسال شود. در این صورت از این شناسه استفاده میشود و در مقدار آدرس فایل مورد نظر را مینویسیم.

مثال:

<form action="/action_page.php">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit" value="Submit"><br>

  <input type="submit" formaction="/action_page2.php" value="Submit to another page">

</form>

شناسه formenctype در تگ input

این شناسه مشخص میکند که اطلاعات چگونه رمزنگاری و به سرور ارسال شوند .

نکته1:این شناسه برای ورودی های submit ویا image استفاده میشود.

نکته2: فقط برای فرم هایی که متد ارسال اطلاعات آنها post است به کار می رود .

مثال:

<form action="/action_page_binary.asp" method="post">

  First name: <input type="text" name="fname"><br>

  <input type="submit" value="Submit">

  <input type="submit" formenctype="multipart/form-data"

  value="Submit as Multipart/form-data">

</form>

این ویژگی در مرورگر IE9 و نسخه های قبلتر پشتیبانی نمیشود.

شناسه formmethod در تگ input

خاصیت formmethod ، متد HTTP برای ارسال فرم -داده به action URL را تعریف میکند. خاصیت formmethod ، خاصیت method عنصر <form>را لغو می کند.

نکته: خاصیت formmethod را می توان بهمراه type="submit" and type="image" استفاده کرد.

مثال:

<form action="/action_page.php" method="get">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit" value="Submit">

  <input type="submit" formmethod="post" formaction="action_page_post.asp"

  value="Submit using POST">

</form>

دکمه SUBMIT دوم خاصیت METHOD فرم را لغو میکند.

خاصیت formtarget

خاصیت formtarget یک نام و یا یک کلمه کلیدی را مشخص می کند که نشان می دهد کجا باید نتیجه دریافت شده را پس از ارسال فرم نشان دهد.(در صفحه جاری یا صفحه جدید ...) formtarget خاصیت target عنصر <form>را لغو می کند. توجه: خاصیت formtarget را می توان با type="submit" and type="image" استفاده کرد.

مثال:

<form action="/action_page.php">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit" value="Submit as normal">

  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">

</form>

این ویژگی در مرورگر IE9 و نسخه های قبلتر پشتیبانی نمیشود.

شناسه height و width در تگ فرم

این شناسه ها طول و عرض عنصر را مشخص میند و فقط برای نوع image کاربر دارد.

نکته: همیشه هر دو خاصیت height و width عکس را مشخص کنید. اگر ارتفاع و عرض تعیین شود ، فضای مورد نیاز برای تصویر زمانی که صفحه لود می شود در نظر گرفته خواهد شد. در غیر این صورت، مرورگر اندازه تصویر را نمی داند، و نمی تواند فضای مناسب آن را ذخیره کند. تاثیر آن تغییر طرح بندی صفحه در طول بارگذاری خواهد بود.

مثال:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

شناسه list

خاصیت لیست به یک عنصر <datalist>اشاره می کند که شامل گزینه های از پیش تعریف شده برای عنصر <input>می باشد.

<form method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

<input type="submit">

</form>

خروجی:

 

این ویژگی در مرورگر IE9 و نسخه های قبلتر پشتیبانی نمیشود.

شناسه های max و min

این شناسه ها مقدار حداقل و حداکثری که یک عنصر <input> میتواند بگیرد را مشخص میکند.این شناسه با عنصر های از نوع number, range, date, datetime-local, month, time و week به کار میرود.

نکته 1: با استفاده همزمان از دو خاصیت max و minمی توانید محدوده اعداد مجاز برای هر کنترل تعیین نمایید.

مثال:

<form>



  Enter a date before 1980-01-01:

  <input type="date" name="bday" max="1979-12-31"><br>



  Enter a date after 2000-01-01:

  <input type="date" name="bday" min="2000-01-02"><br>



  Quantity (between 1 and 5):

  <input type="number" name="quantity" min="1" max="5"><br>



  <input type="submit">

  

</form>

خروجی:

Enter a date before 1980-01-01:
Enter a date after 2000-01-01:
Quantity (between 1 and 5):
 

این ویژگی در مرورگر IE9 و نسخه های قبلتر و Firefox پشتیبانی نمیشود.

شناسه multiple

خاصیت multiple مشخص می کند که کاربر مجاز به وارد کردن بیش از یک مقدار در عنصر <input >می باشد.

توجه: خاصیت multiple با با انواع ورودی email , file کار می کند .

مثال:

<form>

  Select images: <input type="file" name="img" multiple>

  <input type="submit">

</form>

خروجی

Select images:  

این ویژگی در مرورگر IE9 و نسخه های قبلتر و Firefox پشتیبانی نمیشود.

شناسه pattern

خاصیت patternn برای یک < input> ، تعیین کننده ساختاری است که باید اطلاعات وارد شده در کنترل قبل از ارسال به سرور را بر مبنای آن اعتبارسنجی شوند . برای مثال یک ساختار تعیین می کنید که رمز وارد شده در کنترل حداقل باید دارای 8 کاراکتر باشد . کنترل قبل از ارسال اطلاعات به سرور ، این شرط تعیین شده را بررسی می کند .

خاصیت pattern با نوع های text, search, url, tel, email, و password بکار میرود.

مثال (فیلد ورودی که می تواند فقط سه حرف را شامل شود )

<form>

  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

  <input type="submit">

</form> 

شناسه placeholder

شناسه placeholder یک متن راهنما را برای کمک به کاربر جهت پر کردن کادر متن تعیین می کند . برای مثال یک کادر از نوع سرچ یا جستجو دارید که کاربر بایستی عنوان مورد نظر خود را در آن کادر جستجو کند . می توانید یک متن مثل "جستجو" را توسط این خاصیت تعیین کرده و کاربر با مشاهده آن راهنمایی شود . با شروع تایپ کردن کاربر در کادر جستجو ، متن راهنما به صورت خودکار پاک می شود.

نکته : خاصیت placeholderr با کنترل های ، text ، search ، url ، email، password به کار می رود.

مثال:

<form>

  <input type="search" name="fname" placeholder="جستجو"><br>

</form>

این ویژگی در مرورگر IE9 و نسخه های قبلتر پشتیبانی نمیشود.

شناسه required

اگر از این شناسه در تگ < input> استفاده کنیم پر کردن آن فیلد برای کاربر اجباری میشود . اگر کاربر مقداری در کنترل وارد نکند و بخواهد فرم را ارسال نماید با ارور مواجه میشود و فرم ارسال نخواهد شد.

خاصیت requiredd با کنترل های text , search , url , email, password, date pickers , number , checkbox , radio , file . به کار می رود .

مثال:

<form>

  Username: <input type="text" name="usrname" required>

  <input type="submit">

</form>

خروجی

Username:  

شناسه step

شناسه step برای یک تگ input گام افزایش و یا کاهش مقدار آن یا به عبارت دیگر اعداد مجاز قابل قبول جهت وارد کردن در کنترل را تعیین می کند . برای مثال اگر مقدار این خاصیت را برای کنترلی "3" = step تعیین نمایید ، مقادیر مجاز برای وارد کردن در آن عبارتند از : ..., 3- , 0 , 3 , 6 , ... و یا به عبارت دیگرمضارب 3 . هر مقداری به غیر از مضرب Step غیر قابل قبول خواهد بود .

نکته 1 : خاصیت step با کنترل های زیر به کار می رود .
• number • range • month • date • time

نکته : از شناسه step می توانید همراه با خواص minو max برای تعیین محدوده مجاز اعداد وارد شده در یک کنترل استفاده نمایید .

<form>

  <input type="number" name="points" step="3">

  <input type="submit">

</form>

خروجی

 

کامنت جدید ...