더 잘 알려진 속성의 덜 알려진 용도 – Smashing Magazine

HTML에서 사용 가능한 속성 목록은 길고 문서화되어 있습니다. 당신이 그들을 암기하지 않았더라도 (그리고 저자에게는 전혀 아무런 문제가 없지만… 봅시다.

name

당신은 그 말을 들었을 것입니다 name 속성, 양식을 통해 전송 된 정보에 이름/레이블을 제공합니다. 더 구체적으로는 라디오 버튼 세트를 모으는 데 사용했을 수도 있지만 details 한 번에 일련의 아코디언 중 하나만 열 수 있도록하는 요소.

직장에서 사무실에 하나 이상의 냉장고가있는 경우, 존경받는 사람은 한 번에 한 문만 열 것입니다. 맞아, 밥?

  
Refrigerator 1
  Lunches, condiments, yogurt et al.


  
Refrigerator 2
  More Lunches, leftovers from client meeting, stray cans of off-brand soda et al.


  
Refrigerator 3
  Cookie dough someone bought from somebody’s child’s fundraiser, expired milk, unidentifiable meat et al.

title

당신은 아마도 보편적 인 속성에 대해 들었을 것입니다 title. 일반적으로 내장 툴팁 텍스트로 생각되지만 3 개의 요소는 제목 속성에 대한 특별한 의미를 가지고 있습니다. input 거의 사용되지 않는 보석, 정의 (dfn) 요소 및 약어 (abbr) 요소.

사용하는 경우 pattern an input Regex 기반 오류 수정을 제공하려면 사용자에게 사용중인 기준을 충족하는 방법을 반드시 알려야합니다. 그만큼 title 속성은 툴팁과 사용자가 해당 기준을 충족하지 않을 때 표시된 메시지로 사용할 수 있습니다.

a dfn 요소를 사용하는 경우 title 속성은 정의되는 용어를 포함해야합니다. dfn 여전히 텍스트가 있어야하지만 약어 또는 다른 형태의 용어 일 수 있습니다.

OYG’s are a pox on humanity. Stealing yogurts from the office fridge even when they are labeled.

에이 title 에 abbr 요소는 툴팁을 설정할뿐만 아니라 약어 또는 약어의 확장을 명시 적으로 가지고 있습니다. 사양에서 말한 것처럼 :“ Lesser Known Uses Of Better Known Attributes — Smashing Magazine 지정된 경우 속성에는 약어 확장이 포함되어야하며 다른 것은 없습니다.” 그것은 당신이 당신이 당신의 title 속성. 당신은 경고를 받았습니다, 밥.

When dealing with a suspected yogurt thief, we must create a HRSTFYT to deal with the problem.

value

그만큼 value 속성은 기본값을 설정하는 것으로 잘 알려져 있습니다 inputs이지만 목록 항목에서도 사용할 수 있습니다 (li) 주문 목록 내 (ol) 해당 항목의 수와 그에 따른 모든 것을 변경합니다. 정수 만 필요하지만 사용하는 순서 유형 (숫자, 알파벳 또는 로마 숫자)에 관계없이 사용할 수 있습니다.

  
Tina
  
Keesha
  
Carlos
  
Jamal
  
Scott
  
Bob
  
Bobbie
  
Bobby
  
"Rob"

datetime

당신은 a datetime a time 기기가 읽을 수있는 시간 및/또는 날짜에 표시되는 요소 time 요소의 텍스트 :

Dec. 12, 2024

동일한 속성도 함께 사용할 수 있습니다 ins 그리고 del 요소 (각각 컨텐츠의 추가/삽입 및 삭제에 사용). 그만큼 datetime 속성 ins 그리고 del 변경이 이루어질 때까지 기계로 읽을 수있는 날짜 (및 선택적으로 시간)를 제공합니다. 원하는 경우 방문자에게 보여줄 수 있지만 주로 개인 용도로 용도됩니다.

이전 예제의 원본 버전의 편집을 확인하십시오.

When dealing with a  yogurt thief , like Bob, we must create a HRSTFYT to deal with Bob .

또한 ScreenReaders는 다음과 같습니다 ~ 아니다 발표 datetime 이 맥락에서 속성.

cite

종종 우리의 무분별한 친구들을 고수합니다 ins 그리고 del그만큼 cite 사용하는 속성 blockquote 그리고 q 인용 소스의 URL을 제공하는 요소도 ins 그리고 del 변경 사항을 설명하는 문서의 URL을 제공합니다.

When dealing with a  yogurt thief , like Bob, we must create a HRSTFYT to deal with Bob .

다시 말하지만,이 날짜는 스크린 리더와 같은 Assistive Tech에서 발표되지 않습니다.

multiple

당신은 아마도 알고있을 것입니다 multiple 속성은 상자에서 두 개의 도넛을 선택할 수있는 동료와 같이 드롭 다운 메뉴를 다중 선택 상자로 변환하는 미트보다 더 많은 눈 속성으로 속성. (나는 당신을보고 있습니다, Tina.) 그러나 그것은 두 가지 다른 용도도 있습니다. 두 파일에 추가 할 수 있습니다 input 그리고 an email 여러 파일과 이메일을 각각 입력합니다.

이메일이 쉼표로 분리되어 있는지 확인하십시오.

for

인터넷을 가로 질러 여행 할 때 아마도 for 속성이 연결하는 데 사용되는 경우 a label 양식 필드가있는 요소 (input,,, select,,, textarea등), 그러나 당신은 또한 그것을 사용하여 계산 요소를 명시 적으로 연관시킬 수 있습니다. output 요소.

a와 달리 label–input 관계, 일대일 관계 (예 : 한 분야의 한 레이블) 인 관계, for an에 사용 된 속성 output 계산에 기여한 필드의 분리 된 공간 분리 된 ID 목록을 보유 할 수 있습니다.

target

당신이 사용할 수있는 것처럼 target 새 탭/창에서 링크를 열려면 동일하게 사용할 수 있습니다. target 속성과 가치 _blank a form 새 탭/창에서 응답을 엽니 다.

disabled

당신은 그것을 사용했을 것입니다 disabled 개별 양식 필드를 노크하는 속성이지만,이를 사용하여 모든 후손을 비활성화 할 수도 있습니다. fieldset 요소.

HR이 무엇을 말하든, 무고한이지 않은 귀리 정신에 관계없이, 우리는 Bob이 그렇게 한 것을 알고 있습니다. 우리는 그렇지 않습니까?

속성 선택기

기술적으로 HTML 팁은 아니지만 속성은 CSS에서 선택기로 사용될 수 있습니다. 속성 이름에 정사각형 브래킷을 넣고 해당 속성이 포함 된 모든 요소를 ​​선택합니다.

  
Fred
  
Rhonda
  
Philomina
  
Cranford
  
Scott
  
Bob
  
Bobbie
  
Bobby
  
"Rob"

실제로 Attribute Selectors와 함께 할 수있는 더 많은 것이 있지만, 그것은 다른 기사의 주제입니다.

마무리

좋아, 이제 우리는 밥의 사무실과 요거어 범법을 제대로 기소하는 데 사용할 수있는 퀴즈를 배웠으므로 논의하지 않은 좋아하는 HTML 속성이 있습니까? 의견에 개인의 개인 에너지를 과시하십시오. (그리고 네, 멋진 사람들은 좋아하는 HTML 속성을 가지고 있습니다… 정말 멋진 사람들…

(GG, YK)