티스토리 뷰
안녕하세요 동기 여러분! 오늘은 라벨(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>을 넣어 버림으로써 간단하게 해결이 가능합니다. (for와 id값을 넣을 이유가 사라짐)
오늘의 느낌
내가 한국에 살 때는 내가 보고 배우고 믿고 있는 신념이 다 맞다고 생각을 하면서 살았는데, 캐나다에 와서 다양한 인종, 문화를 겪다가 보니 세상에 딱 정해진 정답이 과연 있을까? 남에게 크게 피해 주지 않는다면 꼭 비난할 필요도 없고 신경 쓸 일도 아닌 것 같다. 언제든 시대에 따라 상황에 따라 정답은 달라지기 마련이니까.
'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
링크
TAG
- 타입 좁히기
- method
- 객체
- 실수
- 프로그래머스
- html table
- Typescript
- 타입스크립트
- css position
- HTML 기본
- 동기코딩
- 자바스크립트
- 파이썬
- Type
- Margin
- javascript
- em
- 반복문
- html
- Object
- Array
- 함수
- padding
- function
- CSS 포지션
- 메서드
- for문
- CSS
- Python
- if문
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함