HTML on verkon rakennuspalikka. Tämän sivunkuvauskielen joidenkin vähemmän tunnettujen, mutta hyödyllisten osien tunteminen voi tehdä elämästäsi paljon helpompaa. HTML-attribuutit tarjoavat useita ominaisuuksia, jotka voivat auttaa sinua saamaan kaiken irti HTML: stä. Se määrittelee HTML-elementin lisäominaisuudet tai -ominaisuudet.

Tässä artikkelissa opit 11 HTML-attribuutista, joista et todennäköisesti ole vielä kuullut.

1. useita

Tämän määritteen avulla käyttäjät voivat syöttää useita arvoja. Voit käyttää usea attribuuttia kanssa tunnisteet ja tunnisteet. Tämä boolean-attribuutti on voimassa vain sähköposti- tai tiedostosyöttötyypeille.

Useiden attribuuttien käyttäminen


Useiden määritteiden käyttäminen tiedostojen syöttämiseen

Käyttämällä usea attribuuttia tiedostojen syöttämiseen, voit valita useita tiedostoja (pitämällä Siirtää tai Ctrl avaimet).

Useiden attribuuttien käyttäminen sähköpostin syöttämiseen

Käyttämällä useat määritteitä sähköpostin syöttämiseen, voit kirjoittaa luettelon pilkuilla erotetuista sähköpostiosoitteista. Kaikki tyhjät välilyönnit poistetaan jokaisesta luettelon osoitteesta.

2. tyytyväisiä

Voit tehdä web-sivun HTML-sisällöstä muokattavaa käyttämällä contenteditable-attribuuttia. Tämä on globaali attribuutti, eli se on yhteinen kaikille HTML-elementeille.


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 kuntoilu
ullamco laboris nisi ut aliquip ex ea commodo consequat.

3. oikeinkirjoituksen tarkistus

Spellcheck-attribuutti määrittää, voidaanko elementistä tarkistaa kirjoitusvirheet vai ei. Voit tarkistaa tekstin oikeinkirjoituksen elementtejä, tekstiä muokattavissa elementeissä tai tekstiä syöttöelementeissä (paitsi salasanat).


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.

Aiheeseen liittyvä: HTML Essentials -huijauslehti: Tunnisteet, attribuutit ja Lisää

4. lataus

Voit ladata resurssin latausattribuutin avulla. Latausattribuutti käskee selaimen lataamaan määritetyn URL-osoitteen sen sijaan, että navigoisi siihen. Voit käyttää latausattribuuttia -tunnisteen ja -tunnisteen kanssa.

Huomaa: latausattribuutti vain toimii samaa alkuperää olevien URL-osoitteiden kanssa. Se noudattaa saman alkuperän käytännön sääntöjä.

Lataa

5. accept

-tunnisteen accept-attribuutti määrittää, minkä tyyppisiä tiedostoja käyttäjä voi ladata. Voit määrittää sen arvoksi pilkuilla erotetun luettelon yhdestä tai useammasta tiedostotyypistä.

äänitiedoston hyväksyminen

Videotiedoston hyväksyminen

 koodi>

Kuvatiedoston hyväksyminen

 koodi>

Microsoft Word -tiedoston hyväksyminen

accept=".doc,.docx, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">

PNG- tai JPEG-tiedostojen hyväksyminen

PDF-tiedoston hyväksyminen

Aiheeseen liittyvä: Hienoja HTML-tehosteita kuka tahansa voi lisätä verkkosivustoilleen

6. translate

Kääntäjä-attribuutti kertoo selaimelle, että elementti tulee kääntää vai ei, kun sivu lokalisoidaan. Sillä voi olla kaksi arvoa: "yes" tai "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.

Aiheeseen liittyvä: Yksinkertaisia ​​HTML-koodiesimerkkejä, jotka voit oppia 10 Pöytäkirja

7. juliste

Julisteattribuuttia käytetään kuvan näyttämiseen videon latauksen aikana tai kunnes käyttäjä toistaa video.

Huomaa: jos et määritä mitään, mitään ei näytetä ennen kuin ensimmäinen ruutu on saatavilla. Kun ensimmäinen kehys on saatavilla, se näytetään julistekehyksenä.

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

8. inputmode

Inputmode-attribuutti osoittaa selaimelle, mikä näppäimistö näytetään, kun käyttäjä on valinnut minkä tahansa syötteen tai tekstialueelementin. Tämä attribuutti hyväksyy useita arvoja:

Ei mitään

Numeerinen

Puhelin

Desimaali

Sähköposti

URL

9. kuvio

-elementin kuvioattribuutin avulla voit määrittää säännöllisen lausekkeen, jota vastaan ​​elementin arvo tarkistetaan. Voit käyttää kuvio-attribuuttia useiden syöttötyyppien kanssa, kuten teksti, päivämäärä, haku, URL, puhelinnumero, sähköposti ja salasana.



Aiheeseen liittyvä: Parhaat sivustot Laadukkaat HTML-koodausesimerkit

10. automaattinen täydennys

Automaattinen täydennys -attribuutti määrittää, tuleeko selaimen täydentää syöte automaattisesti käyttäjän syötteiden perusteella vai ei. Voit käyttää automaattisen täydennyksen attribuuttia useiden syöttötyyppien kanssa, kuten teksti, haku, URL, puhelin, sähköposti, salasana, päivämäärävalitsimet, alue ja väri. Voit käyttää tätä määritettä - tai

-elementtien kanssa
elementtejä.

11. autofocus

Autofocus-attribuutti on boolean-attribuutti, joka osoittaa, että elementin tulee keskittyä sivun lataamiseen. Voit käyttää tätä määritettä seuraavien kanssa: , , , , tai elementtejä.

Automaattitarkennuksen attribuutin käyttäminen syöttöelementin kanssa

< /code>

Automaattitarkennusattribuutin käyttäminen valitun elementin kanssa

Automaattitarkennusattribuutin käyttäminen textarea-elementin kanssa

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.

Jos haluat tarkastella tässä artikkelissa käytettyä lähdekoodia kokonaisuudessaan, tutustu GitHub-arkisto.

Helpota elämääsi JavaScript One-Linersin avulla

Yksilinjainen koodi auttaa saavuttamaan enemmän vähemmällä koodilla. Voit käyttää useita JavaScriptin yksilinjaisia ​​koodaajia kuin ammattilainen.

Vain yhdellä koodirivillä voit sekoittaa taulukon, löytää taulukon keskiarvon, tarkistaa, onko taulukko tyhjä, luoda satunnaisen heksadesimaalivärin, luoda satunnaisen UUID-tunnuksen ja niin edelleen.

11 JavaScript One-Lineriä, jotka sinun pitäisi tietää

Saavuta paljon pienellä koodilla käyttämällä tätä laajaa JavaScript-yhteensopivuusvalikoimaa.

Lue Seuraava

JaaTweetSähköposti
Liittyvät aiheet
  • Ohjelmointi
  • HTML
  • Ohjelmointikielet
  • Koodausvinkkejä
Kirjailijasta
Yuvraj Chandra (78 artikkelia julkaistu)

Yuvraj on tietojenkäsittelytieteen perustutkinto-opiskelija Delhin yliopistossa Intiassa. Hän on intohimoinen Full Stack -verkkokehityksestä. Kun hän ei kirjoita, hän tutkii eri tekniikoiden syvyyttä.

Lisää Yuvraj Chandralta

tilaa uutiskirjeemme

Liity uutiskirjeemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e-kirjoja ja eksklusiivisia tarjouksia!

Klikkaa tästä tilataksesi