HTML5 / form 태그 / label태그 / fieldset 태그와 legend 태그

<Today's Goals>

• 폼 만들기
• form 태그
• label 태그
• fieldset 태그와 legend 태그

 

<What i learned>

• form에서 autocomplete 속성을 이용해 자동 완성 기능을 동작하게 할 수 있다. < form autocomplete="on/off" >
• radio button,check box를 input type="radio/checkbox" 로 만들 수 있고, 이를 label을 연결하면 텍스트를 클릭해도 선택이 되어 사용성 측면에서 편리하다.
• list 만들 때 style="list-style:none로 리스트 앞에 bullet이 나타나지 않게 할 수 있다.
• form에서 input type="password"로 할 경우 입력하는 텍스트가 ...으로 보인다.

<Questions>

Q: 한 문서에서 폼이 여러개인 경우 각각 다른 스타일을 적용하고자 할 때 편리하게 할 수 있는 방법은? head에서 style로 작성할 경우 전체 폼들이 일괄적으로 변경되는데 개별적으로 할 때, fieldset,ul,li,label의 style을 묶어서 한번에 바꾸는 방법은?

A:  class를 이용해 따로 지정할 수 있다.

 

Q: radio button은 한번 선택하면 on에서 off로 변경이 안되고 checkbox만 on과off과 자유로운데 이것도 설정을 할 수 있는가?

A:

 기본 값은 아무것도 선택되지 않은 상태이고 type속성으로 checked를 설정하면 하나를 지정해서 미리 표시해둘 수는 있지만,

이미 선택한 걸 지울 수는 없다. check box만 가능하다.

+추가 :  Javascript를 이용해서 on/off 설정이 가능하다.

$("input:radio[name='라디오버튼']:radio[value='라디오버튼']").prop('checked', true); 선택
$("input:radio[name='라디오버튼 ']:radio[value='라디오버튼']").prop('checked', false); 선택해제

그리고 이걸 Jquery로 할 경우
$("#라디오버튼 id").prop("checked",true); 선택
$("#라디오버튼 id").prop("checked",false); 선택해제

아직 javascript나Jquery를 학습하지 않아서 정확하게 작동하는 방식의 이해도가 떨어지는 것 같다.
radio button와 달리 checkbox는 복수 선택이 가능하기 때문에 on/off가 자유롭게 가능하다는 점을 깨달았다.
radio button은 단일 항목 선택이기 때문에 on이 기본값으로 지정된다.

Q: 로그인 버튼 위치를 변경하는 방법은?
A: 

<div align="right"> 
<input type="button" value="Login" /> 
</div>
align으로 정렬한다. 

+추가 : float 또는 display를 이용하는게 가장 편하고 부득이한 경우 position을 사용할 수 도 있다.

---

폼 생성

form 태그

< form [속성="속성 값"] > 여러 폼 요소 < / form >

< form action=".php" method="post" >
< input type="text" title="검색" >
< input type="submit" value="검색">
< / form >

속성설명

method	사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정. 속성 값으로는 'get'과'post'가 있다. 'get'은 256byte~4096byte까지의 데이터만 서버로 넘길 수 있어 보통 'post'방식을 사용한다. 사용자의 입력을 표준 입력으로 넘겨 입력 내용의 길이에 제한을 받지 않는다.
name	폼의 이름을 지정. 한 문서 안에 여러개의 form태그가 있을 경우 구분하기 위해서 이다.
action	form태그 안의 내용을 처리할 서버 상의 프로그램을 지정.
target	action태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정.

 

autocomplete 속성 - 자동 완성 기능 (기본값 on)
< form autocomplete="on/off" >off로 지정해서 끌 수 있다.

 

label 태그

label 레이블은 입력 창 옆에 붙여 놓은 텍스트

 

label 태그 안에 form 요소를 집어 넣는 방식

< label [속성="속성값"] > 레이블 < input... >< / label>

 

label 요소와 form 요소를 따로 사용하고 label의 for속성과 form의 id속성으로 연결

< label for="id이름" >
< input id="id이름" [속성="속성 값"] >
< / label >

• 아이디
• 비밀번호

 

label과 라디오 버튼 및 체크박스 연결하기

label과 연결 시키면 텍스트를 눌렀을 때도 선택이 되어 사용성이 향상됨.

연결 안했을 때 : < input type="checkbox" value="1"> 일번
연결 했을 때 : < label >< input type="radio" name="subject" value="1"> 일번 < / label >

label 연결 안했을 때

• 일번
• 이번
• 삼번

label 연결 했을 때

• 한국어
• 영어
• 일본어
•  

fieldset, legend 태그

하나의 폼에서 여러 구역을 나누어 표시할 때 사용.
< fieldset > 태그 : < fieldset > 과 < / fieldset > 태그 사이의 폼들을 하나의 영역으로 묶어 외곽선 표시.
< legend >태그 : < fieldset >으로 묶은 그룹에 제목을 붙임.

 

< form >
< fieldset >
< legend > 개인 정보 < / legend >
< label for="name" > 이름 < / label >
< input type="text" id="name" >
< label for="mail" > 메일 주소 < / label >
< input type="text" id="mail" >
< / fieldset >
< / form >

 

개인 정보

• 이름
• 메일 주소

로그인 정보

• 아이디
• 비밀번호