۱۱ ویژگی مفید HTML که باید بدانید

ویژگی های HTML به شما این امکان را می دهد که وظایف بسیار پیچیده تری را مستقیماً روی فایل های HTML خود انجام دهید. برخی از مهم ترین کدهای Html در ادامه این مقاله نوشته شده است.

HTML زبان پایه و  سازنده وب است. دانستن برخی از بخش های کمتر شناخته شده، اما مفید این زبان نشانه گذاری می تواند کار شما را بسیار آسان تر کند. ویژگی‌های HTML چندین ویژگی را ارائه می‌دهند که می‌توانند به شما کمک کنند تا از HTML حداکثر استفاده را ببرید.

 

در این مقاله با ۱۱ ویژگی HTML آشنا خواهید شد که احتمالاً هنوز نام آنها را نشنیده اید.

 

۱. multiple

این ویژگی به کاربران اجازه می دهد چندین مقدار را وارد کنند. می توانید از ویژگی های چندگانه با تگ های <input> و تگ های <select> استفاده کنید. این ویژگی فقط برای انواع ورودی ایمیل یا فایل معتبر است.

 

استفاده از چندین ویژگی با تگ <select>

<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>

 

استفاده از چندین ویژگی برای ورودی فایل

با استفاده از ویژگی multiple برای ورودی فایل، می توانید چندین فایل را انتخاب کنید (با نگه داشتن کلیدهای Shift یا Ctrl ).

<input type="file" multiple>

 

استفاده از چندین ویژگی برای ورودی ایمیل

با استفاده از ویژگی multiple برای ورودی ایمیل، می توانید لیستی از آدرس های ایمیل جدا شده با کاما را وارد کنید. تمام فاصله های سفید از هر آدرس در لیست حذف خواهد شد.

<input type="email" multiple>

 

۲. contenteditable

شما می توانید محتوای HTML را در یک صفحه وب با استفاده از ویژگی contenteditable قابل ویرایش کنید. این ویژگی جهانی است، یعنی برای همه عناصر HTML مشترک است.

<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

 

۳. بررسی املا

ویژگی spellcheck مشخص می کند که آیا عنصر ممکن است برای اشتباهات املایی بررسی شود یا خیر. می توانید نوشتار را در عناصر <textarea> ، متن را در عناصر قابل ویرایش، یا متن را در عناصر ورودی (به جز رمزهای عبور) بررسی کنید.

<p contenteditable="true" spellcheck="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

 

۴. دانلود کنید

شما می توانید یک فایل را با استفاده از ویژگی Download دانلود کنید. ویژگی دانلود به مرورگر می‌گوید URL مشخص شده را به جای پیمایش به آن دانلود کند. می توانید از ویژگی دانلود با تگ <a> و تگ <area> استفاده کنید .

<a href="xyz.png" download="myImage">Download</a>

 

۵. accept

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

 

پذیرش فایل صوتی

<input type="file" id="audioFile" accept="audio/*">

 

پذیرش فایل ویدیویی

<input type="file" id="videoFile" accept="video/*">

 

پذیرش یک فایل تصویری

<input type="file" id="imageFile" accept="image/*">

 

پذیرش فایل مایکروسافت ورد

<input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

 

پذیرش فایل های PNG یا JPEG

<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">

 

پذیرش فایل PDF

<input type="file" id="pdfFile" accept=".pdf">

 

• مرتبط : کدهای جالب و باحال HTML

 

۶. ترجمه کنید

ویژگی translate به مرورگر می‌گوید که وقتی صفحه بومی‌سازی می‌شود، عنصر باید ترجمه شود یا نه. می تواند ۲ مقدار داشته باشد: “بله” یا “خیر”.

<p translate="no">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

 

۷. poster

ویژگی پوستر برای نشان دادن یک تصویر در حین بارگیری ویدیو یا تا زمانی که کاربر ویدیو را پخش کند استفاده می شود.

 

توجه : اگر چیزی را مشخص نکنید، تا زمانی که اولین فریم در دسترس نباشد، چیزی نمایش داده نمی‌شود. وقتی اولین فریم در دسترس باشد، به عنوان قاب پوستر نشان داده می شود.

<video controls
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>

 

۸. حالت ورودی

ویژگی inputmode به مرورگر نشان می‌دهد که وقتی کاربر هر عنصر ورودی یا ناحیه متنی را انتخاب می‌کند، کدام صفحه کلید را نمایش دهد. این ویژگی مقادیر مختلفی را می پذیرد و بیشتر برای مرورگرهای گوشی موبایل بسیار مفید می باشد.

 

هیچ یک

<input type="text" inputmode="none" />

 

عددی

<input type="text" inputmode="numeric" />

 

تلفن

<input type="text" inputmode="tel" />

 

اعشاری

<input type="text" inputmode="decimal" />

 

پست الکترونیک

<input type="text" inputmode="email" />

 

URL

<input type="text" inputmode="url" />

 

جستجو کردن

<input type="text" inputmode="search" />

 

۹. pattern

ویژگی pattern عنصر <input> به شما امکان می دهد یک عبارت منظم را مشخص کنید که ارزش عنصر بر اساس آن اعتبارسنجی شود. می‌توانید از ویژگی pattern با چندین نوع ورودی مانند متن، تاریخ، جستجو، URL، تلفن، ایمیل و رمز عبور استفاده کنید.

<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+"> 
</form>

 

۱۰. تکمیل خودکار

ویژگی تکمیل خودکار مشخص می کند که آیا مرورگر باید به طور خودکار ورودی را بر اساس ورودی های کاربر تکمیل کند یا خیر. می توانید از ویژگی تکمیل خودکار با چندین نوع ورودی مانند متن، جستجو، URL، تلفن، ایمیل، رمز عبور، انتخابگر تاریخ، محدوده و رنگ استفاده کنید. می توانید از این ویژگی با عناصر <input> یا عناصر <form> استفاده کنید.

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

 

۱۱. فوکوس خودکار

ویژگی فوکوس خودکار یک ویژگی بولی است که نشان می دهد یک عنصر باید روی بارگذاری صفحه متمرکز شود. می‌توانید از این ویژگی با عناصر <button> ، <input> ، <keygen> ، <select> یا <textarea> استفاده کنید.

 

استفاده از ویژگی فوکوس خودکار با عنصر ورودی

<input type="text" autofocus>

 

استفاده از ویژگی فوکوس خودکار با انتخاب عنصر

<select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>

 

استفاده از ویژگی فوکوس خودکار با عنصر textarea

<textarea autofocus>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</textarea>

 

با JavaScript One-Liners زندگی خود را آسان تر کنید

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

 

تنها با یک خط کد، می توانید یک آرایه را به هم بزنید، میانگین یک آرایه را پیدا کنید، بررسی کنید که آیا یک آرایه خالی است، یک رنگ هگزا تصادفی ایجاد کنید، یک UUID تصادفی ایجاد کنید و غیره.