이때까지 값을 입력하는 폼 요소를 배웠고, 이후는 그 외적인 폼 관련 요소들이다.
LABEL 요소
폼 요소와 연결해주기 위함으로 사용되는데, 웹 접근성 향상에 도움이 되므로 필수적으로 선언 해줘야 한다. id 속성의 값과 해당 label요소의 for속성의 값을 동일하게 적어야 한다.
아이디:
<label for="userid">아이디:</label>
<input type="text" placeholder="영문으로 써주세요" id="userid">화면에서 변하는건 없지만, '아이디:'라고 적힌 부분과 입력을 받는 요소가 연결이 된 상태이다. label 요소를 사용하면, 요소의 이름 부분인 '아이디:'라벨을 클릭하면 해당 폼 요소를 클릭한 것처럼 동작한다.
input type radio와 chechbox에서는 input type 하나당 label 하나가 매칭 되어야 하기 때문에
성별 : 남자 , 여자
성별 : 남자 <input type="radio" name="gender" checked>, 여자<input type="radio" name="gender">아래와 같이 바꾸면 된다.
성별 : 남자, 여자
성별 : <label for="male">남자</label><input type="radio" name="gender" id="male" checked>,
<label for="female">여자</label><input type="radio" name="gender" id="female">폼 요소들을 구조화하기 위해 필요한 태그 FIELDSET, LEGEND 요소
<fieldset>: 폼 요소를 그룹화해주는 태그
<legend>:<fieldset>태그로 묶인 그룹의 이름을 지정해주는 태그. fieldset 요소에 가장 먼저 자식으로 선언되어야 한다. 화면에도 fieldset끼리 묶여서 나타나게 된다.
FORM 요소
지금까지 배운 폼 요소들을 가장 크게 감싸주는 태그이다.
form 요소들의 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 중요한 태그이다.
- action 속성 : 폼 데이터를 처리하기 위한 서버의 주소가 들어간다.
- method 속성 : 값을 전송할 때 전송하는 방식을 지정해주는 속성
get, post 속성을 값으로 가진다.- get : 전송한 값을 주소창에 표시한다.민감한 정보를 다루는 포맷에는 쓰면 안된다.
- post : 전송한 값이 주소창에 뜨지 않는다.
