input 태그
- 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤 (필드)
- 인라인 요소
- 단일 태그
- <input />
type 속성
- 입력 요소의 형태나 입력 데이터 유형 등이 type 속성에 따라 달라짐
- 적용할 수 있는 추가 속성의 종류도 달라짐
- type은 20여 가지
- 기본값은 text !
name 속성
- input 태그에 식별자 추가
- 각각의 입력 항목에 대한 이름
- <input type="text" name="nickname" />
- <input type="text" name="job" />
<html>
<head>
<meta charset="utf-8">
<title>다양한 입력 요소 만들기</title>
</head>
<body>
<input name="text" type="text" maxlength="5" placeholder="메시지 입력..!"/> <br> <br>
<input name="push"type="button" value="PUSH"/> <br> <br>
<input name="color"type="color"/> 색을 골라보세요! <br> <br>
<input name="score"type="range" max="100" min="0" step="10"/> <br> <br>
<input name="birthday"type="date"/> <br> <br>
</body>
</html>
- text ≫ 텍스트 입력받음
- placeholder 속성 - 안내 메시지 : 사용자 입력 전에만 보이는 텍스트
- maxlength 속성 - 문자 개수 제한 : 특정 개수 이상 문자 입력 불가
- button ≫ 클릭을 입력받음
- color ≫ 팔레트를 통한 색상 선택
- 추가적으로 작성할 만한 속성은 없지만 문구 필요할 시 옆에 텍스트 추가하기
- range ≫ 범위 안에서 바를 움직여 숫자 값을 선택
- 어디 쯤에 있을 때 어떤 값인지 확인하기 위해 수치 관련 속성 추가
- max 속성 - 최대값 설정
- min 속성 - 최소값 설정
- step 속성 - 단위 설정
- 마우스 / 키보드로 선택 가능
- date ≫ 날짜 선택
- name ≫ 각각의 input 태그에 식별자(이름) 추가