form과 input

form 속성

• method : 사용자가 입력한 내용을 서버에 어떻게 넘겨줄 것인가

get: 데이터를 256 ~ 4,096 byte 까지만, 주소표시줄에 사용자가 입력한 내용 표출

post : 입력한 내용의 길이에 제한을 받지 않고 내용도 드러내지 않는다

• name : 자바스크립트로 폼을 제어할 때 사용할 이름
• action : form 태그 안의 내용을 처리해 줄 서버 프로그램
• target : action속성에서 지정한 스크립트파일을 다른 위치에서 열도록 함
• fieldset : from안에서 여러 구역을 나누어 표시할 때 

ex) 쇼핑몰 입력창의 개인정보, 배송정보

<form>
	<fieldset>
    	<legend>개인정보</legend>
	</fieldset>
	<fieldset>
    	<legend>배송정보</legend>
	</fieldset>
</form>

• label : input 처럼 폼요소에 레이블을 붙일 때 사용

ex) ID, PW와 같이 붙여 놓는 텍스트, label 사용시 폼과 레이블이 서로 연결됨

태그 안에 폼
<label>레이블명<input></label>

레이블과 폼 따로 for과 id를 사용해 연결
<label for="id">레이블명</label>
<input type="text" id="id">

---

form 태그

• textarea : 너비지정(cols), 줄(rows), 영문자기준으로 한글은 2배다. cols는 글자크기, 글꼴에 따라 달라질 수 있다.지정한 row값이 넘으면 스크롤이 생성된다.
•  select, option : 드롭다운, select 안에 option이 있음. 기본적으로 하나만 표시한다.

select - size : 드롭다운 항목의 갯수, multiple : 드롭다운에서 둘 이상의 항목선택

option - value : 서버로 넘겨 줄 값, selected : 기본적으로 보여줄 값

• datalist, option : select와 동일한 구조, option의 value는 텍스트필드에도 나타남. 검색해서 입력할 수 있는 셀렉트 박스. 데이터 목록을 사용시 id 값 입력

<input type="text" list="id">
<datalist id="id">
    <option value="value1"></option>
    <option value="value2"></option>
</datalist>

• button : type 속성이 활성화 되었을 때의 동작지정

submit, reset, button : input과 동일

button 태그는 폼이 아닌 곳에서 사용 가능

---

input 태그

text, password, search(한번에 지울 수 있는 폼), url, email, tel, checkbox, radio, number(숫자만 입력가능), range(좌우 컨트롤러), date(지역 기준 날짜 - 년,월,일), month(지역 기준 날짜 - 연,월), week(지역 기준 날짜 - 연,주), time(지역 기준 시간- 시,분,초,분할초), datetime(국제 표준시 날짜와 시간 - 연,월,일,시,분,초,분할초), datetime-local(지역 기준 날짜와 시간), submit(전송버튼), reset, image(submit 대용 이미지), button(일반 버튼), file, hidden(사용자에게 보이지 않지만 서버에 넘겨주는 값)

range, number

• text : 한 줄짜리 일반 텍스트 / password : 입력내용이 *, ●로 표시. 이것을 제외하면 text 필드와 동일

size : 필드의 길이 지정, 즉, 화면에 보일 글자수

value : 텍스트 필드에 보여질 내용, 사용하지 않으면 빈 필드, password에서는 사용하지 않음

maxlength : 최대 문자수

• checkbox, radio

value : 선택한 내용을 서버에게 알려줄 때 넘겨줄 값. 영문, 숫자 필수

checked : 처음에 기본으로 선택되게 할 때

• number, range : number는 스핀박스(▲▼), range는 슬라이드

min : 최솟값, 기본 0

max : 최댓값, 기본 100

step : 숫자 간격, 기본 1

value : 초깃값

• date, month, week : month와 week는 사파리를 지원하지 않음
• time, datetime, datetime-local : time은 오전, 오후, 시, 분

min, max : 범위제한(시작, 마지막) - ex) min="2023-01-01" max="2023-12-31"

step : 스핀박스의 증갑 크기

value : 기본값

• submit, reset : submit은 form의 action에 지정된 프로그램으로 넘겨진다. reset은 input의 입력된 모든 정보를 재설정 하여 지운다. value는 버튼 내용

---

input 태그의 속성

• autofocus : 페이지를 불러 올 때 마우스 포인터를 표시
• placeholder : 힌트
• readonly : 읽기 전용
• required : 필수 입력