form

form

원래는 시멘틱 마크업, 시각적인 덩어리 (레이아웃)을 위해 마크업이 있었지만 form 요소들은 서버에 데이터를 보내기 위해 작성된 마크업이다. (기능!)

➡️ 사용자가 입력한 데이터를 서버로 전송하기 위한 컨테이너 역할을 한다.

💡 주요 속성

• action
• method

• action: 폼 데이터를 제출할 때 데이터를 처리할 서버의 URL을 지정
• method: 폼 데이터를 서버에 전송하는 방법을 지정
  • GET: URL에 데이터를 붙여 서버에 전송
    데이터를 URL에 표시하기 때문에 보안이 낮고, 소량의 데이터를 전송할 때 주로 사용한다.
  • POST: 데이터를 HTTP 메시지 본문에 담아 서버에 전송
    보안이 높고, 대용량 데이터를 전송할 때 사용한다.

❗️ 지정된 스타일이 굉장히 많으므로 초기화 필수!!!

label

label요소는 입력 요소에 대한 설명(레이블)을 제공하며, 레이블을 클릭하면 관련된 입력 요소에 포커스가 이동한다.

❗️ label요소의 for 속성은 관련된 입력 요소의 id와 연결되어야 함

❗️ label 태그 내부에 input 요소를 포함하는 방법도 있는데, 이 방법은 특히 사용자 경험(UX) 측면에서 유용하다.

➡️ 레이블이 클릭될 때, 포함된 input 요소도 함께 활성화되기 때문에 라디오 버튼이나 체크박스와 같은 요소에서 매우 편리함!!

<label for="">어떤 장비가 필요 하신가요?</label>
        <label><input type="checkbox" checked />빔 프로젝터</label>
        <label><input type="checkbox" />화이트보드</label>
        <label><input type="checkbox" />전동데스크</label>

select

<select>
      <option>디자이너와의 티타임</option>
      <option>개발자와의 코드 리뷰</option>
      <option selected>사장님과 연봉 협상</option>
</select>

`selected` 속성을 이용해 미리 요소를 선택할 수 있다. `select`로 감싼다. `option`으로 옵션 표시한다. `input`으로 입력하는 것 아님 (checkbox, radio 처럼x)

input

💡 input의 타입

• text - 한 줄의 텍스트 입력 필드.
• password - 비밀번호 입력 필드. 입력한 내용이 보이지 않음.
• email - 이메일 주소 입력 필드.
• number - 숫자 입력 필드.
• checkbox - 체크박스.
• radio - 라디오 버튼.
• file - 파일 업로드 필드.

++)

• name - 인풋 데이터 서버로 전송 ( 키 값 )
• value - 인풋 데이터 초기값 설정

radio

 <label for="">회사의 규모는 어떠한가요?</label>
        <label><input type="radio" name="size" checked />2~8인 </label>
        <label><input type="radio" name="size" />9~20인</label>
        <label><input type="radio" name="size" />21~100인</label>

checked 속성을 이용해 미리 요소를 선택할 수 있다.
name을 지정하지 않으면 같은 값이 아닐 수도 있기 때문에 중복 지정이 가능하다.
원래는 중복 불가능 --> 단일 선택
input 으로 입력

 <label><input type="radio" name="size" />9~20인</label>
 <label><input type="radio" name="old" />21~30살</label>

💡 name
input에 입력하는 데이터를 서버로 보낼 때 지정되는 이름
name이 같으면 같은 데이터라는 뜻

✔️ html
<input type="radio" name="size" checked /> Large

✔️ 서버
	***size**: Large

checkbox

 <label for="">어떤 장비가 필요 하신가요?</label>
        <label><input type="checkbox" checked />빔 프로젝터</label>
        <label><input type="checkbox" />화이트보드</label>
        <label><input type="checkbox" />전동데스크</label>

checked 속성을 이용해 미리 요소를 선택할 수 있다.
복수 선택 가능
input 으로 입력

✚ 값을 바꾸지 못하게 하는 속성
readonly - 값으로서 의미가 있지만, 사용자가 수정을 직접적으로 못하게 막는 것
disabled - 해당 필드를 아예 비활성화

💡 checkbox vs radio

• 중복이 가능하게 하려면 checkbox
• 단일 선택을 하려면 radio
  ➡️ 둘 다 input 으로 입력 (select와 다름)

fieldset

fieldset요소는 폼 요소들을 그룹화하는 데 사용된다.
그룹화된 폼 요소들은 시각적으로 구분되며, 관련된 폼 요소들을 논리적으로 묶을 수 있다.

• fieldset - 입력 필드들의 그룹 설정
• legend - 그룹의 제목 (필수로 맨 첫 번째 입력)

<fieldset>
	<legend>일반 정보</legend>
</fieldset>

<fieldset>
	<legend>기본 정보</legend>
</fieldset>

button

실제 데이터를 전송하기 위한 요소이다.

• submit: 폼 데이터를 제출 (기본값)
• reset: 폼의 입력 값을 초기화

all: unset을 통해 최대한 담백한 버튼 제작 --> 기본으로 제공하는 웹 접근성 관련 주요 기능들의 시각적 특성이 사라진다/
/ 하지만 html 요소 고유의 기능, submit 또는 focus 기능 자체는 유지 되어있음*/

원래부터 있는 기능들은 최대한 이용해야 한다.

form 초기화

💡 form 초기화
all: unset

fieldset {
	all: unset // 모든 속성이 초기화되면 위험하다. --> 기본 스타일이 유지되면 좋은 경우도 있음
}

button {
  all: unset;
  display: block;
}

• 버튼을 all: unset 으로 초기화하면
  기본으로 제공하는 웹 접근성 관련 주요 기능들의 시각적 특성이 사라진다

❗️ 하지만 html 요소 고유의 기능, submit 또는 focus 기능 자체는 유지 되어있음

💡 inherit vs initial vs unset

• inherit : 부모 요소의 값을 상속
• inital : 초기값으로 강제
• unset : 속성이 상속 지원 되면 inherit, 아니면 initial

초기화 vs 평준화

지금까지는 이미 존재하는 스타일을 싹 없애버리는 초기화를 진행했었다.
form에는 너무 많은 스타일 요소가 있어 각각 초기화를 해주기 힘들어 all: unset 을 적용하여 모두 초기화를 진행했다.
하지만 form에는 디자인적인 것 말고도 다양한 html의 고유 기능이 존재하므로 무턱대고 all: unset을 적용하면 좋은 기능들까지 다 날라가서 내가 직접 만들어야 하는 상황까지 생긴다. (submit, focus 등)

이럴 경우에는 지정된 효과를 싹 없애는 초기화를 진행한 후 평준화를 진행하면 된다.

input, select { // 초기화
  all: unset;
}

select, input[type="text"], input[type="email"] { // 평준화
  display: block;
  width: 100%;
  height: 38px;
  line-height: 38px;
  padding: 0 10px;
  box-shadow: inset 0 0 10px red;
}

초기화 진행 후 디자인을 평준화 하여 해당 공공 UI를 평준화 하자! (브라우저 상관없이)
없앤 다음에 다시 모든 input에 스타일링을 내가 원하는 대로 하는 것 (?)

가상 요소

💡 가상요소 종류

• :focus
• :focus-within
• :focus-visible
• :checked
• :disabled
• :valid
• :invalid
• :required

focus

사용자가 입력 요소를 클릭하거나 키보드로 선택하여 포커스를 받았을 때 적용된다.
이 상태는 사용자가 입력을 시작할 준비가 되었음을 의미한다.

:focus-within

해당 요소 또는 자식 요소 중 하나가 포커스를 받을 때 적용된다.
❗️주로 폼 컨테이너나 그룹에 사용

:focus-visible

키보드로 포커스를 이동할 때만 스타일이 적용된다.
마우스로 포커스를 이동할 때는 스타일이 적용되지 않는다.

:checked

체크박스(input[type="checkbox"])나 라디오 버튼(input[type="radio"])이 선택된 상태일 때 적용된다.

input[type="checkbox"]:checked {
  background-color: #009688;
  border-color: #004d40;
}
input[type="radio"]:checked {
  border: 2px solid #00796b;
}

:disabled

비활성화된(disabled 속성을 가진) 폼 요소에 적용된다.
비활성화된 폼 상태의 스타일링을 하여 사용자가 비활성 상태를 인지할 수 있도록 한다.

:valid & :invalid

• :valid - 입력된 값이 폼 필드의 유효성 검사 규칙을 통과했을 때 적용
• :invalid - 유효성 검사를 통과하지 못했을 때 적용

ex) 사용자가 올바른 이메일 주소를 입력하면 입력 필드에 녹색 테두리가 적용된다.
하지만 이메일 형식이 잘못되었거나 pattern 규칙에 맞지 않으면 빨간색 테두리가 표시된다.

:required

required 속성이 적용된 필수 입력 필드에 적용된다.
사용자가 필드를 채우지 않은 상태에서 제출하려고 할 때 유효성 검사가 진행됩니다.

💡 결론

form

• 웹의 기본 기능인 데이터 전송 (사용자와 대화가 목적)
• 필수적인 접근성 확보 (폼을 더 쉽게 쓸 수 있도록)

네이티브로 제공되는 html 폼 요소와 어떤 속성이 제공 되는 지 알기
운영체제, 브라우저, 기기 간 차이와 기능적인 한계도 같이 파악

사용자 에이전트 스타일 시트 초기화

다른 html 요소 보다 상대적으로 더 많은 사용자 에이전트 스타일 시트가 제공되므로 이를 확인하고 공부하는 것을 권장한다.

현실적으로 모든 사용자 에이전트 스타일 시트를 파악하고 적절히 초기화 해주는 것이 매우 어렵기 때문에 all: unset 진행

⭐️ all: unset
모든 속성들에게 질문한다. --> 너 상속 지원되니?

모든 스타일이 제거된다고 해도 html 폼 요소 원래의 기능에는 문제가 없음
다만, 보여지는 스타일이 모두 제거가 되 것이기 떄문에 접근성에 문제가 생김

➡️ 사용자 에이전트 스타일시트 중에 유용한 몇 속성

• 원상 복귀
• 더 멋지게 직접 제작

:root {
	font-size: 62.5% // 기본 폰트 16px의 62.5% -> 10px
}

사용자가 폰트설정에서 기본 폰트 사이즈를 바꿀 수 있기 때문에
고정 픽셀을 하면 사용자의 폰트 관련 속성을 무시하고 고정 값이 들어감