HTML Eclipse form, label, fieldset & legend 태그

 

 

form 태그

 

:   폼을 만드는 기본 태그

<form>과 </form>  사이에 여러 폼 요소 삽입

 

 

form태그의 속성

method : 사용자가 입력한 내용을 서버쪽으로 어떻게 넘겨줄지 지정
get : 주소 표시줄에 사용자가 입력한 내용이 넘어간다 ; 256byte ~ 4096byte까지 넘길 수 있다
post : 대부분 이 방식
사용자가 입력한내용을 header를 통해 넘겨준다
입력길이 제한을 받지않는다
입력내용이 눈에 보이지 않는다
name : 폼의 이름 
action : 태그 안의 내용을 처리해줄 서버상의 대상을 지정한다.
target : 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정.

 

<form action="search.html" method="POST">
검색어 입력 <input type="text" title="검색" name="name"> 
<input type="submit" value="검색">
</form>

 

 

 

label 태그

 

: 폼 요소에 레이블(텍스트)을 붙이는 태그

 

라디오 버튼이나 체크 박스에서 텍스트 부분을 클릭해도 라디오 버튼과 체크 박스 버튼이 선택된다

 

 

기본형
<label 속성>레이블<input ……></label>
<label for=”id이름”>레이블</label>
<input id=”id이름”>

<h1>label</h1>

<label>아이디(6자 이상)<input type=”text”></label>
<br>
<label for=”user-id”>아이디(6자 이상1)</label>
<input type=”text” id=”user-id”>
<br>

 

 

 

fieldset & legend

 

fieldset

: 폼 요소를 그룹으로 묶는 태그

 

 

기본형

<fieldset 속성> ... </fieldset>

 

 

legend

: 그룹으로 묶는 구역에 제목을 붙이는 태그

 

 

 

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

 

 

<fieldset>
<legend>로그인 정보</legend>
<ul>
<li><label for="id">아이디</label> 
<input type="text" id="id">
</li>
<li><label for="pwd">비밀번호</label> 
<input type="text" id="pwd">
</li>
</ul>
</fieldset>
</form>