[HTML/CSS] 📚 폼 관련 요소

📋 기억하고 싶은 내용

📌 action, method

• form 데이터를 다른 페이지나 다른 서버에 전송할 수 있는데, action 속성에 그 주소를 작성하면 된다.
• GET 메서드는 사용자가 입력한 정보를 주소창에 그대로 보여주기 때문에 보안과 관련된 정보들은 GET 메서드를 사용하지 않는다.
• POST 메서드는 사용자가 입력한 정보를 주소창에 보여주지 않아서 대부분 form 태그로 정보를 전송할 때 POST 메서드를 사용한다.

📌 label, input

<form action="" method="GET">
  <div>
    <label for="food">음식 이름 :</label>
    <input type="text" name="food" id="food">
  </div>
  
  <div>
    <label for="color">색깔 :
      <input type="text" name="color">
    </label>
  </div>
</form>

• label 요소를 사용해 input 요소를 라벨링하며, 정확하게 라벨링하는 것은 사용자 경험 입장이나 웹 접근성, 시맨틱적인 영역에서 매우 중요하다.
• input 요소의 name 속성은 서버에 전송할 때 구분하기 위함이고, id 속성은 전체 문서에서 구분하기 위함이다. 그래서 name 속성과 id 속성 값이 같을 필요는 없다.
• label 요소의 for 속성 값과 input 요소의 id 속성 값이 같은 요소끼리 짝을 이룬다.
• input 요소의 name 속성 값은 하나의 문서 안에서 겹치도 되지만, id 속성 값은 겹치면 안 된다.
• label 요소와 input 요소가 형제 관계라면 for 속성과 id 속성은 필수로 지정해야 하지만, 부모 자식 관계라면 생략해도 괜찮다.
• 웹 접근성을 위해 label 요소의 내용은 input 요소를 설명하는 문구를 작성하는 것이 좋다.

📌 fieldset, legend

• fieldset 요소의 첫 번째 자식 요소는 무조건 legend 요소여야 한다.
• disabled 속성을 통해 fieldset 요소 안에 있는 input 요소를 모두 비활성화할 수 있다.

📌 type

• input 요소의 유형에 맞게 type 속성을 작성하면 모바일 디바이스 상에서 정보를 입력할 때 그에 해당하는 정보를 쉽게 작성할 수 있도록 선택창을 보여준다.
• radio 유형의 input들의 name 속성 값이 같으면 한 덩어리로 취급하기 때문에 다중 선택이 되지 않는다.

📌 name, placeholder, autocomplete, required

• placeholder 속성을 사용해 input 요소에 값을 아무것도 입력하지 않았을 때 힌트를 보여줄 수 있다.
• autocomplete 속성은 자동 완성 기능으로, 이전에 작성했던 데이터 위주로 후보를 보여준다.
• required인 input 요소의 값을 입력하지 않으면 제출할 수 없다.

📌 disabled, readonly

• disabled 속성은 사용자가 값을 입력하지 못하고, 서버에 데이터를 전송하지도 못한다.
• readonly 속성은 사용자가 값을 입력하지 못하지만, 서버에 데이터를 전송할 수 있다. 그래서 보통 기본 값을 설정하고 사용자가 수정을 하지 못하게 하는 용도로 사용한다.

📌 button

<form action="" method="GET">
  <input type="button" value="Add to favorites">
  <button type="button">✌</button>
</form>

• input 요소와 반대로 button 요소는 자식 요소를 가질 수 있기 때문에 스타일을 적용하기 훨씬 쉽다.

📌 select, option, optgroup

• option 요소의 내용은 사용자의 UI 측면에서 보여주는 것이고, value 속성을 통해 서버에 전송할 데이터의 내용을 지정할 수 있다.
• 첫 번째 option 요소를 안내 문구로서 사용하려면 value 속성 값을 빈 문자열로 지정해야 한다. (안내 문구 선택 시 제출되지 않게 하기 위함)

📌 list, datalist

<label for="myBrowser">아래 목록에서 브라우저를 선택하세요:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

• 사용자가 입력할 데이터를 직접 수정할 수 있고, 추천하는 선택지를 보여주고 싶다면 select 요소보다 datalist 요소를 사용하는 것이 좋다.

📌 textarea

• textarea 요소의 내부는 pre 요소처럼 작동한다.
• textarea 요소의 크기를 조절할 때는 CSS의 width와 height 속성을 사용하는 것이 좋다.
• 보통 rows 속성을 사용해 몇줄까지 보여줄지 지정한다.

🧐 궁금한 내용 & 부족한 내용

• input 요소의 유형 중에 reset이 있다는 것을 처음 알았는데, 권장하지 않는다고 적혀 있었다. 그럼 초기화 버튼은 어떻게 구현하는 것이 좋을까?
  • 버튼에 타입을 쓰는 이유
  • input 요소를 사용하는 것보다 button 요소를 사용하는 것을 권장하고 있다.

🌝 수강한 소감 & 떠오르는 생각

• input 요소에서 사용되는 속성들이 생각보다 많아서 모두 외우는 것은 힘들 것 같다. 필요할 때마다 MDN 내용을 참고해서 사용하자!

🔗 참고 래퍼런스

• <form> - MDN
• <label> - MDN
• <fieldset> - MDN
• <legend> - MDN
• Can I use
• <button>:버튼 요소 - MDN
• <select> - MDN
• <datalist> - MDN
• <textarea> - MDN