HTML.13.Input Tag-1

<input /> 태그

사용자로부터 입력을 받을 수 있는 입력 필드를 정의

사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 <form>요소 내부에서 사용

인풋 요소 자체는 빈 태그이며 속성만을 포함함

라벨 요소를 사용하면 인풋 태그의 라벨 정의가 가능

입력 필드의 기본 너비는 20자

 

<input /> 태그 type 속성 정리표

종류	설명
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스
password	비밀번호 입력할 수 잇는 필드
search	검색할 때 입력하는 필드
url	URL 주소를 입력할 수 잇는 필드
email	이메일 주소를 입력할 수 있는 필드
tel	전화번호를 입력할 수 있는 필드
checkbox	주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스
radio	주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼
number	숫자를 조절할 수 있는 스핀 박스
range	숫자를 조절할 수 있는 슬라이드 막대
date	사용자 지역을 기준으로 날짜(연, 월, 일) 삽입
month	사용자 지역을 기준으로 날짜(연, 월) 삽입
week	사용자 지역을 기준으로 날짜(연, 주) 삽입
time	사용자 지역을 기준으로 날짜(시, 분, 초, 분할 초) 삽입
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 삽입
submit	전송 버튼
reset	리셋 버튼
image	submit 버튼 대신 사용할 이미지 삽
button	일반 버튼
file	파일을 첨부할 수 있는 버튼
hidden	사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드

 

type=”text” & type=”password”

텍스트 필드: 주로 아이디나 이름 등 한 줄 짜리 일반 텍스트를 입력할 때 사용

비밀번호 필드: 입력받는 내용을 화면에 보여주지 않는 텍스트를 입력할 때 사용

종류	설명
size	텍스트, 비밀번호 필드의 길이를 지정, 화면에 몇 글자가 보이도록 할 것인지를 지정
value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용 → 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시 / 비밀번호 필드에서는 사용X
maxlenght	텍스트 필드와 비밀번호 필드에 입력할 수 잇는 최대 문자 수 지정

 

type=”search” & type=”url” & type=”email” & type=”tel”

텍스트 필드를 기본으로 하는 type속성 >> 용도에 맞게 입력할 수 있도록 함

웹 브라우저 화면에서는 텍스트 필드와 같다

 

search

검색을 위한 텍스트 필드

 

url

웹 주소를 입력하는 필드

 

email

이메일 주소를 입력하는 필드

입력값이 형식에 맞지 않으면 웹 브라우저가 오류 메시지를 보냄

 

tel

전화번호를 나타내는 필드

 

type=”checkbox” & type=”radio”

여러 항목들 중 원하는 항목을 선택할 때 사용하는 요소

 

checkbox

2개 이상 선택 가능

 

radio

1개만 선택 가능. 이미 선택한 항목이 있을 때 다른 항목을 선택하면 기존 항목은 선택이 취소

value	선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정 → 영문 OR 숫자 / 필수 속성
checked	체크 박스나 라디오 버튼의 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목 지정
name	라디오 버튼이나 체크 박스가 여러 개 있는 경우, 서버의 폼 프로그램에서 구분을 하기 위해 이름을 지정 ’radio 버튼’은 여러 개 중에서 한 가지만 선택하는 것이기 때문에 관련 있는 그룹끼리는 같은 name 속성값을 지정해야한다 → 지정하지 않을 경우 중복 선택이 가능하기 때문에 radio 기능을 사용하지 못한다.

 

type=”submit” & type=”reset”

submit

전송 버튼

>> 전송된 정보는 폼 태그의 액션 속성에서 지정한 처리 프로그램으로 넘겨짐

 

reset

리셋 버튼

인풋 요소에 입력된 모든 정보를 초기화

 

type=”number” & type=”range”

숫자 입력 필드 

 

number

스핀 박스를 사용해 숫자를 입력

>> 스핀 박스: 입력창 옆 화살표를 클릭하여 숫자를 높이거나 낮추는 기능

 

range

슬라이드 막대를 움직여 숫자를 입력

속성	설명
min	필드에 입력할 수 있는 최솟값 지정 / 기본 최솟값 : 0
max	필드에 입력할 수 있는 최댓값 지정 / 기본 최솟값 : 100
step	숫자 간격을 지정할 수 있는 속성 / 기본값 : 1
value	필드에 표시할 초깃값

 

type=”button”

기본 버튼

정해진 기능이 없으며 자바스크립트와 연동하여 사용

<input type="button" value="버튼에 표시할 내용" />

 

type=”file”

파일을 첨부한다

웹 브라우저 화면에 파일 선택/찾아보기 버튼을 표시

>> 버튼을 클릭하여 파일 선택시 파일 첨부

 

type=”hidden”

히든 필드

화면의 폼에는 보이지 않음

사용자가 입력을 마치면 폼과 함께 서버로 전송됨

사용자에게 보여주지 않으면서 관리자는 알아야 하는 정보를 히든 필드로 입력

<input type="hidden" name="이름" value="서버로 넘길 값" />