HTML 폼 태그에 대해서 아시나요? 저는 알긴 아는데요? (not 폼폼푸린)

 

폼 (폼푸린)

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>

 

📌 action, method

 

action

• 양식 데이터를 처리할 프로그램의 URI 지정
• <button>, <input type="submit">, <input type="image"> 요소의 formaction 특성으로 재정의 가능

 

method

• 양식을 제출할 때 사용할 HTTP 메서드.
• post: POST 메서드. 양식 데이터를 요청 본문으로 전송
• get: GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송
  • 검색에 사용
• dialog: 양식이 <dialog> 안에 위치한 경우, 제출과 함께 대화 상자를 닫음
• <button>, <input type="submit">, <input type="image"> 요소의 formmethod 특성으로 재정의 가능

<!-- Form which will send a GET request to the current URL -->
<form>
  <label
    >Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label
    >Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio" /> Select me</label>
  </fieldset>
</form>

 

 

📌 fieldset, legend

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

 

<fieldset> 스타일링

• <fieldset>의 display 속성의 값은 기본적으로 block이며,
• 인라인형 display 값을 지정하면 inline-block, 그렇지 않으면 block처럼 행동

 

• <fieldset>은 기본 스타일로 콘텐츠를 감싸는 2px 너비의 groove 테두리, 작은 양의 내부 여백, 그리고 min-inline-size: min-content를 가짐
• <legend> 요소는 <fieldset>의 블록 시작 방향(대개 위쪽) 테두리 위를 가로지르는 위치에 놓임
• <legend> 또한 자신의 블록 서식 맥락을 만들며, 너비는 자신의 콘텐츠에 맞춰져 늘어나거나 줄어듬
• display는 항상 블록형이 됨. 즉, display: inline도 block처럼 동작

 

• Microsoft Edge와 Google Chrome에는 <fieldset> 내부에서 플렉스박스와 그리드 레이아웃을 사용할 수 없는 버그가 존재.

 

📌 input , type

 

Category	Type	Description
Text input types	text	Single-line text input.
	password	Password input (obscures the text).
	email	Email input (validates email addresses).
	url	URL input (validates URLs).
	number	Numeric input (accepts numbers only).
	range	Numeric input with a specified range.
	date	Date input (accepts dates in a specified format).
	datetime-local	Date and time input (accepts date and time in a specified format).
	month	Month input (accepts months).
	week	Week input (accepts weeks).
	time	Time input (accepts times).
Checkbox input types	checkbox	Checkbox input (single selection).
	radio	Radio button input (single selection from a group).
File input types	file	File input (allows users to upload files).
Button input types	button	Button input (submits a form or triggers an action).
	reset	Reset button input (resets a form).
	submit	Submit button input (submits a form).
Other input types	color	Color input (allows users to select a color).
	image	Image input (allows users to upload an image).
	range	Range input (allows users to select a value from a range).
	search	Search input (allows users to search for something).
	tel	Telephone input (accepts phone numbers).
	textarea	Multi-line text input.

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

• label의 for과 input의 id와 연결됨.
• lable의 자식으로 넣으면 for 안 해도 됨.

 

📌 체크박스

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">뉴스레터를 구독하시겠습니까?</label>
  </div>
  <div>
    <button type="submit">구독하기</button>
  </div>
</form>

• name 특성은 subscribe로, value 특성은 newsletter으로 지정
• 폼이 제출되면 전달될 name/value 쌍의 데이터는 subscribe=newsletter와 같이 표현

 

• 만약 value 특성이 생략되면, 해당 체크박스의 기본 값은 on
• 폼이 제출될 때 체크박스가 체크되어 있지 않으면 값 자체가 서버에 전달되지 않음.

 

• 라디오 버튼은 하나의 집합으로 그룹화되어 그 안에서 단 하나만 선택될 수 있지만,
• 체크박스의 경우는 각각의 값을 켜고 끌 수 있음. 다수의 컨트롤이 존재할 때 라디오 버튼은 전체에서 하나의 요소에 대한 선택만을 허용하고, 체크박스는 여러 개의 요소가 선택되는 것을 허용

 

📌 중간 상태 체크박스

 

• Javascript의 HTMLInputElement 객체의 indeterminate 특성에 의해 설정
• HTML 특성을 이용해서는 설정할 수 없음

 

js

inputInstance.indeterminate = true;

 

indeterminate 상태에 있는 체크박스는 대부분의 브라우저에서 수평선을 가짐.

 

•  체크박스가 여러 하위 체크박스를 가지는 경우
• 모든 하위 체크박스가 활성화되면, 상위 체크박스 또한 활성화
• 하위 체크박스 중 하나가 다른 체크박스들과는 다른 상태를 가진다면 상위 체크박스는 indeterminate 상태

const overall = document.querySelector("#enchantment");
const ingredients = document.querySelectorAll("ul input");

overall.addEventListener("click", (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener("click", updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

 

📌 라디오 박스

라디오 버튼 vs 체크박스:

• 라디오 버튼: 여러 옵션 중 하나만 선택
• 체크박스: 여러 옵션 중 여러 개 선택 가능

값 (value 속성):

• 라디오 버튼의 값을 나타내는 문자열
• 사용자에게는 표시되지 않음
• 선택된 라디오 버튼 식별에 사용

라디오 그룹:

• 동일한 name 속성을 가진 라디오 버튼들의 그룹
• 그룹 내에서 하나의 라디오 버튼만 선택 가능
• 여러 라디오 그룹 사용 가능 (각 그룹은 고유한 name 필요)

<input type="radio" name="contact" value="email"> Email
<input type="radio" name="contact" value="phone"> Phone
<input type="radio" name="contact" value="mail"> Mail

The resulting HTML looks like this:

```html
<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

• name 속성:
  • 세 개의 라디오 버튼 모두 contact로 설정되어 하나의 그룹을 형성
• value 속성:
  • 각 라디오 버튼은 그룹 내에서 고유하게 식별되는 value 값을 가짐
• id 속성:
  • 각 라디오 버튼은 고유한 id를 가지며, 이는 <label> 요소의 for 속성을 통해 라디오 버튼과 레이블을 연결하는 데 사용
• <label> 요소:
  • for 속성을 사용하여 각 라디오 버튼의 id와 연결되어, 레이블을 클릭했을 때 해당 라디오 버튼이 선택

 

📌 button

• <button> 요소는 HTML에서 클릭 가능한 버튼을 정의
• 사용자 인터페이스(UI)에서 특정 동작을 트리거하는 데 사용

<a> 요소와의 차이점

특징	<button>	<a>
용도	현재 페이지 내 상호작용 (폼 제출 등)	다른 페이지/위치로 이동 (하이퍼링크)
폼 데이터 전송	가능 (값 가짐)	불가능
주로 사용하는 상황	스크립트 실행	페이지 이동

 

핵심 속성

• type: 버튼의 동작 유형 지정.
  • submit (기본값): 폼 제출.
  • reset: 폼 필드 초기화.
  • button: 일반 버튼 (JavaScript로 기능 부여).
  • menu(실험적): 연결된 메뉴를 엽니다.
• form (HTML5): <button>을 명시적으로 폼(form 요소의 id)과 연결. (버튼이 폼 바깥에 있어도 연결 가능)
• name: 폼 제출 시 서버로 전달될 버튼의 이름.
• value: 폼 제출 시 서버로 전달될 버튼의 값.
• disabled: 버튼 비활성화 (클릭 불가).
• autofocus (HTML5): 페이지 로드 시 버튼에 자동 포커스.

 

접근성 고려 사항

• 명확한 레이블: 버튼의 목적을 나타내는 텍스트 레이블 필수.
• ARIA 속성: 스크린 리더 사용자를 위해 aria-label, aria-pressed 등 사용 가능.
• 시각적 표현 + 텍스트: 이미지 버튼의 경우 aria-label 등으로 기능 설명.

 

<a> 태그를 버튼처럼 사용하는 것의 문제점

• <a> 태그의 본래 의미(링크)를 잃음.
• 스크린 리더 사용자에게 혼란 유발.
• 시맨틱 웹에 부적합: <button> 사용 권장. href="#", href="javascript:void(0)"와 함께 <a>를 사용하는 것은 지양해야함.

 

📌 select

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

 

기본 사용법:

• id 속성을 사용하여 <label>과 연결하여 접근성을 향상
• name 속성을 사용하여 서버로 전송될 데이터의 이름을 지정
• <option> 요소를 중첩하여 메뉴 옵션을 정의

 

<option> 요소:

• value 속성은 선택 시 서버로 전송될 데이터 값을 지정
  • value 속성이 없으면 요소 내부의 텍스트가 기본값으로 사용
• selected 속성을 사용하여 페이지 로드 시 기본 선택 옵션을 지정
  • selected 속성이 없으면 첫 번째 <option> 요소가 기본적으로 선택

 

JavaScript:

• HTMLSelectElement 객체로 표현
• value 속성은 선택된 <option>의 값을 포함

 

<select> 요소의 속성:

• multiple: 여러 옵션 선택 가능 여부를 지정
• size: 한 번에 표시할 옵션 수를 지정
• required, disabled, autofocus 등 일반적인 폼 입력 속성도 사용 가능

 

추가 기능:

• <optgroup> 요소를 사용하여 옵션을 그룹화 가능
• <hr> 요소를 사용하여 옵션 사이에 시각적 구분선을 추가할 수 있음

 

📌 list, datalist

list 속성은 <input> 요소에 자동 완성 기능을 제공하는 <datalist> 요소를 연결하는 데 사용

 

• list 속성의 역할:
  • <input> 요소와 연결할 <datalist> 요소의 id 값을 지정
  • <datalist> 요소는 <input> 요소에 대한 미리 정의된 옵션 목록을 제공하여 자동 완성 기능을 구현

 

• <datalist> 요소와의 관계:
  • list 속성 값은 동일한 문서 내에 있는 <datalist> 요소의 id와 일치시켜야 함
  • <datalist> 요소는 <option> 요소들을 포함하여 자동 완성 옵션 목록을 구성

 

• list 속성을 지원하는 <input> 타입:
  • text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color
  • checkbox, radio, file, button과 같은 타입에서는 list 속성이 무시됨.

 

• 사용자 경험 (UX):
  • 사용자가 <input> 요소에 값을 입력할 때, <datalist>에 정의된 옵션들이 드롭다운 형태로 표시되어 선택하거나, 직접 입력할 수 있음
  • <datalist>는 제안 목록을 제공하는 것이며, <select> 요소처럼 선택을 강제하지 않음

 

• autocomplete 속성과의 관계:
  • list속성을 사용하면 autocomplete속성을 사용할 필요가 없음
  • list 속성은 <datalist>를 통해 자동 완성 옵션을 명시적으로 제공하는 반면, autocomplete 속성은 브라우저의 일반적인 자동 완성 기능(이전에 입력한 값 기반)을 제어

 

• readonly속성, size속성과의 호환성
  • readonly속성을 사용하여 읽기 전용으로 설정한 <input>에서도 list속성과 연결된 <datalist>가 동작함.
  • <input>의 size속성으로 크기를 조절해도,list속성과 연결된 <datalist>가 동작함.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

 

 

datalist

•  <input> 요소에 대한 자동 완성 옵션 제공.
• <input> 요소의 list 속성에 <datalist> 요소의 id를 지정하여 연결
• <option> 요소 사용:
  • <datalist> 내부에 <option> 요소를 사용하여 옵션들을 정의
  • value 속성: <input>에 실제로 입력될 값.
  • label 속성 (선택 사항): 사용자에게 보여줄 설명 (브라우저에 따라 다르게 표시될 수 있음).
  • <option> 요소의 텍스트 내용도 value 대신 사용될 수 있음.
• <select> 요소와의 차이점:
  • <select>: 사용자가 반드시 주어진 옵션 중 하나를 선택
  • <datalist>: 사용자는 옵션을 선택하거나, 직접 입력할 수 있음.
• 접근성 고려사항
  • <datalist>를 사용할 때 스크린 리더 사용자에게  <input>에 자동완성 기능이 있음을 알려주어야 함
  • aria-autocomplete속성을 통해 자동완성 동작 방식을 명시할 수 있음
  • both: 목록과 인라인 형태 모두 제공
  • inline: 텍스트를 타이핑 할 때 자동완성
  • list: 리스트에서 선택
  • none : 자동완성 동작 없음.
• 속성
  • <datalist>요소는 전역 특성을 가짐

<label for="myBrowser">Choose a browser from this list:</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>

 

📌 file

<input type="file" id="filepicker" name="fileList" multiple />
<output id="output"></output>

const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;
  output.textContent = "";

  for (const file of files) {
    output.textContent += `${file.name}: ${file.type || "알 수 없음"}\n`;
  }
});

type 속성을 유일한 유효성 검증 수단으로 사용하는 건 권장하지 않음

 

📌 disabled, readonly

• disabled -> 무용지물
  •  disabled 속성이 있을 경우 해당 요소는 수정하거나 포커스를 맞출 수 없음.
  • 폼을 통해 제출될 수도 없읍
  • <button>, <fieldset>, <optgroup>, <option>, <select>, <textarea>, <input> 에서 지원
• readonly -> 고정값 유지

 

• disabled와 readonly의 차이는 읽기 전용으로 지정된 컨트롤은 여전히 동작하고 포커스가 가능하다는 반면,
• 비활성화된 컨트롤은 포커스를 받거나 폼과 함께 제출되지 않고 일반적으로 활성화될 때까지 컨트롤로서 동작하지 않음

 

• 비활성화된 필드는 그 값이 변경될 수 없기 때문에, required는 disabled 속성이 지정된 입력 필드에 아무 영향도 미치지 않음
• 요소들이 변경 불가능하게 되므로 pattern 과 같은 대부분의 다른 속성들도 컨트롤이 활성화될 때까지 영향을 미치지 않음

참고: disabled 속성이 지정된 입력 필드에는 required 속성을 사용할 수 없습니다.

 

disabled 유용성

• 브라우저는 비활성화된 폼 컨트롤들을 회색으로 표시
• 비활성화된 폼 컨트롤은 변경되거나 폼과 함께 제출되지 않음
• 마우스 클릭이나 포커스와 관련된 브라우징 이벤트를 수신하지 않음
• 지원하는 요소에 존재하는 경우 :disabled 의사 클래스가 적용
• 해당 속성이 지정되지 않았을 경우에는 :enabled 의사 클래스가 적용
• 요소가 비활성화 속성을 지원하지 않는 경우에는 해당 속성이 어떤 효과도 갖지 않으며, :disabled 와 :enabled 의사 클래스도 적용되지 않음

 

readonly

The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.

• the user can not edit the input, the element does not participate in constraint validation.
• is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number input