HTML - input 태그

input 태그로 비밀번호나 내용 선택, 또는 내용을 입력하고, 파일을 선택할 수 있으며, 이러한 값들을 전송시킬 수 있습니다.

<input name="your_name" type="text" value="">

input 태그에 사용할 수 있는 속성은 다음과 같습니다.

속 성	설 명
name	입력 값에 대한 이름을 결정하는 속성 name 이름은 프로그램으로 전달할 때 변수 명이 되므로 입력 값마다 각기 다른 name 을 정해주세요.
type	이 속성 값이 checkbox 나 radio 일 때는 각각의 name 은 동일하게 하고, value 값만 다르게 합니다.
value	입력 필드의 기본 값을 지정하는 속성
size	입력 필드의 크기를 픽셀로 지정하는 속성 type 속성 값이 text 나 password 일 때는 입력하는 문자의 수가 됨.
minlength	입력필드의 입력할 수 있는 문자의 최소 값을 나타내는 속성
maxlength	입력필드의 입력할 수 있는 문자의 최대 값을 나타내는 속성
checked	type 속성 값이 checkbox 나 radio 일 때 checked 속성이 부여되면 해당 입력 값이 선택된 상태로 설정
src	type 이 image 일 때, 사용될 그림 파일의 경로
readonly	입력필드가 읽기 전용이 되는 속성
disabled	입력필드를 아예 비활성화하는 속성. 즉 사용자가 입력할 수 없는 상태가 됩니다
tabindex	속성 값으로 숫자 값을 가지며 탭 키를 사용해 마우스 포커스를 옮길 때의 순서를 정해줄 수 있는 속성
autofocus	autofocus = "true" 페이지를 로드했을 때 맨 처음 필드에 포커스를 주는 속성 페이지 하나에 자동 포커스 속성을 하나만 쓸 수 있음.
placeholder	placeholder = "안내할 텍스트" 사용자에게 어떤 식으로 넣으면 되는지 알려주는 텍스트
autocomplete	autocomplete = "off” (자동완성방지 속성). on 또는 off (off 는 자동완성을 금지)
required	반드시 입력해야 하는 입력필드라면 이 속성을 정의하세요.
pattern	정규 표현식을 사용해서 사용자의 입력을 검사 Ex.) pattern = "^[1-9]+[0-9]*$"
min	최소 값. (date, datetime, datetime-local, month, week, time, number, range 속성일 때만 사용 가능)
max	최대 값. (date, datetime, datetime-local, month, week, time, number, range 속성일 때만 사용 가능)
step	허용된 범위 내의 숫자의 간격. (min, max성을 사용할 때만 사용 가능)

type 속성

type 속성은 다음 중 하나를 타입으로 지정합니다.

button 요소

버튼으로 표시합니다.

text 요소

한 줄 단위의 텍스트 입력란을 생성해 줍니다. 이후에 나올 textarea 태그는 여러 줄을 입력받을 수 있습니다.

<input type="text" maxLength="20" name="textfield">

password 요소

text 와 비슷하지만 사용자가 입력한 값을 직접 보여주기 보다 *로 나타내 줍니다. 보통 로그인시 비밀번호 등 민감한 정보를 감추고자 할 때 사용됩니다.

<input type="password" maxLength="20" name="pw">

checkbox 요소

말 그대로 체크박스 입니다.

한번에 여러 개를 체크해 선택할 수도 있습니다. 보통 회원가입시 관심분야 체크나 메일링서비스를 받을 것인지 받지 않을 것인지 등을 체크할 때 사용하게 됩니다.

위에서 언급한대로 name 속성은 같게 value는 다르게 설정해야 합니다.

<input type="checkbox" value="체크1" name="checkbox">체크1  
<input type="checkbox" value="체크2" name="checkbox">체크2
<input type="checkbox" value="체크3" name="checkbox">체그3

radio 요소

체크박스와 마찬가지로 마우스로 클릭해서 입력 값을 선택할 수 있지만 체크박스는 여러 개를 동시에 선택할수 있는 반면 라디오 버튼은 단 하나만 선택할 수 있습니다. 마찬가지로 name 속성은 같게 value 는 다르게 설정합니다.

<input type="radio" value="선택1" name="radiobutton">선택1
<input type="radio" value="선택2v name="radiobutton">선택2
<input type="radio" value="선택3" name="radiobutton">선택3

submit 요소

사용자가 입력 양식에 내용을 입력한 후 내용을 서버로 전송할 때 사용하는 값입니다. value라는 속성 값이 버튼의 이름이 됩니다.

<input type="submit" value="보내기" name="Submit">

reset 요소

이 버튼을 누르게 되면 폼 안의 모든 내용이 초기화 됩니다. 마찬가지로 value 라는 속성 값이 버튼의 이름이 됩니다.

<input type="reset" value="취소" name="Reset">

image 요소

submit 버튼을 좀더 예쁜 이미지를 바꿀 수 있습니다.

<input type="image" src="img/icon.gif" border="0"  name="imageField">

image 요소를 정의하였을 때 다음 속서을 사용할 수 있습니다.

속 성	설 명
width	이미지의 너비를 설정합니다.
height	이미지의 높이를 설정합니다.

file 요소

게시판 등에서 파일을 업로드 다운로드 할 때 사용하죠? 파일을 찾아서 첨부하게 되면 폼 내용을 전달할 때 파일 정보도 함께 전달하게 됩니다.

<input type="file" name="file">

다중 선택을 위해서는 multiple 속성을 추가해야 하며, mime-type 을 제한하기 위해서는 accept 요소를 사용해야 합니다.

hidden 요소

실제 브라우저에는 그 입력필드를 감추어 줍니다. 하지만 hidden 으로 설정된 input 태그의 value 값은 폼 전달시 서버로 함께 전달이 됩니다.

<input type="hidden" name="tagclub" value="태그클럽">

search 요소

브라우저에 따라 모양이 달라진다는 점 말고는 text 를 지정한 것과 차이는 없습니다.

<input type="search"  name="user">

tel 요소

text 와 큰 차이는 없지만 브라우저에 따라 모양이 달리지고, 특히 스마트폰에서는 특별한 UI 가 나타납니다.

<input type="tel"  name="user">

url 요소

정확한 URL의 문자열을 검증합니다.

<input type="url"  name="user">

email 요소

정확한 이메일 형식의 문자열을 검증합니다.

<input type="email"  name="user">

datetime, date, month, week, time, datetime-local 요소

브라우저에 따라 달력이 표시되거나 정확한 날짜 형식을 검증합니다.

min 과 max 속성을 사용하여 값의 범위를 지정할 수 있습니다. step 속성을 이용하면 값의 간격을 지정할 수 있습니다.

속 성	설 명
datetime-local	2009-09-09T09:00Z 형식. UTC 라면 Z가 붙음.
week	2009-W36 형식. 2009년 36번째 주라는 뜻
date	달력이 표시됩니다.

<input type="date" name="user" min="2009-09-10" max="2009-09-15"><br/>
<input type="datetime" name="user"><br/>
<input type="month" name="user"><br/>
<input type="week" name="user"><br/>
<input type="time" name="user"><br/>
<input type="datetime-local" name="user">

number 요소

숫자가 입력되었는지 검증합니다. min 과 max 속성을 사용할 수 있습니다.

<input type="number" name="user" min="2" max="10" value="2" step="2">

range 요소

슬라이더로 숫자의 범위를 지정할 수 있습니다. min 과 max 를 생략하면 0에서 100 사이의 범위의 값을 지정합니다.

<input type="range" name="user" min="2" max="100">

color 요소

#ffffff 형식의 문자열을 검증하며, 색상을 선택할 수 있는 창이 표시됩니다.

<input type="color"  name="user">