input태그

목차
# input태그란?
# input의 type
# input의 그 외 속성들
# input과 button?

 

 

# input태그란?

  앞서 이야기한 form태그에서 필수적인 태그가 바로 <input>이다. input태그는 입력태그 중 하나로 모든 타입의 데이터를 입력받아 이를 form안에 넣는데에 그 임무를 다한다.

---

# input의 type

 input태그의 속성은 여러가지가 있지만 그 중 가장 큰 차이를 가르는 것이 type이다

type에 따라서 기입하는 형태가 달라지기에 그런데 가장 많이 사용하는 것을 열거하겠다.

 

1) text 

아이디: <input type="text" name="name">

 

2)password

비밀번호: <input type="password" name="pass">

비밀번호:

 

 

3)radio(단일선택 AorB)

    <input type="radio" name="gender" value="male">남성
    <input type="radio" name="gender" value="female">여성

남성

여성

 

 

4)checkbox(다중선택가능 A and B)

    <input type="checkbox" name="fruits" value="apple" checked>Apple
    <input type="checkbox" name="fruits" value="grape">Grape
    <input type="checkbox" name="fruits" value="orange">Orange

Apple Grape Orange

 

 

5) submit & button & reset

submit : 폼에 입력한 정보를 서버로 전송

button : 버튼 모양을 만듬

reset : 폼에 입력한 값을 초기화

<input type="submit" value="제출">
<input type="button" value="버튼">
<input type="reset" value="초기화">

6) hidden

<input type="hidden" name="name" value="value">

  hidden 타입은 데이터는 아니지만 클라이언트 컴퓨터가 서버 컴퓨터로 특정한 데이터를 전송하고 싶은 경우 사용한다. 화면에는 아무것도 없지만 sumbit을 하였을시 name값과 value값을 서버로 넘긴다.

 

위의 타입이 많이 사용하게 되는 타입이고 나머지 타입은 밑에 열거해놓겠다.

input타입	기능
file	업로드할 파일 선택
number	숫자만 입력받음
color	색상
date	날짜를 입력할 수 있는 컨트롤러
email	이메일을 입력받는 컨트롤러
image	submit버튼에 이미지로 넣을때 사용
url	url만 입력받는 컨트롤
week	주와 연도를 선택할 수 있는 컨트롤
month	월과 연도를 선택할 수 있는 컨트롤
tel	전화번호를 입력받고 검증하는 컨트롤
range	2개 숫자 사이를 슬라이더 형태로 선택할 수 있는 컨트롤
datetime	UTC 날짜/시각 형식을 이용한 날짜와 시각 표시 컨트롤
search	검색어 입력 양식을 만듬

 

---

# input의 그 외 속성들

type과 더불어 다른 속성들에 대한 해설들이다.

속성	해설
type	입력타입을 변경한다.
name	입력 양식 식별 이름
value	입력 양식 초기값
readonly	읽기전용
disabled	비활성화 설정 (true/false)
maxlength	최대 입력 글자수 설정
size	입력 양식의 너비
checked	초기 체크값에 대한 설정 (checkbox/radio에서 사용)

 

 

 

---

# input과 button?

  input에 대해 공부하면서 나중에는 button태그를 알게 되었는데 input의 타입에 button이 이미 있는데 왜 button이라는 태그가 따로 있는지에 대해 궁금해서 알아봤다. 우선 이 둘의 큰 차이는 태그가 스스로 닫히냐 아니냐는 건데 

 

<input type="button" value="전송">
<button>전송</button>

 

밑에 전송 버튼은 둘 다 저 코드로 만들어져있는데 input은 위와 같이 혼자 열리고 닫히는 태그이기에 button태그와의 비교에 있어 <img>나 <a>를 사용하는 데에 있어서 차이를 갖고 오게된다.

<input type="button" style="background-image: img" value="버튼1">
<img src="img"><button>버튼2</button></img>

input 태그가 걸린 버튼1은 이미지를 걸수 있지만 이미지의 스타일 속성을 세세히 수정하기 힘들것이고,

button태그의 버튼2는 <img>태그가 걸려있기에 별도로 스타일값을 주어 다양하게 편집을 하기 쉽게 된다.

이처럼 버튼값만 가지고 세세한 css를 준다면 <button>태그가 더 편할것이다.