[HTML/HTML5] <input> 태그 입력 타입 종류 및 설명 & 사용예시

​

---

 

1. <input> 태그 입력 타입 종류 및 설명

​

입력 타입	설명	속성
<input>	데이터를 입력할 입력란의 타입을 지정하며, 종료 태그 없이 <input type=“타입”속성=“속성값”…>의 형식으로 사용함.	accept, height, width, src, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, alt, value, formnovalidate, size, type, formtarget, list, min, max, step, minlength, multiple, pattern, name, readonly, placeholder, required, maxlength
<input type=“button”>	아무 기능이 없는 일반 버튼을 생성. onClick 속성으로 스크립트 코드를 연결하여 기능을 추가함. value=“버튼명” 속성으로 버튼 위 표시될 이름 지정함.	value
<input type=“checkbox”>	체크박스를 생성하여 나열된 여러 항목 중 다중 선택이 가능한 양식의 태그.	name, value, checked
<input type=“color”>	색상표를 생성함. name 속성에“컬러명”과 value="컬러번호"를 입력하면 컬러가 지정됨.	name, value
<input type=“datetime-local”>	사용자 지역 기준 날짜와 시간(년, 월, 일, 시, 분, 초) 생성.	min, max, step, value
<input type=“date”>	사용자 지역 기준 날짜(년, 월, 일) 생성.	min, max, step, value
<input type=“email”>	이메일 입력 필드를 생성. 입력된 이메일의 유효성을 검사함.	multiple
<input type=“file”>	사용자의 파일 첨부를 위한 시스템상의 [파일 선택] 버튼 생성. accept=“파일유형”속성을 사용하면 확장자가 지정됨.	accept, multiple
<input type=“hidden”>	데이터를 숨겨진 상태로 입력받음.	name, value, required
<input type=“image”>	이미지 형태의 파일 전송(submit) 버튼을 생성함. src=“이미지 경로”속성으로 삽입할 이미지를 지정한다.	src, width, height, alt
<input type=“number”>	특정 범위의 숫자를 지정하여 입력하며. min(최솟값), max(최댓값), step(유효간격), value(초기값) 속성 등을 사용함.	min, max, step(유효간격), value(초기값)
<input type=“password”>	비밀번호를 입력할 필드를 생성하며,‘*’같은 기호로 바뀌어서 표시됨. size 속성으로 크기 지정.	name, size
<input type=“radio”>	라디오 버튼 생성하여 항목 중 1개만 선택 가능한 양식 생성.	name, value, checked
<input type=“range”>	특정 범위의 숫자를 지정하여 입력하며. min(최솟값), max(최댓값), step(유효간격), value(초기값) 속성 등을 사용함.	min, max, step, value
<input type=“reset”>	입력한 내용을 초기화로 만드는 취소 버튼 생성. value=“버튼명” 속성으로 버튼 상 표시할 이름을 지정함.	value
<input type=“search”>	검색어 필드를 생성함. size 속성을 이용하여 크기 지정.	name, size, maxlength, value, placeholder, disabled, autocomplete
<input type=“submit”>	입력데이터를 <form>action속성에 지정한 페이지로 전송하는 버튼. value=“버튼명” 속성으로 버튼 상 표시될 이름 지정.	value
<input type=“tel”>	전화번호 입력 필드를 생성. 입력된 번호의 유효성을 검사.	name, size, maxlength, value, placeholder, disabled, autocomplete, required
<input type=“text”>	한 줄짜리의 단순한 텍스트를 입력할 수 있는 필드 생성.	name, size, maxlength, value, placeholder(값 고정), disabled, autocomplete
<input type=“time”>	사용자 지역 기준 시간(시,분,초,) 생성.	min, max, step, value
<input type=“url”>	url 입력 필드를 생성함. 입력된 url의 유효성을 검사함.	placeholder
<input type=“week”>	사용자 지역 기준 날짜(년,주) 생성.	min, max, step, value
<button>	일반 버튼을 생성하는 input type=“button”과 유사하나 버튼에 텍스트와 이미지 표현이 가능함.	autofocus, disabled, name, restm, type, subit, value
<pattern>	입력값의 유효성 검사를 위한 정규 표현식 (특정 규칙을 가진 문자열 표현에 쓰이는 수식) 지정.	-

​

 

---

 

2. 일부 간단한 사용 예

* (html, head, body 등 기본 태그와 구체적 태그 생략 및

해당 태그 사용 예시만 간단히 설명했으니 참고부탁드립니다.) *

 

 

▶ <input type=“button”>

: value 속성에는 버튼 상 나타낼 버튼명 입력, onClick 속성을 이용하여 스크립트 코드 추가 연결.

<input type="button" value="이미지 2배 확대"
                     onClick="imageSizeX2()">
                     
<script> function imageSizeX2() {

​

▶ <input type=“image”>

: 이미지를 전송할 버튼을 생성하며, src 속성은 버튼상 나타낼 이미지의 경로, 버튼의 사이즈는 width 속성으로 너비 및 height 속성으로 높이를 설정하며, alt 속성으로 버튼상 나타낼 글자 입력.

<input type "image" src="cat.jpg" alt="전송하기"
                    width="50" height="50">

​

▶ <input type=“number”>

: 특정 범위의 숫자를 입력할 때 사용하며, min 속성으로 최솟값 및 max 속성으로 최댓값을 설정하며, step 속성으로 숫자의 유효한 간격을 설정, value 속성으로 초기값을 설정.

<input type="number" min="100" max="200"
                     step="10" value="100">

​

▶ <input type=“color”>

: 색상표를 선택하여 색상을 입력하며, name 속성에 컬러명과 value 속성에 컬러번호를 입력하여 컬러를 지정.

<input type="color" name="color" value="#000000">

​

▶ <input type=“password”>

: 비밀번호 입력 시 '*' 같은 기호로 바뀌어 나타냄. size 속성으로 입력 크기를 지정, name 속성으로 이름 지정.

<input type="password" name="pwd" size="11">

​

▶ <input type=“url”>

: url을 입력 필드를 생성하며 자동으로 유효성을 검사함. name 속성으로 이름 지정, placeholder 속성으로 연결 될 주소 입력.

<input type="url" name="url" placeholder="http://www.naver.com">

​

▶ <input type=“time”>

: 사용자의 지역을 기준으로 한 시간(시, 분, 초)을 생성. step 속성으로 유효한 간격을 설정하며, value 속성으로 초기값을 설정하고, name 속성으로 이름을 지정함.

<input type="time" step="5" name="time"
                   value=“00:00:00">

​

​

---

 

​

​