<label> 태그
<label>태그는 form 요소의 이름과 form 요소를 명시적으로 연결시켜줄때 이용하며
웹접근성 향상에 도움이 되기 때문에 필수적으로 선언을 해주셔야합니다.
기존 : 아이디 따로 text 상자 따로 선언되어있음
->label : label의 id 속성값을 통해 아이디라는 텍스트와 text 상자의 관계를 연결함.
<label>을 통해 관계를 연결한 경우 이를 클릭했을 때 해당 form 요소를 클릭한 것처럼 동작합니다.
Ex: 아이디라는 글자를 누르면 옆에 텍스트 상자에 입력할 수 있도록 활성화 됩니다.
<input>태그 이용 중 radio나 checkbox처럼 리스트목록 중 선택해야하는 경우에는
선택항목과 form요소가 잘 관계될 수 있도록 주의해서 설정해야합니다.
Ex: 성별:남자 ㅇ 여자 ㅇ 인경우, radio체크박스는 남자/여자와 label 형성이 되어야지, 성별과 label형성하면 안됩니다.
<fieldset> 태그와 <legend> 태그
<fieldset> : 여러개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용. 보통 form의 성격에 따라 구분.
<legend> : 폼요소의 제목으로 반드시 <fieldset> 내부 최상단에 작성.
<form태그>
<form>태그는 form요소를 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그입니다.
만약 <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 합니다.
- action 속성 : 폼데이터를 처리하기위한 서버의 주소
- method 속성 : 데이터를 전송하기위한 방식을 지정
1. get 방식 : 데이터가 전송될때 주소창에 파라미터 형태로 붙어 데이터가 노출됩니다.
2. post 방식 : 데이터가 전송될 때 데이터가 노출되지 않습니다.(보안)
'Spec UP - Frontend > 부스트코스_UI 개발' 카테고리의 다른 글
HTML_시멘틱마크업:Semantic (0) | 2020.03.19 |
---|---|
HTML_콘텐츠모델 (0) | 2020.03.19 |
HTML_폼요소 2 <SELECT,TEXTAREA,BUTTON> (0) | 2020.03.19 |
HTML_폼요소 <INPUT> (0) | 2020.03.19 |
HTML_테이블 요소(표) (0) | 2020.03.18 |
댓글