Eojin Han

fieldset, legend form과 연결 필드셋 내부요소 통째로 disable

fieldset, legend

fieldset : 관련있는 폼 요소들을 그룹화

legend : fieldset의 제목을 정의

📌

관련 요소들끼리 묶기도 했고, legend로 설명까지 더하므로, 스크린리더 등 접근성에도 좋음.


<fieldset>
	<legend>필드셋에 대한 설명, 타이틀</legend>
	
	<input type="radio" id><label for>텍스트</label>
	<input type="radio" id><label for>텍스트</label>
	<input type="radio" id><label for>텍스트</label>

</fieldset>


<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>Address Information</legend>
    <label for="address">Address:</label>
    <input type="text" id="address" name="address">
    <label for="city">City:</label>
    <input type="text" id="city" name="city">
  </fieldset>
</form>

form과 연결

form attribute로 form의 id랑 연결시키면 됨.

또는 form 내부에 선언하면 자동으로 연결됨.

필드셋 내부요소 통째로 disable


<form action="#">
  <fieldset disabled>
    <legend>Disabled login fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris" />
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie" />
    </div>
  </fieldset>
</form>