본문 바로가기

Programming/HTML/JavaScript/CSS

[HTML] input 태그 총정리

1. <input> : 평범하게 글자나 텍스트칸을 넣을 수있는 공간이 생기죠.

2. <input type=""> : 기존의 input에다가 type를 지정하여 type의 옵션을 넣으면, 다양한 모양이 됩니다. 단 입력이나 기타 등등의 모양 꼴로 변하죠.

3. <input type="text"> : 이건 <input>과 동일한 것인데, text를 넣을 수 있습니다.
4. <input type="password">: 이건 1번과 2번과 3번과 동일한데, 비밀번호로 지정되어 글자를 넣든 숫자를 넣든 **** <-이렇게 표시됩니다.

4. <input type="checkbox"> : 이건 체크박스로 나타납니다.
5. <input type="checkbox" checked> : 이건 체크박스의 선택된 것으로 나오죠.
6. <input type="checkbox" checked disabled> : 이건 체크되었다가 다시는 선택 못하게 하는거죠

7. <input type="radio"> : 이건 라디오 버튼으로 나타납니다.
8. <input type="radio" checked> : 이건 라디오 버튼의 선택된 것으로 나오죠.
9. <input type="radio" checked disabled> : 이건 선택되었다가 다시는 선택 못하게 하는거죠

10. <input type="hidden"> : 이건 숨김필드입니다. 값을 넘겨받을때 숨김속성으로 몰래 감춰지죠. 대부분 form태그의 중요한 속성을 사용할 때 하더군요.

11. <input type="image" src="이미지 경로및 주소"> 이건 이미지의 경로를 넣어 일반<img>태그 처럼 할 수 있습니다. 단 버튼이 이미지의 경로로 바뀌고,form 태그의 submit 태그와 함께 포함되어 있습니다.

12. <input type="reset"> : 이건 초기화 하는 버튼(영어로 submit 또는 초기화라고 나옴)
13. <input type="reset" value="초기화"> :  value값에 초기화라고하면 초기화라고 만들어줌

14. <input type="submit"> : 이건 전송버튼
15. <input type="submit" value="전송함"> : 전송버튼인데다가 버튼이름을 전송함 이라고 할 수있음.
16. <input type="file"> : 파일을 첨부할 때 사용하며, CSS와 곁들어서 사용 가능

# 기타 1
1. <input type="text" value="텍스트"> : 이렇게 사용하면 텍스트 칸에 텍스트 라고 글자가 이미 나와버림
2. <input type="text" value="텍스트 사이즈 지정" size="20"> : 텍스트 사이즈를 20만큼 지정
3. <input type="text" value="" name="text"> : php이나, 자바스크립트를 사용할때 변수를 넘거나 받을때 text라는 값을 받도록 name의 갑을 text라 지정하고 이 버튼의 태그 이름을 text라고 지정함
4. <input type="text" value="" name="text" style="border:1;color;red"> : 이건 CSS인데 여러모로 사용 할수있음. 굳이 설명을 하지 않겠음 CSS에서 color;red 라고 지정해주면, 텍스트칸의 글자색을 빨간색으로 지정해줌

# 기타2
특히 value는 <input>태그의 텍스트의 이름을 부여 할때 사용함
예를 들면, <input>과 <input value="텍스트칸 이에요"> 와 차이점을 알게 될 것임

각버튼마다 name값을 부여 할 수있음(name값은 자기마음대로 지정가능)
예를 들면) <input name="button">

각버튼마다, type를 지정할수 있다. 위의 설명을 보면 알겠죠?
type="text/password/hidden/radio/checkbox/file/submit/reset/image"

# 기타3
버튼에 CSS를 첨가하여 이쁘게 꾸밀 수있다.
<input name="button" style="background-color:purple;border-color:red;font-face:굴림;font-size:9pt;">
↑위의 처럼

# 기타4

disabled의 속성과 maxlength="15"의 속성
disabled속성은 input의 선택을 못하게 막아준다
<input type="text" value="" disabled>
<input type="text" value="ㅋㅋㅋ 금지욧" disabled>
<input type="radio" value="" checked disabled>
<input type="checkbox" value="" checked disabled>

그리고 maxlength 속성은 최대 글자 입력넣을 수있는 제한수입니다.
<input type="text" value="" maxlength="20"> <--이렇게 하면 글자 입력수를 20자리만 입력가능 

'Programming > HTML/JavaScript/CSS' 카테고리의 다른 글

[HTML] 특수문자표  (0) 2012.12.26
[HTML] 색상표  (0) 2012.12.17
[JavaScript] jQuery의 기본  (0) 2012.12.17
[JavaScript] substr (문자열 나누기) 사용  (0) 2012.12.17
[JavaScript] window 객체  (0) 2012.12.17