[HTML 기초] <input> 태그로 다양한 양식 만들기

<input> 태그란?

​사용자가 정보를 입력할 수 있는 입력 필드를 지정하는 요소를 말합니다.

 

<form> 태그가 서버에 데이터를 전송해주는 역할을 한다면, <input> 태그는 그 데이터를 입력받는 역할을 하는데요. <input> 없이 <form>만 지정하면 데이터 입력을 할 공간이 없기에 <form>의 속성들은 보통 <input>과 붙어 사용합니다. 그리고  </input>이라는 마감 태그는 따로 없습니다.

 

 

지난 시간,

<form>태그 속성 종류인 'action, name(=id), target, method'과 그 속성을 지정하는 방법에 대해 알아봤었죠. <input>에도 다양한 속성 종류로 'type, name(=id), required, minlength'등이 있고, 그때도 말했지만 'name(=id)'처럼 <form> 태그에도 사용하고, <input> 태그에도 사용 가능한 속성도 있습니다.

 

 

 

 

<input>​ 속성과 속성값 지정하기

 

 

 

<input> 태그 속성 종류

위 폼 안의 'type'나 'value', 'id'에 해당하는게 속성입니다.

속성	설명	태그 입력 방식
type	지정한 형태로 입력 받음 text, password, radio의 많은 입력 타입이 있고 가장 많이 쓰임 ex)	<input type="text"> <input type="password"> 등
value	빈칸, 아무것이나 정의하고 식별을 위해 쓰임	<input value="초기값">
name(=id) class	빈칸, 아무것이나 정의하고 식별을 위해 쓰임	<input name="이름">
autofocus	커서를 자동으로 깜빡거리게 함
autocomplete	자동완성 기능 지원 여부 지정
placeholder	기본 안내글. 실제값이 아니라 사용자가 입력하면 지워짐 보통 텍스트에 어떤 값을 적어야 하는지 예시를 보여줄 때 사용 ex)	<input type="text" placeholder="'-'제외">
minlength	필드의 최소 문자 개수 ex) 최소 10자 이상 입력하세요	<input type="text" minlength="10">
maxlength	필드의 최대 문자 개수 ex) 최소 10자 이내로 입력하세요	<input type="text" maxlength="10">
required	필수 입력값. 값이 있어야만 넘어갈 수 있게 해주는 속성.	<input type="text" required>

 

 

 

<input> 'type' 속성값 종류

• 위 폼 안의 "text", "초기값", "이름"에 해당하는게 속성값으로, 어떤 형태로, 어떤 값으로 입력을 받을지 정해줍니다.

• "text"가 기본 속성값이고, "button, checkbox, radio" 등 표시 할 수 있는 속성값은 여러 종류입니다.

• 입력예('가입하기' 버튼 생성하기) : <input type="submit" value="가입하기">

속성값	설명
text	기본 문자열 입력 창 생성
password	패스워드 입력 창 생성, 입력시 문자가 가려짐
button	버튼 생성
checkbox	체크박스 생성
image	이미지 버튼 생성
file	파일 버튼 생성
radio	라디오 버튼 생성
search	'X'표시를 누르면 입력한 값이 사라짐
hidden	사용자에게 입력 받지 않고 기본으로 설정된 값을 서버로 전송
reset	<form>태그에서 입력한 input값 초기화
date time week	년/월/일 입력 시간 입력 주/연도 입력
submit	서버 제출 버튼 생성

 

 

 

간단한 폼 : <input> 양식 만들기 예시