form은 사용자가 입력한 '데이터를 서버로 옮기는 역할'을 한다.
설문조사나 쇼핑할 때의 옵션 선택 페이지, 로그인 창 등등 많은 것들이 폼으로 이루어져있다.
폼태그에는 필수 속성 두 가지가 있다.
서버 url을 담는다.
데이터 전송 방식을 정해준다.
GET - 주소창에 사용자가 입력한 값이 보인다. 값을 모두가 공유할 수 있는 상황에 쓰인다. (ex. 검색창)
POST - 로그인과 같은 중요한 정보를 서버로 보낼 때 쓰인다.
action과 method는 폼 태그의 핵심이므로 절대로 빼먹어선 안된다.
사용자가 선택하거나 작성할 수 있는 요소 역할을 한다. 데이터를 담는 그릇.
| 속성명 | 설명 |
|---|---|
| type |
- input의 형태 및 기능을 결정한다.- 어떤 것들이 있는지는 링크 참고. - input 타입 총정리 |
| name |
- input의 이름을 명시하는 속성. 서버에서 데이터 이름을 참조할 때 쓰인다.- input 태그들 뿐만 아니라 textarea, select 등에도 쓰인다.- type에 따라 통일하거나 > radio, 다르게 작성해야한다. >checkbox
|
| value |
- 초기값을 정한다. 초기값은 직접 작성하거나, 사용자가 입력할 수 있다. - type에 따라 각각 쓰임새가 다르다.- radio, checkbox: 서버로 제출되는 값.- submit, reset, button: 버튼의 이름.- text, password: 사용자가 수정할 수 있는 초기값.
|
| checked | - 미리 체크되어 보인다. |
| disabled |
- 해당 input이 비활성화 된다.- 외관이 약간 흐릿해지며 글쓰기나 선택할 수 없다. - form 제출 버튼을 눌러도 제출되지 않는다. |
| placeholder |
- 입력 힌트를 제공하는 속성. - 편리한 속성 같지만 ie는 지원을 안한다. - 그밖에도 다양한 문제점이 있다고 한다. 아래 링크 참고. - Placeholder를 사용하지 마세요. |
| required |
- 해당 인풋을 공백으로 둘 시 넘어가지 않는 속성이다. - 이 속성을 사용하려면 안내 사항을 꼭 넣어야 한다. 아래 링크 참고. - 4. 명확한 지시 사항 제공 |
| autocomplete |
- 자동완성 지원여부를 결정한다. - 디폴트는 on. |
| readonly |
- 사용자가 수정 및 클릭할 수 없음. - 오로지 읽기만 가능하게 하는 속성. |
input 요소는 반드시 form 안에 넣어야 작동한다.
value는 데이터를 담을 그릇이기 때문에 꼭 필요하지만, 안의 내용은 비워놔도 괜찮다.
type : image는 이미지가 텍스트를 대신하기 때문에 value를 굳이 쓰지 않음.
사용자가 input 태그를 쉽게 사용할 수 있도록 영역을 잡아준다.
input과 label을 연결시켜야 스크린 리더기에서도 읽힌다.
label을 이용할 수 있는 태그로는,
button, input, keygen, meter, output, progress, select, textarea 등이 있다.
두 가지 사용 법이 있다.
label 태그가 input 바깥에 존재한다. id와 for 속성을 이용해 다음과 같이 서로 이어준다.
1 2 | <label for="a"></label> <input id="a" type="text" name="text"> | cs |
이 방법이 좀 더 정석인 걸로 보인다.
label 태그 안에 input 요소를 넣는다. 이때 label : for 속성은 지운다.
1 | <label><input type="text"></label> | cs |
처음에 이 방법으로 일기 쓰다가 보기도 불편하고 스타일 먹이기도 힘들어서 싹 다 수정했다...
역시 사람들이 안 쓰는 데는 이유가 있음.
모든 input 태그는 접근성을 위해 label을 꼭 써야한다.
하지만 버튼 요소들 (submit, reset, image)은 굳이 label을 안쓰는 것 같다.
W3S에서도 버튼 요소들은 레이블을 쓰지 않는 게 보인다. 링크 참고. HTML <input> 유형 속성
label을 쓸 수 없는 경우, input에 title 속성을 넣기도 한다. 링크 참고. 폼 관련 요소
label은 인라인 요소이므로 안에 블럭요소가 올 수 없다.
무의식적으로 label 안에 p 넣었다가 유효성 검사에서 딱 걸림 (ㅠㅠ)