사용자 입력을 위한 input 태그

📌<input> 태그

아이디나 검색어를 입력하는 상자처럼 사용자가 입력할 부분은 주로 <input>태그를 이용한다. 넣을 수 있는 요소가 아주 다양하기 때문에 요소마다 어떤 특성이 있는지 알아야 한다.

<input> 태그의 type속성

로그인 창에서 아이디와 비밀번호를 입력하거나 로그인 버튼을 클릭하는 등, <input> 태그에서 입력 형태를 지정할 때 type 속성을 사용한다.

• <text> 한 줄 짜리 텍스트를 입력할 수 있다.

• <password> 비밀번호 입력 가능. 화면에 보여주지 않아야 하므로 * 나 •로 표시한다.

  ✏️ text / password에서 사용하는 주요 속성
  • size : 화면에 몇 글자가 보이도록 할 것인지를 지정한다.
  ex) 최대 입력 가능 글자 수가 10인데 size가 5이면 5개만 보이고 5개는 화면에 보이지 않음.
  • value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다. 비밀번호 필드에서는 사용하지 않음.
  • maxlength : 입력할 수 있는 최대 문자 수를 지정한다.

• <search> 검색하는 필드

• <url>

• <email>

• <tel>

• <checkbox> 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크박스를 넣는다.

• <radio> 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다.
  ** Radio buttons are so called because they function like the channel presets on radios.

  ✏️ checkbox / radio 에서 사용하는 주요 속성
  • value : 영문 or 숫자여야 하며 필수.
  • checked : 기본으로 선택해 놓고 싶은 항목에 사용한다. 속성값은 없음.

• <number> 숫자를 조절할 수 있는 스핀 박스를 넣는다.

• <range> 숫자를 조절할 수 있는 슬라이드 박스를 넣는다.

• <date> / <month> / <week> / <time> 사용자 지역을 기준으로 날짜를 넣는다.

  ✏️ 날짜나 시간의 범위를 제한하는 방법
  • min / max : 날짜나 시간의 범위를 제한할 때 사용.
  • step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정.
  • value : 기본적으로 표시할 날짜나 시간을 지정.
  ex) <input type="date" min="2022-08-01" max="2022-08-18">

• <submit> 전송 버튼을 넣는다. 폼에 입력한 정보를 서버로 전달.

• <reset> 리셋 버튼을 넣는다. value 속성을 사용하여 버튼에 표시할 내용을 지정한다.

<div>
  <input type="submit" value="주문하기">
  <input type="reset" value="취소하기">
</div>![](https://velog.velcdn.com/images/hyorimm/post/69c63e21-eaab-4792-a644-7208e8229e98/image.png)

는 아래와 같은 버튼을 생성한다.

• <button> 일반 버튼을 넣는다.
• <file> 파일을 첨부할 수 있는 버튼을 넣는다.
• <hidden> 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.