Form

사용자 입력을 수집하여 처리하기 위해 사용되는 방식.

기본적인 폼 양식

input 설명란:

label

해당 레이블에 대한 설명이 존재.
input의 for 속성과 label의 id가 같으면 lable 클릭으로 input 요소를 만지는 효과를 가져오기도 한다.

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

HTML
CSS
JavaScript

• type="radio" input은 라디오 타입을 가짐 (하나의 선택지만 가짐)
• id, for id값과 for값이 다르면 다른 값을 선택하거나, 선택되지 않을 수 있다.
• name="" 동일한 name을 가진 아이템이 하나의 선택지로 묶이며 name이 다르다면 라디오도 여러개가 선택될 수 있다.
• value="" 서버에 저장할 때 해당 값을 저장하는 방식으로 영어, 숫자만 사용 가능하다. (한글 사용 불가)

action

양식 제출시 사용시 이용

• submit 버튼에서 action으로 데이터 처리 서버를 지정하면 해당 서버에서 입력받은 값을 처리하게 된다.
• input 태그에서 name 속성이 없다면 제출버튼을 눌러도 서버에 데이터가 넘어가지 않는다.

select

드롭다운 목록 정의시 사용

사용 속성

select 관련 코드	설명	option 관련 코드	설명
select	드롭다운임을 정의	option	드롭다운의 항목을 정의
size	표시되는 값 지정, 초과시 스크롤	selected	기본값은 첫 항목, 속성 적용시 먼저 선택

1 2 3 4

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

datalist

미리 정의된 옵션목록을 지정하며 value값을 목록으로 확인할 수 있다는 차이점을 보인다.

<input list="list1">
<datalist id="list1">
  <option value="a">
  <option value="b">
  <option value="c">
  <option value="d">
</datalist>

input의 list 값과 datalist의 id값이 동일해야 사용가능

textarea

텍스트 입력 필드가 여러 줄로 작성할 수 있도록 지정

<textarea rows='5' cols='30'> </textarea>

rows 표시되는 줄 수
cols 시각적 너비 값
style 요소를 이용하여 width, height를 이용한 크기 지정도 가능하다.

fieldset, legend

데이터 그룹화에 사용되며 legend를 이용하여 그룹의 이름을 정의한다.

fieldset 예시 1 2 3 4

<fieldset>
  <legend>fieldset 예시</legend>
  <select size='3'>
    <option>1</option>
    <option selected>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</fieldset>