✔form
사용자가 정보를 입력할 수 있는 장치를 마련해주는 것
interaction이 들어감
✔input
사용자가 정보를 입력할 수 있는 영역
한줄만 입력가능
엔터치는 순간 form이 서버로 submit됨
-
action속성
목적지의 주소가 들어감
폼 데이터를 받아서 보낼 곳 -
method속성
양식을 제출할 때 사용할 HTTP 메서드-
get메서드
보낼려는 주소 뒤에 보내는 데이터 정보를 그대로 보여줌
주소창에 그대로 보이기 때문에 보안이 쎈 정보들은 Get으로 보내면 안됨 -
post메서드
서버에 요청을 보낼때 내용을 보이지않게 숨겨서 보냄
-
-
name속성
전체form데이터에서 이field가 어떤 데이터를 가지고 있는지 구별하는 역할
서버에 전송할 때form데이터 구분하기 위한 이름
같은form안에서만 안겹치면 됨, 다른form안에 있는name이랑 겹쳐도 됨
-
id전역속성
전체문서에서 얘를 구분하기 위한 구분자
한 문서 내에서 겹치면 안됨
-
type="submit"속성
기본값이 '제출' 로 쓰여짐 -
value="바꿀글자"
기본값 글자에서 바꿀 때 -
type="reset"속성
기본값이 '초기화' 로 쓰여짐 -
type="checkbox"속성
중복선택 가능
서버로 보낼 때name에 on이라는 밸류가 자동으로 들어감
체크가 된 상태로 시작하고 싶으면checked속성 넣어주기 -
type="radio"속성
한 덩어리 내에서는 중복선택 안되지만name을 다르게 하면 다른input으로 취급하기 때문에 중복으로 선택됨
체크가 된 상태로 시작하고 싶으면checked속성 넣어주기
같은name일 때 서버로 넘길 때 어떤 값에 선택되었는지 알 수 없기 때문에value값에 이름 다르게 넣어주기 -
placeholder속성
field에 아무값도 입력되있지 않을 때 어떤 값을 입력하면 좋을지 사용자에게 힌트를 줌 -
autocomplate속성
자동완성
이전에 같은name에 입력했던 애들을 후보값으로 보여줌 -
required속성
입력값이 없으면 오류메세지 뜨면서 제출이 안됨
✔can i use
브라우저 지원 여부 사이트
✔label
어떤 정보를 입력할지 설명
접근성을 위해 input을 설명하는 텍스트를 정확하게 적는게 좋음
for속성
본인의 짝을 찾을 때는id를 보고 찾기 때문에 그id넣어주기
✔input & label 둘이 짝으로 다님, 형제로 위치할 수도 있고. label의 자식요소로 input이 들어가도 됨(이 경우 for,id 작성 안해도 됨)
✔fieldset
form안에 여러가지 input & label을 그룹으로 나누어 구분하는 역할
input 하나하나 제어하지 않아도 됨
disabled 속성
자손 비활성화
block
✔legend
부모 <fieldset> 콘텐츠 설명을 나타냄
<fieldset>의 무조건 첫번째 자식
