여러 폼 요소들

목차

  • button

  • select

  • option

  • optgroup

  • textarea

  • output

  • datalist

  • progress

  • meter

<button>

버튼 폼 컨트롤로 사용자의 인터랙션을 받아 액션을 트리깅(방아쇠) 처리함.

타입

  • submit (초기 값) : 클릭 시 실행되는 브라우저가 열리며 폼에 입력한 정보 전송

  • button : submit과 다르게 클릭해도 아무런 변화가 없음

  • reset : 초기화 버튼

    • 별 다른 것을 설정하지 않아도 form 요소 안의 inqut 등에 설정되어 있던 것이 초기화 된다.

예시

<button type="submit">전송</button>
<button type="button">버튼</button>
<button type="reset">초기화</button>

<select>

드롭 다운 메뉴(옵션을 선택 할 수 있는) 컨트롤을 말함. 내부에 <option> 요소를 포함하여 사용자에게 선택할 수 있도록 한다. <option>을 묶어 그룹으로 만들고자 한다면 <optgroup> 요소를 사용하고, label 속성을 사용해 그룹 이름을 설정한다.

<optgroup> 요소 사용은 table의 col 또는 colgroup 속성 사용과 비슷하다.

속성

  • name : 서버에 전송 할 때 필요한 속성

  • multiple : 선택지를 여러개 선택할 수 있음(값이 없음)

  • disabled : 비활성화

  • required : 필수 입력

  • size : 선택지가 보여지는 개수

예시

<label for="user_hobby">취미</label>
<select name="user_hobby" id="user_hobby">
  ...
</select>

<option>

  • <select>, <datalist>, <optgroup> 내부에 포함 가능한 컨트롤로 항목을 만드는데 사용됨.

속성

  • value

  • selected : 기본적으로 선택되어 있다.

  • label : 선택지에 다른 이름을 주고 싶다면 해당 속성을 사용해서 이름을 입력해 줄 수 있다.

  • disabled : 비활성화

value 속성

value 속성은 단순히 선택의 구분을 주기 위함이 아니라, 폼 전송 이벤트가 발생할 때 서버에 option 요소의 값을 전송해야 한다. 이 때 value 값을 전달하게 된다.

예시

<label for="user_hobby">취미</label>
<select name="user_hobby" id="user_hobby" required>
  <option value="0">없음</option>
  <option value="1" selected>축구</option>
  <option value="2" label="basketball" disabled>농구</option>
  <option value="3">독서</option>
  <option value="3">영화관람</option>
</select>

<optgroup>

  • <option> 컨트롤을 그룹지을 때 사용됨.

  • 선택지 내에서 그룹 생성

속성

  • disabled : 해당 그룹을 비활성화

  • label : 해당 옵션만 따로 이름을 설정할 수 있음

예시

<p>
  <label for="user_hobby">취미</label>
  <select name="user_hobby" id="user_hobby" required>
    <option value="0">없음</option>
    <optgroup label="구기종목">
      <option value="1" selected>축구</option>
      <option value="2" label="basketball" disabled>농구</option>
    </optgroup>
    <optgroup label="문화생활" disabled>
      <option value="3">독서</option>
      <option value="3">영화관람</option>
    </optgroup>
  </select>
</p>

<textarea>

  • 멀티라인 일반 텍스트 편집 컨트롤을 말한다.

  • 텍스트 박스의 크기 설정 가능. 텍스트를 길게 입력할 때 사용

  • 기본적으로 사용자가 <textarea>의 사이즈를 변경 할 수 있지만 고정하고 싶다면 resize: none을 적용한다.

속성

  • name

  • placeholder

  • rows : 입력할 수 있는 글의 줄 수

  • cols : 가로로 입력할 수 있는 글자 수

  • readonly

  • required

  • disabled

  • minlength

  • maxlength

예시

<div>
  <label for="user_comments">코멘트</label>
  <p>
    <textarea name="user_comments" id="user_comments" cols="24" rows="5">
    남기고 싶은 말을 작성해주세요.</textarea
    >
  </p>
</div>

  • <fieldset>

    • 하나 이상의 폼 컨트롤을 그룹화 하는데 사용됨. -주로 폼요소 내부에 사용한다

속성

  • name

  • disabled

예시

<body>
  <form action="https://formspree.io/your@email.com" method="POST">
    <fieldset name="user_account">...</fieldset>
  </form>
</body>

<output>

  • 계산된 결과를 출력하는 컨트롤.

속성

  • name

  • for

예시

<form oninput="result_sum.value = parseInt(n1.value + n2.value, 10)">
  <p>
    <input type="number" name="n1" value="4" /> +
    <input type="number" name="n2" value="10" /> =
    <output name="result_sum">14</output>
  </p>
</form>

<datalist>

데이터 목록 요소 컨테이너 컨트롤. 내부에 <option> 요소를 사용해 항목을 만든다.

예시

<label
  >이동할 웹주소
  <input list="url_ex" type="url" name="user_url" id="user_url"
/></label>
<datalist id="url_ex">
  <option value="http://naver.com"></option>
  <option value="http://nate.com"></option>
  <option value="http://google.com">google</option>
  <option value="http://goo.gl">google</option>
</datalist>

<progress>

  • 작업의 완료 진행 상황을 표시하는데 사용 되는 컨트롤.

  • 퍼센트의 수치 값을 넣어줘야 한다고 공식문서에 명시 되어 있다.

속성

  • value

  • max

예시

<progress value="10" max="100">10%</progress>

<meter>

  • 알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타내는 컨트롤. (게이지(gauge)라고도 불림)

    디스크 사용 현황, 쿼리 결과의 관련성, 특정 후보에 대한 투표율 등이 해당됨.

  • 공식문서에서는 게이지의 값을 넣어줘야 한다고 말한다.

속성

  • value

  • min

  • max

  • low

  • high

  • optimum

예시

<meter value="20" min="5" max="40">20</meter>

참고

Previousform, input, labelNext<fieldset>, <legend>

Last updated