09_input 태그

홈페이지창을 보면 각 사이트마다 아이콘이 적용된 것을 확인할 수 있다.

티스토리에는 주황바탕에 T 모양이 새겨진 아이콘이 있다

이 아이콘을 적용하는 방법은 head 태그안에 link 태그를 이용해서 추가 할 수 있다.

링크태그를 이용해서 버튼 모양의 아이콘을 추가한 모습이다.

이러한 아이콘을 favicon이라고 부른다

input에 대하여 들어가기전에 form 태그를 먼저 알아보자

웹페이지는 사용자와 서버간의 상호작용이 가능하다. 입력한 것을 서버로 보내면 서버는 그것을 처리하여 사용자에게 보여준다. 이렇게 서버로 정보를 보내는 역할을 하는 것이 form이다.

form의 속성

- action : 보낼 서버의 주소

- method : 서버에게 보내는 방법 (GET, POST, PUT, DELETE)를 정하는 속성

* 가장 일반적으로 쓰이는 속성(GET, POST)

GET - URL에 전송하는 내용이 노출된다. 속도는 빠르지만 보낼 수 있는 용량이 작고, 보안성이 취약하다.

POST - URL에  전송하는 내용이 노출되지 않는다.

이렇게 폼안에 서버의 주소와 보내는 방법을 정해주고 그 안에서 input 태그를 이용해서 정보를 입력받고 그 정보를 보내게 된다.

이제 input의 여러 타입을 소개하겠다.

1. button, submit

input의 속성은 기본적으로 type, name, value로 이루어져 있는데 type은 어떤 형식으로 정보를 입력받을 것인가, name은 변수명, value는 값 이라고 생각하면 된다.

첫번째는 속성은 버튼이고 이름은 정하지 않았다. 버튼에서 value는 버튼에 눈에 보이는 값을 나타낸다

두번째는 서브밋 타입이고 이름은 정하지 않았다. 서브밋도 버튼과 같이 value값이 표기된다.

둘다 클릭이 가능한 버튼 모양이지만 용도가 조금 다르다

button - 어떠한 이벤트의 트리거

submit - 서버에게 폼에 있는 정보를 전달을 하는 버튼

이렇게 이해하면 된다.

2. text, password

타입이 text와 password인 경우를 알아보자

fieldst과 legend는 여러 예제를 연습하느냐고 구분을 위해서 사용한것이다.

먼저 text타입을 보자. 타입은 text 이름은 userid, value는 정하지 않았다. 그리고 추가적으로 placeholder라는 속성을 추가했다. placeholder는 값이 입력되지 않았을 때만 보여주다가 값을 입력하면 사라지는 속성이다. 만약 value에 값을 입력해 놓으면 처음부터 text 안에 값이 입력된 채로 실행된다.

두번째는 password타입은 text타입과 같이 text를 입력받지만 입력받은 내용을 숨겨주는 기능을 갖고 있다. 값을 입력하면 ●로 값을 숨겨주는것을 확인 할 수 있다.

위의 문서를 실행시킨 모습이다.

3. check box, radio

check box - 중복선택 가능, name 중복가능

radio - 중복선택 불가능, name 중복 불가능

사용 예제

중복가능인지 여부만 잘 파악하자.

4. hidden

hidden은 사용자에게 보이지 않게하는 타입이다.

타입이 텍스트와 히든을 비교해보자

텍스트는 눈에 보이지면 히든은 보이지 않는다.

크롬의 개발자 모드를 이용하면 코드에는 존재하지만 사용자에게 보이지 않을뿐이라는 것을 알 수 있다.

5. file

파일을 선택하게 해주는 인풋 태그의 타입이다.

파일을 선택하면 "선택된 파일 없음"이 파일명으로 변경된다. submit의 default value 값이 제출이라는 것을 알 수 있다.

6. select

select는 input태그의 타입이 아니다.

select태그는 선택창을 만들어주는 태그로 select태그 안에 option태그를 이용해서 내용을 추가 할 수 있게 해준다

car라는 이름의 선택창에 내용은 volvo, saab, fiat, audi항목을 고를 수 있다.

select태그로 선택창을 만들어 실행한 모습.