[HTML]<input> 태그

<input>태그란

 <form>태그의 하위 태그 중 하나로 type속성에 따라 텍스트를 써 넣을 수 있는 칸, 버튼, 컴포넌트 등을 만드는 태그다.

 

 <input>태그는 type 속성을 통해 태그의 종류를, name을 통해 데이터의 이름, value를 통해 기본 값을 지정한다.

 

 문법

<input type="타입" name="이름" value="ID 기본 값">

 

 type 종류

type 종류	내용
text	일반 문자
password	비밀번호
button	버튼
submit	양식 제출용 버튼
reset	양식 초기화용 버튼
radio	한개만 선택할 수 있는 컴포넌트 전송 시 value에 설정한 값이 넘어간다. checked="cheked" 속성을 사용하면 기본적으로 체크가 된다.
checkbox	다수를 선택할 수 있는 컴포넌트 전송 시 value에 설정한 값이 넘어간다. checked="cheked" 설정 시 기본적으로 체크가 된다.
file	파일 업로드
hidden	사용자에게 보이지 않는 숨은 요소

 

속성 종류

속성	내용
readonly	정보 수정이 불가능해진다. 데이터 전송은 가능하다.
disable	정보 수정이 불가능해진다. 데이터 전송도 불가능해진다.
placeholder="내용"	정보가 없을 시 설정한 알림 문구가 뜬다.

 

 

<input>태그 예제

<form>
	<p>
		<strong>아이디</strong>
		<input type="text" name="name" value="ID 입력">
        <!-- value에 'ID 입력'를 넣어 기본상태에서 'ID 입력'이 보이도록 한다. -->
	</p>
	<p>
		<strong>비밀번호</strong>
		<input type="password" name="password">
        <!-- pssword 타입은 문자를 땡땡처리로 하여 보여준다. -->
	</p>
	<p>
		<strong>성별</strong>
		<input type="radio" name="gender" value="M">남자
		<input type="radio" name="gender" value="F">여자
        <!-- radio버튼을 통해 남자 또는 여자 하나의 값만 선택할 수 있다. -->
	</p>
	<p>
		<strong>응시분야</strong>
		<input type="checkbox" name="part" value="eng">영어
		<input type="checkbox" name="part" value="math">수학
        <!-- checkbox는 다수의 선택을 할 수 있도록 해준다. -->
	</p>
	<p>
		<input type="submit" value="제출">
	</p>
</form>

See the Pen BaQeeMN by BakGyoungMin (@bgm16) on CodePen.