[html] input type 속성

 

 

[html] input type 속성(text/checkbox/radio/submit 등) 

 

html에서 양식을 만들 때 form 태그를 사용하며 input 태그는 입력 영역을 만듭니다.

 

 

form 태그(html 양식 만들기)

 

[html] input 태그

 

 

입력 영역의 종류는 type 속성을 통해 선택합니다.

 

▶input type 속성과 속성값

 

속성	속성값	설명
type	표시할 input 요소의 종류
	text	기본값. 한 줄의 텍스트 입력 칸을 만듦(기본 너비 문자는 20)
	password	text 속성과 같지만, 문자를 숨겨서 표시(별표 처럼)
	checkbox	체크박스를 만듦(선택 항목 중 여러개 선택 가능)
	radio	라디오 버튼(선택 항목 중 1가지만 선택 가능)
	button	누름 버튼
	submit	전송 버튼
	reset	재설정 버튼
	file	파일 선택 창을 만듦.
	hidden	사용자에게 보이지 않는 숨김 창을 만듦
	image	이미지로 된 전송 버튼을 만듦 (src 속성으로 이미지 url 지정)
↓↓html5에 새로 추가된 속성값↓↓
	color	색상 선택 창을 만듦
	date	날짜 입력 창을 만듦(년, 월, 일)
	datetime	날짜 시간 창을 만듦(년, 월, 일, 시, 분, 초, 초의 분할)표준 시간
	datetime-local	날짜 시간 창을 만듦((년, 월, 일, 시, 분, 초, 초의 분할)표준시간 없음
	email	email 주소 창을 만듦
	month	달과 년 창을 만듦(표준 시간 없음)
	number	숫자 입력을 위한 창을 만듦(숫자 제한을 둘 수도 있음) max-최대값 min-최소값 step 허락하는 숫자 간격 value 기본값
	range	정확한 값이 중요하지 않는 숫자를 입력하는 창을 만듦 (슬라이더 장치 처럼)
	search	검색 창을 만듦
	tel	전화 번호 입력 창을 만듦
	time	시간 입력 창을 만듦(표준 시간 없음)
	url	주소 입력 창
	week	주와 년 입력 창 (표준 시간 없음)

 

 

각 속성값마다 브라우저 지원이 다르므로, 브라우저 지원 여부는 아래 링크 참조해주세요

 

http://www.w3schools.com/tags/att_input_type.asp

 

 

실제 작성 예를 보겠습니다~

input type.html

 

1. TEXT / PASSWORD

 <form action="url" method="post">

<h3> Type = "text" </h3>
ID: <input type="text" name="id">

<h3> Type = "password" </h3>
PASSWORD: <input type="password" name="pssd"> 

</form>

 

▶실행화면

 

 

 

 

2. CHECKBOX / RADIO

 <form action="url" method="post">
<h3> Type = "checkbox" </h3>
<input type="checkbox" name="animals" value="cat">cat<br>
<input type="checkbox" name="animals" value="dog">dog</br>
<input type="checkbox" name="animals" value="snake">snake

<h3> Type = "radio" </h3>
<input type="radio" name="media" value="tv">tv<br>
<input type="radio" name="media" value="radio">radio<br>
<input type="radio" name="media" value="internet">internet
</form>

 

▶실행화면

 

 

 

 

3. BUTTON/ SUBMIT/ RESET

 <form action="url" method="post">

<h3> Type = "submit" </h3>
<input type="submit">

 

<h3> Type = "reset" </h3>
<input type="reset">

<h3> Type = "button" </h3>
<input type="button" value="click">

</form>

 

▶실행화면

 

 

 

4. FILE/SEARCH/URL/EMAL/TEL

 <form action="url" method="post">

 

<h3> Type = "file" </h3>
파일 업로드: <input type="file" name="upload" value="파일" >

 

<h3> Type = "search" </h3>
검색: <input type="search">

 

<h3> Type = "url" </h3>
Homepage: <input type="url" name="homepage">

 

<h3> Type = "email" </h3>
Your e-mail:  <input type="email">

 

<h3> Type = "tel" </h3>
TEL:  <input type="tel">

 

</form>

 

 ▶실행화면

 

 

5. DATETIME-LOCAL/MONTH/WEEK

 <form action="url" method="post">

 

<h3> Type = "datetime-local" </h3>
날짜/시간:  <input type="datetime-local">
 

<h3>Type = "month" </h3>
월:  <input type="month">

 

<h3>Type = "week" </h3>
주:  <input type="week">

 

</form>

 

▶실행화면

 

 

6. COLOR/RANGE/NUMBER

 <form action="url" method="post">

<h3> Type = "color" </h3>
원하는 색상을 선택하세요  <input type="color">

<h3> Type = "range" </h3>
 <input type="range" min="10" max="20">

<h3> Type = "number" </h3>
주문 수량(1~10 사이): <input type="number" min="1" max="10">

</form>

 

▶실행화면

 

 

 

 

[css] content 속성 사용법

 

수직선 그리는법 2가지(인용문 앞에 활용)

 

html] 수평선 그리기, hr 태그

 

css 선택자, 선택자 종류와 사용법