Обяснени HTML атрибути

HTML елементите могат да имат атрибути, които съдържат допълнителна информация за елемента.

HTML атрибутите обикновено идват в двойки име-стойност и винаги влизат в началния таг на елемент. Името на атрибута казва какъв тип информация предоставяте за елемента, а стойността на атрибута е действителната информация.

Например, anchor ( ) елемент в HTML документ създава връзки към други страници или други части на страницата. Използвате hrefатрибута в началния маркер, за да кажете на браузъра къде връзката изпраща потребител.

Ето пример за връзка, която изпраща потребителите към началната страница на freeCodeCamp:

Click here to go to freeCodeCamp!

Забележете, че името на атрибута ( href) и стойността (“www.freeCodeCamp.org”) са разделени със знак за равенство и кавичките заобикалят стойността.

Има много различни HTML атрибути, но повечето от тях работят само върху определени HTML елементи. Например hrefатрибутът няма да работи, ако е поставен в отвор

етикет.

В горния пример стойността, предоставена на hrefатрибута, може да бъде всяка валидна връзка. Някои атрибути обаче имат само набор от валидни опции, които можете да използвате, или стойностите трябва да бъдат в определен формат. В langатрибут казва на браузъра езика по подразбиране на съдържанието в HTML елемент. Стойностите за langатрибута трябва да използват кодове на стандартен език или държава, като например enза английски или itза италиански.

Булеви атрибути

Някои HTML атрибути не се нуждаят от стойност, защото имат само една опция. Те се наричат ​​булеви атрибути. Наличието на атрибут в таг ще го приложи към този HTML елемент. Обаче е добре да запишете името на атрибута и да го зададете равно на едната опция на стойността. В този случай стойността обикновено е същата като името на атрибута.

Например елементът във формуляр може да има requiredатрибут. Това изисква от потребителите да попълнят този елемент, преди да могат да изпратят формуляра.

Ето примери, които правят същото:

Можете да прочетете повече за атрибутите,, src и roll тук:

Атрибут

src атрибут

ролка Атрибут

Атрибут

Сега нека научим повече за някои други HTML атрибути:

P Подравняване на атрибута

Важно

Този атрибут не се поддържа в HTML5. Препоръчително е да използвате text-alignсвойството CSS.

За да подравните текста в a

Syntax

Lorem Ipsum...

Attributes

  • left - Text aligns to the left
  • right - Text aligns to the right
  • center - Text aligns to the center
  • justify - All lines of text have equal width

Example

Paragraph align attribute example

Img Src Attribute

The attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

There is an image of the freeCodeCamp Logo located at //avatars0.githubusercontent.com/u/9892522?v=4&s=400

You can set that as the image using the src attribute.

  Img Src Attribute Example   

The above code displays like this:

Original text


The freeCodeCamp Avatar

The src attribute is supported by all browsers.

You can also have a locally hosted file as your image.

For example, Change my color

function redify(){ let text = document.querySelector('#text'); text.style.color = "red"; }

Using raw JavaScript onclick attribute:

Hello World

Img Align Attribute

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

Attribute Values:

right - Align image to the right left - Align image to the left

top - Align image to the top

bottom - Align image to the bottom

middle - Align image to the middle

For example:

   Img Align Attribute   

This is an example. More text right here

We can also align in right if we want:

This is another example

Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.

Input Type Attribute

The input type attribute specifies the type of the input the user should put in your form.

text

One line of a text.

  Login:  

password

One line of a text. Text is automatically displayed as a series of dots or asterisks (depends on the browser and OS).

  Password:  

email

The HTML checks if the input matches the e-mail address format ([email protected]).

  E-mail address:  

number

Allow only numeric input. You can also specify the min and max value allowed. The example below check that the input is number between 1 and 120.

  Age:  

radio

Only one option can be selected by the user. The group of radio buttons need to have the same name attribute. You can select automatically one option by using checked property (in example below the value Blue is selected).

  Red Green Blue 

checkbox

User can select zero or more options from the group of checkboxes. You can use checked property here too for one or more options.

  english spanish french 

button

The input is displayed as button, the text which should be displayed in the button is in value attribute.

submit

Displays the submit button. The text which should be displayed in the button is in value attribute. After clicking on the button, the HTML do the validation and if it passes, the form is submitted.

reset

Displays the reset button. The text which should be displayed in the button is in value attribute. After clicking on the button, all values from the form are deleted.

There are more types elements.

Other HTML Attributes:

src attribute

roll attribute

attribute

attribute