🍎 Input 폼 관련 요소
name을 꼭 입력해야만 form 데이터 상에서 구분이 가능함
autocomplete 속성
- 예전에 한번이라도 username 이라는 필드를 입력한 적이 있으면 자동으로 후보값 띄워줌
autocomplete="on" or "off"
disabled 속성
disabled가 없으면name=&이렇게 값이 없는 상태로 서버로 넘김disabled가 있으면 아예input자체가 비활성화됨- 유저가 입력도 못함
- 필드가 제출에 포함되지 않음
- 전송도 안됨
왜 쓸까?
눈에 보였으면 좋겠지만 전송하면 안될때
어떤 상황에서는 입력못하게 할 때
readonly 속성
- 읽기전용 (수정못하게)
- 포커싱은 되나 커서가 깜박이지 않음
- 미리
value로 기본값 지정해두고 값을 그대로 사용하고 싶을 때
입력만 안되지value값으로 전송은 됨
min, max 속성
- 최소,최대값 제한
number,range타입 필드에 사용range바 맨끝의 값이 설정됨
minlength, maxlength 속성
- 문자열에 길이를 제한
- text 필드에 사용
step 속성
- 숫자를 원하는 간격만큼 왔다갔다해줌
🍎 Button 폼 관련 요소
type="submit"
서버로 데이터 제출
type="reset"
input의 reset과 동일, 모든 컨트롤을 초깃값으로 되돌림
- 자바스크립트랑 연결해 눌렀을 때 행동을 정의할 수 있음
- 아이콘같은 것만으로 버튼을 만드는 것은 접근성이 떨어짐 텍스트로 추가설명 넣는게 좋음
Q.
button과input이 다른점
inputtype="button"value="원하는 텍스트 넣기"
input은value를 지정하지 않아도 기본값으로 틀어가는 텍스트가 있지만button은 없음
input은 빈요소, 자식을 가질 수 없음
button의 자식에 텍스트를 넣어주면 버튼에 내용이 들어감
Q.자식요소에 넣는거랑
value에 넣는거랑 차이점은?
value에는 텍스트밖에 입력못함 (문자열만 가능)
button은 자식으로strong,em등 내부에image,svg등 추가해 넣을 수 있음 -> 내부의 스타일링을 용이하게 할 수 있다
빈요소, 자식을 가질 수 있는 차이점 외에는 크게 다른거 없음
