صفات ورودی HTML

صفت value

صفت value مقدار اولیه یک فیلد ورودی را تعیین می کند : 

مثال 

صفت value
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
مشاهده مثال

 

صفت readonly

این صفت مشخص می کند که یک فیلد ورودی فقط خواندنی است و قابل تغییر نیست : 

مثال 

صفت readonly
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
مشاهده مثال

 

صفت disabled

این صفت برای غیرفعالی کردن فیلد ها استفاده می شود. فیلد های غیرفعال بدون استفاده و غیرقابل کلیک هستند ، و مقدار آن به هنگام ثبت فرم ، ارسال نمی شود : 

مثال 

صفت disabled
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
مشاهده مثال

 

صفت size

این صفت اندازه یک فیلد (تعداد کاراکترها) را تعیین می کند : 

مثال 

صفت size
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
مشاهده مثال

 

صفت  maxlength

این صفت برای تعیین حداکثر تعداد کاراکترهای مجاز یک فیلد استفاده می شود : 

مثال 

صفت maxlength
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>
مشاهده مثال



با استفاده از صفت maxlength فیلد مورد نظر بیش از مقدار کاراکتر مجاز را قبول نخواهد کرد. البته اگر تعداد بیشتر از تعداد مجاز شود ، فیدبک ندارد و باید برای اعلام (اخطار) به کاربر ، کد جاوا اسکریپت بنویسید.

نکته : محدوده ساز های ورودی ضد فریب نیستند و جاوا اسکریپت روش های مختلفی برای اضافه کردن ورودی هوشمند دارد. برای محدود کردن مطمئن ورودی ها ، مقادیر ورودی باید توسط دریافت کننده (سرور) به دقت بررسی شوند.

 

صفات input در HTML5

در HTML5 صفات زیر برای input ارائه شده اند : 
 

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



دو مورد زیر هم برای form در HTML5  ارائه شده اند : 
 

  •     autocomplete
  •     novalidate
     

صفت autocomplete

صفت autocomplete مشخص می کند که قابلیت پر شدن اتوماتیک داشته باشد یا خیر. وقتی این قابلیت روشن باشد فیلد ها بر اساس ورودی هایی که قبلا کاربر وارد کرده است ، توسط مرورگر  پر خواهد شد.
نکته : امکان تعیین روشن بودن تکمیل اتوماتیک برای کل فرم و خاموش بودن آن برای چند فیلد خاص یا بالعکس ، وجود دارد.
صفت autocomplete برای <form> و موارد زیر از گروه <input> قابل تعریف است :  text, search, url, tel, email, password, datepickers, range  و color

مثال 

صفتautocomplete
<form action="/action_page.php" 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>
مشاهده مثال



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

 

صفت novalidate

این صفت جزء صفات <form> می باشد. این صفت تعیین می کند که به هنگام ثبت فرم ، داده های فرم اعتبارسنجی نشود : 

مثال 

صفت novalidate
<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
مشاهده مثال

 

صفت autofocus

این صفت تعیین می کند فیلد مورد نظر بطور اتوماتیک به هنگام لود شدن صفحه متمرکز شود : 

مثال 

صفت autofocus
First name:<input type="text" name="fname" autofocus>
Try it Yourself »
مشاهده مثال

 

صفت form

این صفت تعداد فرم هایی که عنصر <input>  به انها تعلق دارد را تعیین می کند.
نکته : برای ارجاع به بیش از یک فرم ، از لیستی از id های فرم ها استفاده می کنیم که با فاصله از هم جدا شده اند.

مثال 

صفت form
<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">
مشاهده مثال

 

صفت formaction

این صفت url فایلی را  تعریف می کند که قرار است ورودی های فرم را پس از ارسال پردازش کند. صفت formaction بر صفت action عنصر <form> ارجحیت دارد . صفت formaction با type="submit"  و type="image" استفاده می شود.

مثال 

صفت formaction
<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 as admin">
</form>
مشاهده مثال

 

صفت forenctype

این صفت نحوه کدگذاری داده های فرم  به هنگام ارسال را تعیین می کند. (فقط برای فرم هایی با متد post). صفت forenctype بر صفت enctyoe عنصر <form>  ارجحیت دارد. این صفت هم با type="submit"  و type="image" استفاده می شود.

مثال 

صفت formenctype
<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>
مشاهده مثال

 

صفت formmethod

این صفت متد HTTP را برای ارسال داده های فرم  به url عملکرد فرم تعریف می کند. صفت formmethod بر صفت method عنصر <form>  ارجحیت دارد. این صفت هم با type="submit"  و type="image" استفاده می شود.

مثال 

صفت formmethod
<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>
مشاهده مثال

 

صفت formnovalidate 

صفت formnovalidate بر صفت novalidate عنصر <form>  ارجحیت دارد. این صفت هم با type="submit"  و type="image" استفاده می شود.

مثال 

صفت formnovalidate
<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>
مشاهده مثال

 

صفت formtarget 

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

مثال 

صفت formtarget
<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">
</form>
مشاهده مثال

 

صفات height و width

این صفات عرض و ارتفاع عنصر <input type="image"> را تعریف می کنند.
نکته : همیشه اندازه تصاویر را مشخص کنید. اگر مرورگر  اندازه را نداند ، تا زمانی که تصاویر لود شوند ، صفحه پر پر خواهد زد.

مثال 

صفات height و width
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Try it Yourself »
مشاهده مثال

 

صفت list

صفت list به یک عنصر <datalist> که حاوی گزینه های از پیش تعریف شده برای عنصر <input> می باشد ، ارجاع داده می شود. 

مثال 

صفت list
<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
مشاهده مثال

 

صفات min و max

این صفات حداقل و حداکثر مقادیر برای یک عنصر <input> را تعیین می کنند.صفات min و max به همراه انواع ورودی زیر عمل می کند : 
number، range، date، datetime-local، month، time و  week

مثال 

صفات max و min
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
مشاهده مثال

 

صفت multiple

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

مثال 

صفت multiple
<input type="file" name="img" multiple>
مشاهده مثال

 

صفت pattern

این صفت  عبارت منظمی را مشخص می کند که مقدار عنصر <input> را در مقابل آن بررسی می کند. صفت pattern با انواع ورودی های زیر عمل می کند : 
text ،  search ،  url ،  tel ،  emailو password
نکته : برای توضیح دادن pattern به کاربر جهت کمک به او ، از صفت title استفاده کنید.

مثال 

صفت pattern
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
مشاهده مثال

 

صفت placeholder

این صفت نمونه ای از مقدار مورد انتظار برای هر ورودی را مشخص می کند که می تواند مثالی از مقدار مورد نظر باشد یا توضیح کوتاهی در مورد آن. این مقدار پیش فرض تا قبل از ورود مقدار توسط کاربر ، داخل فیلد نمایش داده می شود.
صفت placeholder با انواع ورودی زیر عمل می کند : 
 text ،  search ،  url ،  tel ،   emailو password

مثال 

صفت placeholder
<input type="text" name="fname" placeholder="First name">
مشاهده مثال

 

صفت required

این صفت مشخص می کند که یک فیلد حتما باید قبل از ثبت پر شود. صفت required با انواع ورودی های زیر عمل می کند : 
text ،  search ،  url ،  tel ،  email ،  password ،  date pickers ،  number ،  checkbox ،  radio و file

مثال 

صفت required
Username: <input type="text" name="usrname" required>
مشاهده مثال

 

صفت step

این صفت فواصل مجاز اعداد را برای یک عنصر <input> مشخص می کند. به عنوان مثال از step برای یک ورودی مساوی 3 باشد اعداد مجاز می توانند -3 / 0 / 3 / 6 / و ... باشند.

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

صفت step با انواع ورودی های زیر کار می کند : 
number ،  range ،  date ،  datetime-local ،  month ،  time  و week

مثال

صفت step
<input type="number" name="points" step="3">
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای وبساز