input태그속성 및 input태그type종류

💡 핵심 요약 (TL;DR)

input태그속성 및 input태그type종류의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. 필수입력요소를 설정할때 required 속성을 지정하면 된다.

required 속성

필수입력요소를 설정할때 required 속성을 지정하면 된다.
필수입력요소를 입력하지않고 submit버튼을 누르면 해당칸을 입력하라는 메세지가 출력되고 포커스까지 해준다.

<h1>필수입력요소로 지정 : required </h1>
<label>연락처 : </label><input type="text" required>

readonly 속성 vs disabled 속성

• readonly : 읽기전용이다. 쓰기가 불가하며 드래그는 가능하다. 태그자체를 가져가서 다른 곳에서 사용가능.

  • 폼태그를 이용해서 submit했을때 데이터가 그대로 넘어가서 다른 곳에서 사용할 수 있다

• disabled : 사용불가이다. 쓰기도 불가하고 드래그도 불가능하다. 태그자체를 가져갈수없어서 다른 곳에서 불러 사용할수없다.

  • 폼태그를 이용해서 submit했을때 데이터가 아예 넘어가지않아 다른 곳에서 사용할 수 없다

required속성과 함께 출력해보면 아래 이미지처럼 출력된다.

reired속성과 readonly 속성, disabled 속성은 의미상 맞으면 다른 tag에도 사용가능하지만 실무에서는 input타입에 가장 많이 쓰인다!!!

type="number" min, max, step속성

입력창을 클릭하면 오른쪽에 화살표버튼이 생긴다.

min값을 지정하지않으면 음수도 넣을 수 있다.
step에 원하는 숫자n을 넣으면 n단위로 증가/감소 시킬 수 있다.
주로 쇼핑몰에서 사용할수있는 속성이다

<h1>type="숫자" min, max, step </h1>
<label>type="숫자" min="1" 최소값 : <input type="number" min="1">개</label><br>
<label>type="숫자" max="10" 최대값 : <input type="number" max="10">개</label><br>
<label> type="숫자" step="5" 5단위로 증가<input type="number" max="100" step="5">개</label><br>

출력값은 아래와 같다.

fieldset 필드셋

예로 쇼핑몰페이지에서 주문자정보, 배송지정보으로 각각 필드셋으로 묶어서 처리할 수 있다.

<fieldset>
	<legend>배송지정보</legend>
	배송지주소 : <input type="text" placeholder="신주소"><br>
	받는사람 연락처 : <input type="text" size="30" placeholder="예) 010-1234-5678"><br>
</fieldset>

html5에서 추가된 input태그 types 종류

input태그의 타입은 굉장히 다양하다

종류

참고링크 : W3SCHOOLS input type

특징

브라우저마다 지원가능여부도 다르고 디자인도 다르다.
지원가능여부를 확인할 수 있는 유용한 사이트인 Can I use가 있다.
참고링크 : Can i use에서 검색을 통해 브라우저별로 지원가능한지 확인할 수 있다.

전체 예시

<h1>html5에서 추가된 inpu태그 type값</h1>
<ul>
	<li>input type="date" : <input type="date"></li>
	<!-- 날짜를 포함하는 입력영역(년월일) -->
	<li>input type="datetime-local" : <input type="datetime-local"></li>
	<!-- 사용자가 위치한 나라를 기준으로 날짜와 시간 입력(년월일시분초) -->
	<li>input type="time" : <input type="time"></li>
	<!-- 사용자가 위치한 나라를 기준으로 시간 입력 (시분초) -->
	<li>input type="week" : <input type="week"></li>
	<!-- 사용자가 위치한 나라를 기준으로 날짜 입력 (년주) -->
	<li>input type="month" : <input type="month"></li>
	<!-- 사용자가 위치한 나라를 기준으로 날짜 입력 (년월) -->
	<li>모바일 브라우저만 지원 input type="tel" : <input type="tel"></li>
	<!-- 모바일브라우저만 지원. 웹브라우저에서는 아무런 영향이 없음 -->
	<!-- 가상키패드로 숫자키패드가 디폴트. 전화걸기가능 -->
	<li>input type="email" : <input type="email"></li>
	<!-- 이메일형식에 맞는지 브라우저에서 자동체크함. @입력필수 -->
	<li>input type="url" : <input type="url"></li> 
	<!-- url형식에 맞는지 브라우저에서 자동체크함. 프로토콜(http, https)입력필수 -->
	<li>input type="number" : <input type="number"></li>
	<!-- 자동으로 위아래화살표가 생기며 키보드로 제어가능 -->
	<li>input type="range" : <input type="range"></li>
	<!-- 범위를 바형태로 조절 -->
	<li>input type="color" : <input type="color"></li>
	<!-- 색상 설정가능 -->
</ul>

date, datetime-local, time, week, month 예시

위의 타입들을 지정하면 달력아이콘과 날짜 또는 시간형식이 자동생성된다.

tel예시

하이픈은 뜨지않고 INPUT창을 모바일브라우저에서 눌리면 숫자키패드가 뜬다!
아래 MDN사이트들어가면 모바일브라우저를 통해 어떻게 출력되는지 바로 확인가능하다.
참고링크 : MDN input type tel

email, url

email, url은 형식에 맞춰쓰지않으면 아래 이미지처럼 느낌표 팝업창이 뜬다.

• email은 @주소값이 필수로 들어가야한다.

• url은 프로토콜(http, https)이 필수로 들어가야한다.

range예시

range는 인스타그램처럼 바형태로 나타난다.
구체적인 값이 아닌 대략적인 값을 입력할때 사용한다.

color예시

color태그를 클릭하면 아래와 같이 컬러파레트가 자동으로 연결된다.

#TILHTML&CSSITWILL(JAVA)