본문 바로가기

IT프로그래밍

input type별 설명, 예제 / html input type / input type = "text" / input type = "button"



Insert title here

예시를 돕기위해 HTML로 작성후 편집하였습니다
배경이 흰색이라 잘안보여서 박스안은 빨간색으로 표시하였습니다
1. input type="text"
텍스트를 입력할 수있는 텍스트 입력 상자


참고자료











소스
<input type="text" name="" size="40" value="기본형식">
<input type="text" name="" size="40" value="Readonly (입력불가)" readonly>
<input type="text" name="" size="40" value="Disabled (작동불가)" disabled>
<input type="text" name="" size="40" value="입력폰트 설정" style="font-size:12pt; color:#ff0000; font-weight:bold;">
<input type="text" name="" size="40" value="테두리 0px 로 설정" style="border: 0px;">
<input type="text" name="" size="40" value="테두리 1px 로 설정" style="border: 1px solid #ff0000;">
<input type="text" name="" size="40" value="테두리 4개 각각 설정" style="border-right: #ff0000 1px solid; border-left: #00ff00 1px solid; border-top: #ffff00 1px solid; border-bottom: #0000ff 1px solid;">
<input type="text" name="" size="40" value="배경색 회색으로 설정" style="background-color: #e2e2e2;">
<input type="text" name="" size="40" value="입력값 오른쪽 정렬" style="text-align: right;">
<input type="text" name="" size="40" value="크기 강제 조정" style="height:30px; width:200px">
<input type="text" name="" size="40" value="패딩주기(상:5,우:0,하:0,좌:10)" style="padding:5px 0px 0px 10px;">

출처 : 네이버 지식인



2. input type="password"
보통 비밀번호를 쓰는 텍스트란이 *로 표시되는 것같은 비밀번호 입력상자


3. input type = "file"
파일을 선택하는 파일선택 상자


4. input type = "checkbox"
체크박스를 생성, value로 값을 설정할 수 있고, 체크가 되면 그 값을 리턴, 체크되지 않으면 0 리턴
체크박스 →

5. input type = "radio"
라디오 버튼을 생성, 체크 박스경우는 YES, NO로 2가지 선택이 가능하지만 선택의 경우가 3가지 이상인 경우 사용
이때 반드시 name이 같아야 한다 예를 들어
input type = "radio" name = "rr" value="1"
input type = "radio" name = "rr" value="2"
input type = "radio" name = "rr" value="3"
이대로 소스를 그대로 코딩하면
1
2
3
라디오 버튼 옆의 숫자는 html에서 입력한 값이다

6. input type = "button"
value 값은 버튼에 표시되는 text이고, 클릭되었을 때 핸들러를 통해 다양한 효과가 구현이 가능하다. 자료를 넘겨준다거나 팝업창을 띄운다거나 등등..
메세지 출력 ->
새창으로 링크 열기 ->