form
정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타내는 태그
사용자에게 데이터를 받아 다른 페이지나 서버로 전송하기 위해 사용한다고 생각하면 될 듯 하다.
속성
action= 양식 데이터를 처리할 프로그램의 URI.
즉 form데이터를 전송할 서버의 주소
method= 양식을 제출할 때 사용할 HTTP 메서드.
ex)
POST: 양식 데이터를 요청 본문으로 전송합니다.
GET: 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송합니다.
label
사용자 인터페이스 항목의 설명을 나타냅니다.
ex) 입력창 옆에 있는 "아이디"텍스트
속성
for= 짝을 짓는 input을 지정할 수 있다.
input에는 id를 지정해야 하고 for에 해당 input의 id값을 넣으면 된다.
label태그의 자식으로 input을 넣는다면 for속성을 사용하지 않아도 된다.
input
웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
속성
굉장히 많으므로 나머지는 mdn에서 확인하자.
type= input의 유형을 지정해준다. type에 따라 다른 속성들이 적용 가능/불가능으로 나눠진다.
name= 전체 form데이터에서 개별 데이터를 구분하는 용도로 사용된다.
placeholder= 사용자에게 어떤 내용을 입력해야 하는지 힌트를 제공할 수 있다.
autocomplete="on" 일 경우 자동완성 기능을 제공한다. 반대는 off
required= boolean 속성으로 지정된 input에 내용이 없을 경우 제출을 막는다. 툴팁 제공
disabled= boolean 속성으로 지정된 input은 입력이 안되고 form 제출시 헤딩 데이터가 전송 되지 않는다. input의 완전한 비활성화
readonly= boolean 속성으로 지정된 input은 입력은 안되지만 form 제출은 정상적으로 된다. 읽기 전용
min, max= numeric types에 적용되는 속성으로 최소, 최대값을 지정할 수 있다.
step= numeric types에 적용되는 속성으로 숫자의 +- 간격을 지정할 수 있다.
datalist
다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담는다.
input과 같이 사용된다.
input에 list속성을 넣고 값으로 datalist태그의 id값을 기입하면 된다.
fieldset, legend
fieldset
웹 양식의 여러 컨트롤과 레이블(<label>)을 묶을 때 사용한다. 그룹화
fieldset에 disabled속성을 사용했을때 그룹화된 모든 input요소들에게 적용시킬 수 있다.
legend
부모 <fieldset> 콘텐츠의 설명을 나타냅니다.
button
클릭 가능한 버튼을 나타낸다.
button태그는 기본적으로 클릭했을때 어떤 동작도 일어나지 않는다.
input에도 submit, reset, button type속성이 제공되지만 button태그는 input과 달리 type을 지정해도 기본 텍스트가 제공되지 않는다.
또한 input에는 문자열만 들어갈 수 있지만 button은 자식을 가질 수 있으므로 이미지나 다른 태그를 넣을 수 있다.
select, option, optgroup
select
옵션 메뉴를 제공하는 컨트롤을 나타낸다. 드롭다운 메뉴를 생각하면 된다.
label과 연결하려면 select태그에 id값을 지정하면 된다.
서버에 전송할 데이터는 name으로 지정.
required= boolean속성으로 자식 중 값이 없는 데이터가 선택될 경우 제출되지 않는다.
option
요소의 항목을 정의한다.
서버에 전송할 데이터는 value속성에 기입하면 된다. value속성이 지정되어 있지 않다면 자식 텍스트를 전송한다. 즉 데이터를 전송하지 않으려면 value=""설정해야함.
selected= boolean속성으로 지정된 option이 첫 화면에 자동으로 선택되어 진다.
optgroup
<select> 요소의 옵션을 묶을 수 있다.
label= option그룹의 제목을 지정할 수 있다.
textarea
input text와 비슷하지만 다른점은 멀티라인을 제공하며 자식요소를 가질 수 있다.
rows= 지정한 행의 개수만큼 텍스트 입력 공간을 보여준다.
cols= 지정한 열의 개수만큼 텍스트 입력 공간을 보여준다.
rows, cols는 font-size에 따라 유동적으로 크기를 지정한다. 즉 css를 통해 크기를 조절하는 것을 권장한다.
