11 användbara HTML-attribut du måste känna till

HTML är webbens byggsten. Att känna till några mindre kända men användbara delar av detta märkningsspråk kan göra ditt liv mycket enklare. HTML-attribut tillhandahåller flera funktioner som kan hjälpa dig att få ut det mesta av HTML. Den definierar ytterligare egenskaper eller egenskaper för ett HTML-element.

I den här artikeln kommer du att lära dig om 11 HTML-attribut som du förmodligen inte har hört talas om ännu.

1. flera

Detta attribut tillåter användare att ange flera värden. Du kan använda multipla-attributet med taggar och taggar. Detta booleska attribut är endast giltigt för e-post- eller filinmatningstyper.

Använda flera attribut med Tag

<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>

Använder flera attribut för filinmatning

Genom att använda multipelattributet för filinmatning kan du välja flera filer (genom att hålla ned Flytta eller Ctrl nycklar).

<input type="file" multiple>

Använder flera attribut för e-postinmatning

Genom att använda multipla-attributet för e-postinmatning kan du ange en lista med kommaseparerade e-postadresser. Alla vita utrymmen kommer att tas bort från varje adress i listan.

<input type="email" multiple>

2. nöjd redigerbar

Du kan göra HTML-innehållet redigerbart på en webbsida med attributet contenteditable. Detta är ett globalt attribut, dvs det är gemensamt för alla HTML-element.

<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>

3. stavningskontroll

Stavningskontrollattributet anger om elementet får kontrolleras för stavfel eller inte. Du kan stavningskontrollera text i element, text i de redigerbara elementen eller text i inmatningselementen (förutom lösenord).

<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>

4. ladda ner

Du kan ladda ner en resurs med hjälp av nedladdningsattributet. Nedladdningsattributet talar om för webbläsaren att ladda ner den angivna URL:en istället för att navigera till den. Du kan använda nedladdningsattributet med tagga och märka.

Notera: Nedladdningsattributet fungerar bara med webbadresser med samma ursprung. Den följer reglerna för samma ursprungspolicy.

<a href="https://ipotek.net/11-anvandbara-html-attribut-du-maste-kanna-till/xyz.png" download="myImage">Download</a>

5. acceptera

Acceptera-attributet för taggen anger vilken typ av filer en användare kan ladda upp. Du kan ange en kommaseparerad lista med en eller flera filtyper som dess värde.

Acceptera en ljudfil

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

Acceptera en videofil

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

Acceptera en bildfil

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

Acceptera en Microsoft Word-fil

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

Acceptera PNG- eller JPEG-filer

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

Acceptera en PDF-fil

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

6. översätta

Translate-attributet talar om för webbläsaren att elementet ska översättas eller inte när sidan är lokaliserad. Den kan ha två värden: “ja” eller “nej”.

<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>

7. affisch

Poster-attributet används för att visa en bild medan videon laddas ner eller tills användaren spelar upp videon.

Notera: Om du inte anger något visas ingenting förrän den första bildrutan är tillgänglig. När den första ramen är tillgänglig visas den som affischramen.

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

8. ingångsläge

Attributet inputmode anger webbläsaren vilket tangentbord som ska visas när en användare har valt ett inmatnings- eller textområdeselement. Det här attributet accepterar olika värden:

Ingen

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

Numerisk

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

Tel

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

Decimal

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

E-post

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

URL

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

Sök

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

9. mönster

Mönsterattributet för element låter dig ange ett reguljärt uttryck för vilket elementets värde ska valideras mot. Du kan använda mönsterattributet med flera inmatningstyper som text, datum, sökning, URL, tel, e-post och lösenord.

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

10. autoslutförande

Autocomplete-attributet anger om webbläsaren automatiskt ska slutföra inmatningen baserat på användarinmatningar eller inte. Du kan använda attributet autoslutförande med flera inmatningstyper som text, sökning, URL, tel, e-post, lösenord, datumväljare, intervall och färg. Du kan använda det här attributet med element eller

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

<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 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>