여러 폼 요소들
목차
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 속성을 사용해 그룹 이름을 설정한다.
속성
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 : 비활성화
예시
<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>참고
Last updated
Was this helpful?