html - 태그속성 설명 (name, id, type, placeholder)

name elements

 

name을 비롯해서 하나의 태그에 들어가는 속성들에 대해서 전부는 아니더라도

배운것에 대해서 나열해보고자 한다.

 

일단 보통 데이터를 저장하기 위해서는 input 이라는 태그와 button이라는 요소가 쓰이는데

input이 가장 기초적이고 필수적인 태그라고 생각한다.

 

*예시

<input name="username" id="username" type="text" placeholder="username">

 

이 태그를 보면 구조적으로

input -> 이거는 태그의 속성을 나타내고 Input의 경우 ‘데이터를 입력받는다’라는 의미를 가진다

 

name=“username” -> 이건 바로 이어서 설명하겠다

 

id=“username” -> 가장 앞의머리에 있는 태그의 주소값 개념으로써 한 페이지당 중복 id를 사용하면 안된다.

label 태그의 경우 for를 쓰게 되는데, 그 for에 들어가서 찾게되는 주소 역할을 하게된다

 

type=“text” -> input하는 타입이 글자라는 의미다

 

placeholder=“username” -> input 입력란에 아무것도 기입이 되어있지 않을때 일종의 “무엇을 여기에 입력해주세요”라는 힌트다. 이 경우엔 username 이라고 뜬다.

---

#1 데이터 받기 첫번째 패턴

 

name의 경우 데이터를 받기에 중요한 요소인데

file:///tacos?username=&password=&color=%23ff0000&num=76

 

이거는 username, password, color, num

이라는 4개의 input 을 입력받은 후의 결과 값으로 나오는 것이다.

 

username=&

의 의미는 =과 &사이에 아무 값이 없으므로 입력값이 없다고 보면 된다

 

color는 인코딩을 거치지 않은지라 약간 값이 독특해보이고, num의 경우에 입력값은 76이였다.

 

그리고 이 username, password, color, num

은 모두 input 태그를 사용할때 name에 설정된 이름이다.

즉, name은 데이터를 어떤 이름으로 받게 될것이냐? 라는 설정이름이라고 이해하면 된다.

---

#2 데이터 받기 두번째 패턴

 

데이터를 받을때 type이 text면 패턴 1이 맞다

하지만 type이 radio등이라면 단순히 데이터값은 '선택했음'정도의 의미에서 그친다.

내가 원한건 L를 선택한건지 M을 선택한건지 S를 선택한지가 필요한데 말이다.

이때 input 속성중에 쓰이는 게 value다

value에 입력된 값으로 데이터 값이 리턴된다.