[HTML] 입력 필드 태그 - <input>

<input> 태그

- 사용자의 데이터를 받을 수 있는 대화형 컨트롤 생성

- 자체적으로 닫는 태그

 

• type : 입력받는 데이터 형식 지정. 기본값은 text

- text : 텍스트 입력

- button : 버튼

- password : 비밀번호 입력. 실제값을 숨기고 *같은 특수문자로 표시

- number : 숫자 입력. step으로 증가 카운트 설정

- range : 범위 값 입력. 최솟값(min)과 최댓값(max) 설정

- checkbox : 체크 박스 생성. value로 값 할당하고 name과 동일한 값 가짐

- radio : 라디오 버튼 생성. 주로 여러 옵션 중 하나를 선택할 때 사용

- submit : 제출 버튼 생성

• name : 폼 데이터가 서버에 제출될 때 사용되는 이름
• value : 디폴트 글자값 지정
• required : 입력 필드가 반드시 채워져 있어야 할 때 사용. 빈 필드면 경고창 띄움
• min & max : 숫자 입력 필드일 때, 최솟값 & 최댓값 설정
• minlength & maxlengh : 텍스트 입력 필드일 때, 텍스트의 최소 길이 & 최대 길이 설정
• pattern : 입력을 특정 형식으로 지정할 때 사용. 정규표현식 값 안에서 입력 제한

 

<input type="형식" name="이름" value="글자" required pattern="정규표현">

<!-- 텍스트를 입력할 수 있는 창 생성 -->
<input type="text">

 

<!-- 클릭이라고 적힌 버튼 생성 -->
<input type="button" value="클릭">

 

<!-- 비밀번호를 입력할 수 있는 창 생성 -->
<input type="password">

 

<!-- 숫자만을 입력할 수 있는 창 생성 -->
<input type="number" step="1">

 

<!-- 범위 내의 값을 드래그할 수 있는 창 생성 -->
<input type="range" min="0" max="5" step="0.5">

 

<!-- 체크박스 창 생성 -->
<input type="checkbox" id="check" value="check">
<label for="check">Check</label>

 

<!-- 라디오 창 생성 -->
<input type="radio" id="yes" value="yes">
<label for="yes">Yes</label>

<input type="radio" id="no" value="no">
<label for="no">No</label>

 

<form>
  <input type="submit" value="Submit">
</form>