HTML 요소 3 - (폼 관련 요소)
5. 폼 관련 요소
▶️ form
정보를 제출하기 위한 입력창 (사용자와의 대화형 문서구획)
-
form 내부에 input창 또는 제출을 위한 버튼을 만들어 입력한 정보를 제출하는 등의 동작을 수행할 수 있다
action속성: 제출하는 주소(form 데이터를 전송함)method속성POST: 입력된 데이터를 body 본문에 담아서 전송한다(주소창에 데이터가 보여지지 않는다)GET:action의 url과 ?와 입력한 데이터를 name과 =를 덧붙여 전송한다(사용자가 입력한 데이터를 주소창에 보여진다)POST는GET과 다르게 body에 데이터를 담아서 전송하기 때문에 크기의 제한이 없다(대용량 데이터를 담아서 보낼 수 있다)
▶️ fieldset
여러 개의 label과 input들을 묶어줄 때 사용한다
<form>
<fieldset>
<legend>Login</legend>
<label for="user-id">User Id</label>
<input type="text" id="user-id" name="user-id">
<label for="user-password">User Password</label>
<input type="password" id="user-password" name="user-password">
</fieldset>
</form>
legend태그는 범례를 뜻하고, fieldset에서 제목으로 사용된다 (무조건 첫번째 자식요소로 와야함)
▶️ input
여러가지 데이터를 입력받을 수 있다 (텍스트만이 아닌 checkbox, file, number 등)
<form action="" method="GET">
<label for="test"></label>
<input type="text" name="dataName" id="test">
<button type="submit"></button>
</form>
input은 보통 label과 함께 쓰여진다(label - 입력창이 무엇을 가르키는지 설명해주는 역할) label의 for속성은 input을 가르키기 위해서 사용되는데 이때 input의 id값을 가르킨다 또는 for 속성을 사용하지 않고 label의 자식요소로 input을 사용한다
input type
| type | 설명 |
|---|---|
text |
텍스트 입력칸(기본값) |
password |
text와 속성은 같으나, 데이터가 보이지 않음(*로 보임) |
checkbox |
체크박스를 만듬(여러개 선택 가능) -> 제출하면 name에 on이 추가되어 보여진다 |
radio |
라디오 버튼(한가지만 선택가능) |
button |
누름버튼 |
submit |
데이터 전송 버튼 |
reset |
재설정 버튼 (form 내부의 데이터를 초기화한다) |
file |
파일 선택칸을 만듬 |
hidden |
사용자에게 보여지지 않는 창을 만듬 |
image |
이미지로 된 전송버튼(src="이미지경로") |
color |
색상 선택칸을 만듬 |
date |
날짜 입력칸(년, 월, 일) |
datetime |
날짜 시간칸(년, 월, 일, 시, 분, 초, 초분할) - 표준시간o |
datetime-local |
날짜 시간칸(년, 월, 일, 시, 분, 초, 초분할) - 표준시간x |
email |
email 주소칸 |
month |
년과 달 입력칸 |
number |
숫자 입력칸(max, min, step, value) |
range |
동영상 컨트롤러 처럼 범위가 있는 칸을 만듬 |
search |
검색칸 |
tel |
전화번호 입력칸 |
time |
시간 입력칸 |
url |
주소 입력칸 |
week |
년과 주 입력칸 |
브라우저마다 지원하지 않는 type도 있으므로 Can I use 사이트에서 확인하는 것이 좋다
minlength="숫자" maxlength="숫자"로 최소길이, 최대길이를 지정할 수 있다- 양식이 지켜지지 않은 경우 툴팁을 사용자에게 보여준다
-
checkbox나 radio 버튼의 경우 초기에 선택되어 있는 값을
checked속성으로 준다(boolean) name속성: 제출했을때의 데이터를 구분해주는 역할은 한다,POST로 데이터를 보낼때 백에서name을 key로 데이터를 받는다placeholder: 입력칸의 힌트 역할을 한다, 입력칸에 데이터를 입력하면 placeholder가 사라지고, 다시 빈칸으로 만들면 나타난다autocomplete: 자동완성기능이 작동 (on,off값을 입력해서 활성화 및 비활성화 한다 - 기본값은on)required: (boolean값) 무조건 입력되어야 한다disabled: 입력할 수 없도록 한다 (아에 값이 존재하지 않도록 된다 - form 전송에 포함이 되지 않음)readonly: 입력할 수 없도록 한다 (기본값value을 주고 변경하지 않을때도 사용)step: 증가하는 단위(크기)를 지정한다min,max:type이number나range일때 최소 최대값을 지정할 수 있다
▶️ button
클릭가능한 버튼
<button type="submit">submit</button>
type속성submit: 입력한 데이터를 제출하도록 한다reset: form내부의 값을 초기화한다button: 아무 동작도 하지 않는다
value속성 : 버튼에 들어갈 텍스트(문자열)을 지정할 수 있다 (value를 사용하지 않고 태그의 내용으로 기입하는 경우 문자열이 아닌 다른 컨텐츠도 가능하다)
▶️ select
값을 고를 수 있는 드롭다운 메뉴를 보여준다
- 선택보기는
option을 이용하고,option의 속성인value는 제출될 데이터이다 - 처음에 “select”같은 기본 문구를 사용하기 위해서
select에required을 추가하고, 해당 글의option속성을value=""(빈값)로 한다 selected는 미리 선택되어 있을 값을 지정(bollean)- optgroup을 이용하면 보기를 그룹화시킬 수 있다.
<form action="" method="get">
<label for="num">number</label>
<select name="num" id="num">
<option value="">select</option>
<optgroup label="1~3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
<optgroup label="4~6">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</optgroup>
</select>
</form>
▶️ datalist
가능한 선택지를 추천한다
<form action="" method="get">
<label for="num">number</label>
<input name="num" id="num" list="num-list"/>
<datalist id="num-list">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</datalist>
</form>
input에는list="datalist의id”,datalist에는id를 지정한다
▶️ textarea
여러줄(멀티라인)의 텍스트를 입력받을 수 있는 태그
<textarea name="data" id="data"></textarea>
- 미리 데이터를 입력할 수 있다
pre처럼 개행이 적용된다- 자식요소를 가질 수 있다 ()
rows로 가로줄,cols로 세로줄의 수를 지정할 수 있다(늘어날 수 있다)placeholder로 힌트를 제공할 수 있다- 크기를 변경 할 수 있다 (고정시켜두기 위해서
resize: none;사용)