티스토리 뷰

HTML

[HTML] Adding a Label

Dongi 2021. 11. 18. 10:18

안녕하세요 동기 여러분! 오늘은 라벨(Label 뤠이블)을 넣는 방법에 알아봅시닼ㅋㅋ

 

Adding a Label

라벨(Label)이 무엇인가 하니 인풋 빈칸 옆에 부연 설명을 해주는 친구입니다. 

 

예를 들어, 야후 로그인 창을 켜보면

 

  아이디를 적어 놓는 빈칸 위에 "사용자 이름, 이메일 또는 무선 기기"라고 설명이 쓰여 있는 게 보이시나요? 얘가 바로 라벨(Label)입니다.

 


 

생김새

<form action="/ex.html" method="POST">
  <label for="username">너의 아이디는 무엇인고?</label>
  <br>
  <input type="text" name="username" id="username">
</form>

이 코드를 실행하면,

 

크롬에서 실행한 화면입니다.

이런 창이 뜨게 됩니다.

 

<label>과 <input>이 연관되게 작동시키기 위해서 <input>은 id 속성이 필요합니다.  그런 다음 <input>의 id 값을 <label>의 for 값과 같게 만들어 주어야합니다.

 

위의 설명이 귀찮다면, 중첩을 시켜 한방에 해결하는 방법도 있습니다.

<form action="/ex.html" method="POST">
  <label>너의 아이디는 무엇인고?
  	<input type="text" name="username">
  </label>
</form>

<label> 태그 안에 <input>을 넣어 버림으로써 간단하게 해결이 가능합니다. (forid값을 넣을 이유가 사라짐)

 


 

오늘의 느낌

내가 한국에 살 때는 내가 보고 배우고 믿고 있는 신념이 다 맞다고 생각을 하면서 살았는데, 캐나다에 와서 다양한 인종, 문화를 겪다가 보니 세상에 딱 정해진 정답이 과연 있을까? 남에게 크게 피해 주지 않는다면 꼭 비난할 필요도 없고 신경 쓸 일도 아닌 것 같다. 언제든 시대에 따라 상황에 따라 정답은 달라지기 마련이니까.

'HTML' 카테고리의 다른 글

[HTML] Number Input  (0) 2021.11.19
[HTML] Password Input  (0) 2021.11.18
[HTML] Text Input  (0) 2021.11.17
[HTML] How a Form Works  (0) 2021.11.16
[HTML] Table (4)  (0) 2021.11.15
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/07   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함