[html] 폼 만들기, 폼 관련 태그들 ② <input> 태그

 

 

<input> 태그

: 폼 태그로 내용을 입력할 때 대부분 <input> 태그를 사용해 처리합니다. 

: type 속성 값에 따라 입력 내용 종류를 지정합니다.

: type 속성이 무엇인지에 따라 사용할 수 있는 속성들이 달라집니다.

 

 

- type 속성에 들어가는 값들

hidden	: 사용자에게는 보이지 않지만 서버로 넘겨지는 값 : 폼을 서버로 전송할 때 함께 전송되는 요소 : <input type="hidden" name="이름" value="서버로 넘길 정보">
text	: 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 : 보통 아이디나 이름 등의 텍스트 입력 : <input type="text" [속성="속성 값"]>
search	: 검색 상자, 검색 필드 : 검색 창에 X 표시가 되어 검색어 삭제가 쉬움 : <input type="search" [속성="속성 값"]>
tel	: 전화번호 입력 필드 : 사용자가 숫자만 입력하는지 등을 체크하는 건 아님 : <input type="tel" [속성="속성 값"]>
url	: url주소를 입력할 수 있는 필드 : 웹 주소 필드 : http://로 시작하느 사이트 주소 입력(입력 잘 했는지 체크해 주는 건 아님) : <input type="url" [속성="속성 값"]>
email	: 메일 주소를 입력할 수 있는 필드 : 메일 주소 형식 자동 체크(@없으면 알림 뜸) : <input type="email" [속성="속성 값"]>
password	: 비밀번호를 입력할 수 있는 필드 : 입력 값들이 '*'나 '•’로 표시 : <input type="password" [속성="속성 값"]> : 속성 ) size, maxlength

datetime	: 국제 표준시로 설정된 날짜와 시간(연/월/일/시/분/초/분할 초) : 속성 ) min, max, step(스핀 박스 화살표 누를 때마다의 증감값)
datetime-local	: 사용자가 있는 지역을 기준으로 날짜와 시간(연/월/일/시/분/초/분할 초) : value="2022-04-01T09:00" : 속성 ) min, max, step(스핀 박스 화살표 누를 때마다의 증감값)
time	: 사용자 지역 기준으로 시간(시/분/초/분할 초) : value="09:00" : 속성 ) min, max, step(스핀 박스 화살표 누를 때마다의 증감값)
date	: 사용자 지역 기준으로 날짜(연/월/일) : yyyy-mm-dd 형식 : 지원하지 않는 브라우저도 있음
month	: 사용자 지역 기준으로 날짜(연/월) : yyyy-mm 형식 : 지원하지 않는 브라우저도 있음
week	: 사용자 지역 기준으로 날짜(연/주) : 지원하지 않는 브라우저도 있음

number	: 숫자 조절 가능한 화살표 : 숫자값을 올리고 내리는 버튼이 뜸 : <input type="number" [속성="속성 값"]> : 속성 ) min(최솟값), max(최댓값)
range	: 숫자 조걸 가능한 슬라이드 막대 : 값이 같이 뜨는 건 아님, 슬라이드 막대만 생김 : <input type="range" [속성="속성 값"]> : 속성 ) min(최솟값), max(최댓값)
color	: 색상 표에서 색상 선택 : <input type="color" [속성="속성 값]> : value="기본 색"
checkbox	: 다중 선택 가능한 체크 박스 : <input type="checkbox" [속성="속성 값]> ex) <p>평균을 내고자하는 과목에 모두 체크해주세요.(다중선택)</p> <label><input type="checkbox" name="subject" value="korea">국어</label> <label><input type="checkbox" name="subject" value="english">영어</label> <label><input type="checkbox" name="subject" value="math">수학</label>
radio	: 단일 선택 가능한 라디오 버튼 : <input type="radio" [속성="속성 값]> ex) <p>먹고 싶은 점심 메뉴를 고르시오. (1종류만 가능)</p> <label><input type="radio" name="lunchMenu" value="western">양식</label> <label><input type="radio" name="lunchMenu" value="chinese">중식</label> <label><input type="radio" name="lunchMenu" value="korean">한식</label>
file	: 파일 첨부 버튼 : 파일 선택 버튼이 만들어지고 누르면 파일 탐색창이 뜸 : <input type="file" [속성="속성 값]>
submit	: 서버 전송 버튼 : 폼을 서버에 전송하고 리셋 함 : value 속성을 통해 버튼 내용 지정 : <input type="submit" [속성="속성 값]>
image	: submit 버튼 대신 사용할 이미지 : 이미지 전송하는 거 아님 : <input type="image" src="경로" alt="대체 텍스트" [속성="속성 값"]>
reset	: 리셋 버튼 : 폼에 작성된 내용을 전부 삭제 : value 속성을 통해 버튼 내용 지정 : <input type="reset" [속성="속성 값]>
button	: 버튼 : value 속성을 통해 버튼 내용 지정 : <input type="button" [속성="속성 값]>

 

 

 

- id 속성

: 모든 태그에 기본적으로 사용 가능한 속성입니다만,

: <input>태그와 함께 <label>태그를 이용하여 캡션을 붙일 수 있다는 특징이 있습니다.

: 캡션을 붙이면 <label>태그 안에 있는 내용을 눌러도 해당 <input>태그의 기능을 사용할 수 있습니다.

 

 

- autofocus

: 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시

: 속성 값 없음

 

 

- placeholder

: 입력란에 표시하는 힌트

: 필드를 클릭하면 사라짐

: ex) placeholder="아이디를 입력하세요"

 

 

- readonly

: 내용을 보기만하고 입력은 못 하게 함

: 속성 값 없음 ( readonly="readonly", readonly="true" 라 표시하기도 함 )

 

 

- required

: 필수적으로 입력해야 하는 필드

: 속성 값 없음 ( required="required" 가능 )

: 브라우저에서 직접 체크하는 거라 오류 메시지는 브라우저마다 다름

 

 

그 외)

- min, max : 해당 필드의 최솟값,최댓값

- step : 허용된 범위 내의 숫자 간격

: min, max, step은 type이 date, datetime, datetime-local, month, week, time, range, number 일 경우에만 사용

 

- size : 텍스트 관련 필드에서 화면에 몇 글자까지 보이게 할지 결정

- maxlength : 입력 가능한 최대 글자

- minlegth : 입력해야 할 최소 글자 (크롬과 안드로이드 브라우저만 지원)

 

 

 

 

 

 

 

 

 

vvvvv이전 글 보러가기vvvvv

[html] 폼 만들기, 폼 관련 태그들 ① <form>, <label>, <fieldset>, <legend>