폼(Form) 뿌시기

소정·2024년 1월 12일

form html

멋쟁이사자처럼

목록 보기

17/20

`form`

웹을 사용해 본 사람이라면 누구나 사이트에 회원가입을 해봤을 것이다.
form이 사용되는 대표적인 예시가 회원가입이다 !

form은 입력 양식 전체를 감싸는 요소이다.
input, select 등의 입력 양식을 통해 전달받은 데이터를, 어떤 식으로 처리할지 form의 여러 속성을 통해 설정할 수 있다.

📌 속성

action 데이터가 전송되는 서버 url 또는 html 링크
name form의 이름
- 한 페이지에서 중복하여 사용 불가

method 양식을 제출할 때 사용할 HTTP 메서드
- get 양식 데이터를 action URL과 ? 구분자 뒤에 이어서 전송
- post 양식 데이터를 요청 본문으로 전송

target 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드
- _self 기본값 | 응답을 현재 브라우징 맥락에 표시
- _blank 응답을 새로운 브라우징 맥락에 표시
- _parent 응답을 현재 브라우징 맥락의 부모에 표시
- _top 응답을 최상단 브라우징 맥락

autocomplete 입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄
- on 브라우저가 자동으로 값을 채워넣음 (사용자의 과거 입력값에 기반)
- off 브라우저가 자동으로 값을 채워넣지 않음

📌 예시

<form name="join" action="/action_page.php" method="get" target="_self" autocomplete="on">
  
  <!-- 입력 양식 -->
  <input type="text" name="name"> 
  <input type="text" name="id">   
  <input type="password" name="password">   
  <!-- 제출 버튼 -->
  <button type="submit" value="Submit"> 
    
</form>

사용자의 이름, 아이디, 패스워드에 대한 값을 입력 양식을 통해 전달 받았다.
submit 버튼을 통해 해당 데이터를 제출할 때, form의 속성이 작동한다.

name="join" 아래의 데이터는 'join'이라는 이름으로 취급됨
action="/action_page.php" 해당 파일로 데이터가 전송됨
method="get" 데이터가 본문으로 전송되어 URL에 노출되지 않음
target="_self" 양식 제출의 결과를 현재 브라우징에 표시함
autocomplete="on" 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워넣음

`fieldset, legend`

form 내에 다양한 범주의 입력 양식이 있다면, fieldset을 활용하여 그룹핑할 수 있다.

fieldset 입력 양식과 레이블을 그룹화
legend 그룹화 된 fieldset의 설명 제공
- fieldset의 첫번째 자식이어야 함

📌 `fieldset` 속성

disabled 모든 자손 컨트롤을 비활성화 함
- 비활성화 시 편집 X
- 비활성화 시 제출 데이터에 포함 X
- 비활성화 시 마우스 클릭, 포커스 등 브라우저 이벤트 모두 적용 X

form form id를 작성하여 연결
- 해당 속성을 통해, fieldset이 form의 하위 요소가 아니어도 연결 가능

name 그룹의 이름
- fieldset의 설명은 legend 요소 사용

📌 예시

🔎 `disabled`

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

`input`

form 요소 내부에서 가장 많이 사용되는 입력 양식이다.
사용자로부터 데이터를 받기 위한 다양한 유형의 input이 존재한다.

입력 유형과 속성의 조합이 매우 많아서, HTML에서 가장 강력하고 복잡하다고 할 수 있다.
(MDN 피셜)

type 속성에 따라 input의 형식이 결정된다. (📌 타입 참고)

📌 속성

다음은 자주 쓰는 속성을 [속성 설명 | 사용 가능한 타입 ]으로 정리한 것이다.

type input 태그의 타입을 설정 | 모두
readonly 읽기 전용(입력, 수정 불가) 지정 | hidden, range, checkbox, radio 제외 모두
placeholder 값이 없을 때 입력 양식에 나타나는 텍스트 |
text, search, ur, tel, email, password, number
maxLength 최대 길이(문자 수) 지정 | text, search, url, tel, email, password
required 필수 입력 필 지정 | hidden, range, color 및 버튼을 제외한 모두
checked 체크됨 | checkbox, radio

다음은 자주 사용되진 않지만 알고 있으면 유용한 속성이다.

autocomplete 자동 완성 설정
disabled 비활성화 여부
multiple 파일, 이메일 타입에서 여러 값을 허용할지 여부
accept 파일 타입에서 업로드 가능한 파일 유형 제어

📌 가상 클래스

아래의 가상 클래스를 활용하면, 속성 여부에 따라 input 스타일링이 가능하다.

:disabled 현재 비활성화된 input 선택
:read-only 사용자가 편집할 수 없는 input 선택
:placeholder-shown 값이 입력되지 않아, placeholder를 표시하고 있는 input 선택
:checked 현재 선택되어 있는 체크박스 또는 라디오 선택
:required 필수 항목인 input 선택

📌 타입

hidden 사용자에게 숨겨야 하는 데이터 저장 그릇
<input type="hidden" id="postId" name="postId" value="34657" />
text 기본 한 줄 텍스트 필드
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" />
checkbox 체크 박스 (단일 값을 켜거나 끌 수 있음)
<input type="checkbox" name="scales" checked />

radio 체크 박스 (관련된 옵션의 세트인 라디오 버튼 중 하나만 선택 가능)
<input type="radio" id="contactChoice1" name="contact" value="email" />
<input type="radio" id="contactChoice2" name="contact" value="phone" />

color 색상을 입력할 수 있는 입력 필드 생성
<input type="color" value="#ff0000" />

date 날짜를 입력할 수 있는 입력 필드 생성
time, date, week, month 비슷한 입력 필드로 사용 가능
<input type="date" id="start" name="trip-start" value="2024-07-22" min="2024-01-01" max="2024-12-31" />
file 파일 한 개 혹은 여러 개 선택 가능한 입력 필드 생성
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />
number 숫자 입력이 가능한 입력 필드 생성
<input type="number" id="tentacles" name="tentacles" min="10" max="100" />
password 안전하게 입력할 수 있는 비밀번호 입력 필드 생성
<input type="password" id="pass" name="password" minlength="8" required />
search 검색어 입력 필드 생성
- text와 동일하지만 일부 브라우저에선 입력 내용 즉시 삭제 버튼이 추가됨
<input type="search" id="site-search" name="q" />
tel 전화번호 입력 필드 생성 - 사용시 모바일에서 번호 맞춤형 키보드 제공
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />