[HTML] 입력받기 input

form

1. 형식

 

<form>	정보를 제출하기 위한 태그들을 포함	autocomplete 속성: 자동완성 여부 (기본: on)
<input>	입력을 받는 요소	type 속성을 통해 다양화
<label>	인풋 요소마다의 라벨	for 속성값을 인풋 요소의 id와 연결. 인풋의 클릭 영역 확장
<button>	버튼	type 속성에 submit(제출), reset(초기화), button(기본 동작 없음)

2. 그룹화

 

<fieldset>	폼 태그 내 입력요소와 라벨들을 그룹화	disabled 속성: 포함된 입력요소 비활성화
<legend>	필드셋 요소의 제목 또는 설명

 

input

👉 <input>의 타입과 속성들 보기

 

텍스트 관련 인풋 속성들

속성설명비고

placeholder	빈 칸에 보이는 안내문
maxlength	최대 길이
minlength	최소 길이	위반시 submit이 거부됨

숫자 관련 인풋 속성들

속성설명비고

min	최소값	date 등 타입마다 형식 다름
max	최대값	date 등 타입마다 형식 다름
step	간격

 

시간·날짜 관련 다른 타입들

👉 datetime-local, month, time, week

 

체크 관련 인풋 속성들

속성타입설명

checked	체크박스 & 라디오	체크됨 여부
name	라디오 (다른 타입들에서도 사용)	옵션들의 그룹으로 사용됨
value	라디오 (다른 타입들에서도 사용)	각 옵션마다 실제로 넘겨질 값

ex)

<form action="#">

  <h2>checkbox</h2>

  <input

    id="cbIp"

    type="checkbox"

    checked

  >

  <label for="cbIp">유기농</label> <br>

  <h2>radio</h2>

  <input

    type="radio"

    name="fruit"

    id="f_apple"

    value="apple"

    checked

  >

  <label for="f_apple">사과</label>

  <input

    type="radio"

    name="fruit"

    id="f_grape"

    value="grape"

  >

  <label for="f_grape">포도</label>

  <input

    type="radio"

    name="fruit"

    id="f_orange"

    value="orange"

  >

  <label for="f_orange">오렌지</label>

  <br>

  <input

    type="radio"

    name="vege"

    id="v_carrot"

    value="carrot"

    checked

  >

  <label for="v_carrot">당근</label>

  <input

    type="radio"

    name="vege"

    id="v_tomato"

    value="tomato"

  >

  <label for="v_tomato">토마토</label>

  <input

    type="radio"

    name="vege"

    id="v_eggplant"

    value="eggplant"

  >

  <label for="v_eggplant">가지</label>

</form>

 

파일 인풋 속성들

속성설명참조

accept	받아들일 수 있는 파일 형식	👉 작성 가이드
multiple	여러 파일 업로드 가능 여부

<textarea> 전용 속성들

속성설명비고

cols	글자수 단위의 너비	기본값 20
rows	표시되는 줄 수

• <textarea>는 기본값을 value 속성이 아닌 컨텐츠로 입력
• css로 우측 하단의 크기조절 버튼 (textarea { resize:none;})
• 👉 기타 사용가능한 속성들 보기

옵션 관련 속성들

- select, option

- optgroup

- datalist

multiple	<select>	다중 선택 가능. 드랍다운 대신 상자로 표시
selected	<option>	선택됨 ( checkbox, radio의 checked처럼 )
value	<option>	실제로 전송될 값
list	<input>	연결할 <datalist>의 ID

<progress> 태그 속성들

속성설명비고

max	최대값	기본: 1
value	진행 수치	자바스크립트로 변경

<progress

id="progressBar"

max="100">

0%

</progress>

<meter> 태그 속성들

속성설명비고

min, max	최소값과 최대값
low, high	전체 범위를 3등분하는 두 수치
optimum	이상적인 값	3개의 구간 중 한 곳에 위치
value	실제 값

<meter

min="0" max="100"

low="33" high="67"

optimum="90" value="50">

50달러

</meter>