input 태그에 대한 공부

최종 수정 : 2024-04-02

input의 특징

• form 태그 안에서 label태그와 함께 작성하는 것이 좋다.
• label 태그의 for의 속성 값과 input의 id 속성 값을 갖게 설정해줘야, 화면리더기에 하나의 쌍으로 해석한다.

<form>
  <label for="value">content</label>
  <input id="value" type="원하는 타입" />
</form>

---

자주 사용하는 타입

분류	타입  이름	설명
입력	text	기본 타입
	email	text 타입처럼 보이지만, 유효성 검사 및 여러 기기에 동적 키보드를 지원
	password	값이 가려진 텍스트 필드 사이트가 안전하지 않은 경우 경고창을 띄어준다.
값 선택	checkbox	하나의 값에 대한 선택여부를 체크
	radio	여러 값에 대한 선택
날짜 선택	date	날짜 선택
업로드	file	파일을 업로드할 수 있도록 지원
	image	사진을 업도드할 수 있도록 지원
버튼	submit	form 안에 작성한 값들을 서버로 전송
	reset	form 안에 작성한 모든 값을 초기화

이외에 타입

button / color / detetime-local / hidden / month / number / range / search / tel / time / url / week

---

자주 사용하는 속성

속성	지원 타입	설명
alt	image	사진이 업로드되지 않았을 때, 값으로 작성한 값을 보여준다. (화면 리더기가 읽는 데 도움을 준다.)
src		이미지의 주소
width, height		이미지의 크기를 설
autocomplete	checkbox, radio, button 외 모두	작성하는데
name	모두	form control의 이름
disabled		form control을 비활성화시킨다.
checked	checkbox radio	기본적으로 체크되어 있도록 설정
placeholder	입력 속성	입력 형식이나 안내 등을 보여준다.
readonly	선택하거나 클릭하는 속성 외 모두	읽기만 가능하므로 수정이 불가능
required	hidden, range, color, button 외 모두	필수로 값을 입력하거나 선택하게끔 만든다.
multiple	email, file	여러 값을 이용할 수 있도록 허용한다.

이외의 속성

value / type / step / size / popovertargetaction / popovertarget / pattern / min / minlength / max / maxlength / list / formtarget / formovalidate / formmethod / formenctype / formaction / form / dirname / capture / autocapitalize / accept 

---

input 태그에 사용하는 CSS

::placeholder

::placeholder {
  color: red;
}

placeholder로 작성된 내용이 빨간색으로 보인다.

 

creat-color

input {
  creat-color: red;
}

인풋 입력창의 커서 색이 빨간색으로 보인다.

---

참고 자료

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input