<form>태그와 그 외 관련 태그들 정리

📌 fieldset과 legend 태그를 적극 활용하자

<form>
  <fieldset>
    <legend>회원정보</legend>

  </fieldset>
  <fieldset>
    <legend>거주지 정보</legend>

  </fieldset>
</form>

fieldset

: 웹 양식의 여러 컨트롤 + <label>을 묶을 때 사용

- 해당 태그에 disabled 속성을 부여할 수 있음

🔥 disabled 줄 시 그 안에 있는 입력 요소들도 같이 disabled됨 (input 한개씩 disabled로 제어할 필요가 없어짐)

- name 속성을 줄 수 있음 document.forms.[폼이름].[필드셋이름] 으로 찾을 수 있음

특성	속성값	설명
disabled	disabled	- 지정할 경우, 모든 자손 컨트롤 비활성화 - <form> 제출시 데이터에 미포함 - 브라우저 이벤트 작동 X
form	form의 id값	- <form> 외부에 <fieldset>이 있을 때 명시적으로 연결해줌 - <form> 요소의 id
name	fieldset의 name값	- 다른 fieldset요소와 구별할 때 사용 - document.forms.[form이름].[fieldset이름] 으로 JS에서 요소 찾을 수 있음

 

- fieldset은 기본적으로 block 요소이다. 하지만 css로 flex를 주면 flex가 먹지만 block요소처럼 보인다.

🔥 일부 브라우저에서 보이는 버그라고 한다. 

 

legend

- fieldset요소의 첫번째 자식이여야 한다.

 

📌 input search와 input image 태그

input:search 태그

// input search reset css

/* IE 경우 */
input[type=search]::-ms-clear,
input[type=search]::-ms-reveal {
	display:none;
}

/* Chrome 경우 */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
	display:none;
}

©TCP-tryWWW

input:image 태그

©TCP-tryWWW

 

✅ 참고 사이트
Fieldset이 flex가 안되는 이유
[css-display-3] grid/flex layout support for <fieldset>
https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset