HTML Living Standard(4) | form 요소들

✨form은 어떤 요소를 가지고 있을까?

 form 요소들은 특히 백엔드 개발자들과의 협업이 매우 중요하다. 사용자의 입력값을 데이터로 받아서 그걸 처리하고 가공하는데 해당 form요소들이 중요하기 때문.

 

 form 태그는 대표적인 요소로 action과 method를 가지는데, action은 데이터가 submit 되었을때 어떤 서버로 보내줄 것인가 결정하는 것이며 method는 서버로 값을 보내는데 보이게 보낼것인지(get) 안보이게 할것인지(post) 정하는 방식으로 설정된다. 쉽게 말해 공개적으로 내 tmi를 알려줄것인가, 포스트잇에 내 tmi를 적고 고백공격을 할것인지.

 또한 하위 요소로 fieldset을 가지는데 form 내부의 영역을 나누게 되는 semantic 태그라 볼 수있다. 뒤이어 form의 제목 및 목적을 의미하는 legend라는 요소가 바로 뒤에 따라 붙게 된다. 다음 예제를 보면 해당 form은 포켓몬마스터를 향한 트레이너의 설문지라는것을 알 수 있다.

<form action="(서버로 보낼 주소)" method="(서버에 값을 공개할것인지 비밀스럽게 보낼건지)">
  <fieldset>
    <legend>포켓몬 마스터로 향하는 방법</legend>
  </fieldset>
</form>

 

 하위요소로는 input과 label을 가지게 된다. 주로 input을 설명하는 태그로서 label요소가 사용되며 시각장애인이 스크린리더로 폼을 선택할 수 있게끔하는 semantic 태그라 볼 수 있다. 단, 다른 태그로 설명이 가능할때는 label이 꼭 쓰여지지 않아도 된다. 또한 label의 for요소와 input의 id요소가 일치해야 하나의 form으로 역할을 수행할 수 있게 된다.

 

 input에는 다양한 속성이 있다. 다음 표를 보면서 확인해보자. 그리고 input는 열려있는 태그라서 fieldset으로 묶여있지 않는 이상 쉽사리 다른 태그들을 추가하기 어렵고 input마다 css스타일을 지정하기도 어렵다.

속성값	설명
type	text : 입력한 text를 그대로 표현
	button : 누를 수 있는 간단한 버튼을 표현
	password : 말 그대로 암호를 ****로 표현
	search : 검색창 표현
	date : 날짜 입력을 표현
	time : 시간 입력을 표현
	range : 슬라이드 바 형식(음악볼륨 조절 등) 표현
	number : 숫자를 선택할 수 있게 표현
	color : 기본 RGB 컬러값을 선택할 수 있는 color picker 창을 표현
	radio : 선택 항목 중 하나만 선택할 수 있게 표현
	checkbox : 선택 항목 중 0개 이상 선택할 수 있게 표현
	reset : 해당 form의 값을 초기화.
	file : 파일 업로드할 수 있도록 함
	email : 이메일 주소를 작성할 수 있게 표현.  **모바일상 가상키보드가 입력하기 편하게 달라짐
	url : 웹페이지 주소를 작성할 수 있게 표현
	tel : 전화번호를 입력하게 표현. **모바일상 가상키보드가 입력하기 편하게 달라짐
name	태그의 이름을 지정. 서버로 보내는 key 값이 된다
id	label의 for값과 동일시하는 값을 지정
readonly	읽기전용으로 지정
required	필수태그로 지정. 라디오버튼과 체크박스에 주로 사용. 해당 속성값이 지정된 form의 요소를 선택하지 않고 submit 버튼을 누르면 에러가 발생하여 데이터가 전송이 안됌  * radio 버튼 선택할 때, 첫번째 input에만 required 넣으면 반드시 선택하게끔 넛지를 유도함.  * checkbox 선택할 때는 체크가 필요한 것에만 required 넣으면 마찬가지로 넛지 유도.
placeholder	입력할 값에 대한 힌트를 지정
maxlength	최대 글자수 지정
minlength	최소 글자수 지정

 

✨input이 아닌 다른 요소의 form들 : <select>

 드롭다운 리스트를 생성할 때 사용된다. option 요소와 함께 사용됨. 추가 요소는 다음과 같다

• multiple : 한개 이상의 option 요소를 선택할 수 있지만 윈도우의 경우 ctrl, 맥의 경우 command 버튼을 눌러서 선택해야 한다는 추가 조작점이 생긴다.
• size :  드롭다운 리스트에서 한번에 보여지는 option 갯수를 조절할 수 있다.

 

 select가 사용되면 반드시 딸려오는 option에는 value와 selected의 속성이 존재한다.

• value : 옵션속 컨텐츠 들로서 화면단에 직접 보이는 값은 아니고 서버에 전송될때 해당 value값이 전송 됌.
• selected : 웹페이지 로딩 시 해당값이 기본으로 보여지게끔 함. 추가적으로 disabled 속성을 추가하면 해당값을 선택할 수 없게 됨.

 

✨input이 아닌 다른 요소의 form들 : <datalist>

 select 태그와 비슷하지만 input의 list 속성을 섞어서 기본적으로 선택할 수 있는 옵션을 제공함과 동시에 사용자가 원하는 임의의 값을 입력받을 수 있도록 편의성을 제공한다. input의 list 속성값과 datalist의 id 값이 일치해야 한다. 대개 select선택 중에서 원하는 입력값이 없을경우 사용되어지는 요소. *사전 입력값을 쓸때는 placeholder 값을 사용한다

<label for="pickpokemon">밖은 춥단다 함께할 친구들을 고르렴 : </label>
<input type="text" id="pickpokemon" list="pokemons" name="pokemons" placeholder="춥다..골라줘...">
<datalist id="pokemons">
    <option value="파이리">파이리</option>
    <option value="브케인">브케인</option>
    <option value="아차모">아차모</option>
    <option value="불꽃숭이">불꽃숭이</option>
</datalist>

해당값을 실행하면 따뜻한 불꽃 포켓몬중 하나를 데려갈 수 있고 엄동설한에 이 친구들이 필요하지 않으면 다른 포켓몬을 적어서 데려갈 수도 있다.

 

 

✨input이 아닌 다른 요소의 form들 : <textarea>

 태그이름에서 유추할 수 있듯 여러 줄의 text를 입력받을 수 있는 요소이다. 주 속성으로는 다음과 같다

• cols : 해당 요소가 보여줄 입력창의 넓이. 평균적인 영타기준으로 넓이를 기준으로. 기본값은 20
• rows : 기본적으로 보여줄 입력 줄 수를 보여줌

 

✨input이 아닌 다른 요소의 form들 : <button>

 input과 비등비등하게 제일 많이 쓰이는 요소가 아닐까 싶다. 클릭 가능한 버튼을 표현할 수 있도록 한다. 주 속성도 함께 알아보자

• submit : button 요소의 기본값이기도 하며 해당 버튼이 서버로 form의 모든 양식 데이터를 전송.
• reset : input의 reset과 비슷한 기능이지만 상위 버전으로, 해당 문서 form의 모든 값을 초기화.
• button : 그냥 클릭 가능한 버튼. 모양새만 구현.

input과는 달리 button은 닫혀있는 태그라 내부에 여러 자식 컨텐츠도 추가 가능하고 가상요소들도 추가 가능하기에 버튼을 사용해야 할때는 다채로운 디자인을 적용하기 위해서는 input 타입의 button보단 button 태그를 사용하는것이 더욱 좋다.