form , fieldset, label 태그의 사용방법

di-communications·2019년 3월 11일
0
post-thumbnail

폼을 만드는 가장 기본적인 태그는

사이에 여러 폼 요소와 관련된 태그를 넣습니다.

폼태그 속성 1. method : 폼을 전송할 방식을 선택하는 속성으로, 사용할 수 있는 값은 get과 post입니다. get은 256~4096바이트의 정보만 서버로 넘길 수 있지만, post는 사용자의 입력 내용의 길이에 제한을 받지 않습니다. 대개의 경우 post를 사용합니다get방식의 경우 query string을 url에 붙여 서버측으로 전송하기도 합니다. 2. name : 한 문서 안에 여러개의 폼이 있을 수 있기 때문에 폼을 식별하기 위한 폼의 이름입니다. 3. action: 폼을 전송할 서버 쪽의 스크립트 파일을 지정합니다. action 속성을 이용하지 않고 onsubmit 이벤트를 이용해 스크립트로 처리할 수도 있습니다. 4. target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다. , 태그는 폼 요소들을 보기 쉽게 그룹으로 묶어주는 태그입니다. 예를들어 쇼핑몰 사이트에서 주문서를 작성하는 폼에서 사용자 정보와 배송정보를 따로 나누어 표시하면 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔하게 정리할 수 있습니다.이렇게 하나의 폼 안에서 여러 구역을 나눠 표시하려고 할때 fieldset태그를 이용하면 과 태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려줍니다. 필드셋 태그 속성 1. disabled: 이 속성을 사용하면 태그의 자식 요소들을 사용할 수 없게 만듭니다. 즉 화면에는 표시되지만, 사용자가 내용을 입력하거나 항목을 선택할 수 없습니다. 2. form: 현재 태그가 속해 있는 form의 이름을 표시할 수 있습니다. 3. name: 이 속성을 이용해 서버로 넘겨줄 이름을 지정할 수 있습니다. 로그인 정보
  • 아이디:
  • 비밀번호:
가입자 정보
  • 이름:
  • 메일 주소:
  • 생년월일:
이렇게 필드셋으로 구분하여 사용하게됩니다 label 태그는 폼 요소에 캡션을 붙이기 위한 것으로, 폼 요소와 캡션으로 사용하는 텍스트가 짝을 이루고 있으므로 폼 요소의 위치가 바뀌더라도 캡션이 항상 따라다니게 됩니다.태그는 사용했을 때와 사용하지 않았을 때 결과 화면은 똑같은데 왜 꼭 사용해야 할까요?가장큰 이유는 시각 장애인들이 폼을 사용할 때 폼의 설명 부분, 즉 캡션 부분과 사용자가 입력하는 부분을 정확하게 연결할 수 있기 때문입니다.그리고 , 또 다른 이유는 라디오 버튼이나 체크 박스에서 텍스트 부분을 클릭해도 라디오 버튼이나 체크 박스가 선택된다는 편리함 때문이죠.시각 장애인들의 경우 웹사이트에서 링크를 이동할 때나 폼에서 사용자가 입력해야 할 항목을 이동할 때 tab을 눌러 이동합니다.tab으로 첫 번째 텍스트 상자에 마우스 커서가 옮겨졌을 때 그 부분이 '이름'을 입력하는 텍스트 상자임을 정확히 알려주어야 하겠죠?다시 두번째 텍스트 상자로 이동하면 그 부분은 "메일 주소"를 입력하는 부분이라고 알려줍니다.이렇게 사용자 정보를 입력하는 폼 요소 부분과 그 옆에 표시되는 텍스트 를 연결해 주는 태그가 태그입니다.사용방법 1.캡션

아이디(6자 이상)

아이디(6자 이상)위 소스코드에보시면 레이블이 없는경우와 있는 경우로 나뉘는데요 태그를 붙여도 결과화면은 바뀌지 않지만 브라우저에서 폼요소를 인식할 때 '아이디(6자 이상)'이라는 캡션과 텍스트 입력 창을 한 묶음이라고 인식하게 됩니다.사용방법

2.<label [속성="속성값"] for="이름" >캡션

label 태그에서 for 속성을 사용해 어떤 폼요소에 연결할지를 결정하게 됩니다.

예를 들어, <label [속성="속성값"]>캡션

<label [속성="속성값"] for="이름" >캡션
이렇게 두가지경우 같은 결과를 보여주게됩니다.폼요소 전체를 label태그로 묶지 않고 for 속성을 이용해 텍스트 캡션 부분에만 태그를 사용할 경우 css를 이용해 텍스트 캡션 영역의 너비나 색상 등 스타일을 일정하게 조절할 수 있습니다. css에 대한 자세한 설명은 둘째마당을 참고하세요.라디오 버튼과 체크박스에서 사용하는 태그폼에서 태그를 사용하는 이유 중 하나는 사용자가 라디오 버튼이나 체크 박스를 쉽게 선택하기 위해서입니다.여러 항목 중에서 선택하는 라디오 버튼이나 체크 박스 버튼의 경우에도 태그를 사용하지 않으면 버튼 부분을 클릭해야 선택되지만,태그를 사용하면 텍스트를 선택해도 해당 버튼 부분이 함께 선택됩니다.

 
profile
기획컨설팅, ui, it컨설팅, ux, 디자인

0개의 댓글