폼 form & 레이블 label

폼 (form) 기본틀

<form action="http://주소" method="get 또는 post">

  <fieldset>

     <legend>폼그룹의 제목(회원가입)</legend>

  </fieldset>

</form>

 

   

 

---

 

# input - 문자 입력할수있는 박스나  체크버튼, 일반버튼등을 만들수있다.

 

 

· input type="text" - 일반검색창

· input type="password" - 비밀번호창, 입력값이 ●으로 보여진다.

   (검색창에 글씨가 들어가있게 하려면.. value 값으로 넣어두면 됨. 물론 브라우저에서 지우고 쓸수있음!!)

  

                                       

· input type="radio" - 예/아니오선택같이 하나에만 선택해야할때 사용. 원형버튼

· input type="checkbox" - 중복선택이 가능할때 사용. 사각버튼

   (체크해두는것을 기본으로 하려면 체크하려는 값에만 checked="checked")

  

 

· input type="file" - 파일첨부할때 빈 박스와, 찾아보기 버튼이 만들어짐.

  

  

· input type="submit" - 입력한 정보를 action 주소로 보내는 버튼. (버튼에 들어가는 글씨는 value값으로 넣어줌)

· input type="reset" - 입력한 정보를 취소해주는 버튼. 

· input type="button" - 일반 버튼. 확인취소 이외의 중복확인 우편번호 검색 등등... 

· input type="image" - 그림이미지가 버튼 기능함, submit 기능과 같음. (src alt값 넣어야함 )

  

 

 

---

 

# select option optgroup 목록상자 만들기

 

 

 

<fieldset>
 <legend>목록상자만들기</legend>
 <p><label for="local">주소</label>/p>
 <select id="local">
     <option value="">--선택--</option> <!--이런경우는 비워놔도 됨~ -->
     <optgroup label="서울특별시">
     <option value="ydp">영등포구</option>
     <option value="dj">동작구</option>
     <option value="ka">관악구</option>
     <option value="kr">구로구</option>
     </optgroup>
 </select>
 </fieldset>

 

---

 

# textarea 긴줄 글상자 만들기 - cols, rows값을 꼭!! 넣어줘야한다.

 정확한 크기는 css로, 여기서는 대강...자리만 만들면됨!

 

 

 

<fieldset>
 <legend>여러줄글상자</legend>
 <p><label for="tell">운영자에게 하고싶은말</label></p>
 <textarea cols="60" rows="3" name="tell" id="tell"></textarea>
</fieldset>

 

---

 

# 버튼요소 - input으로 다 되는 것들이라 잘 사용 안한다는 ;;

 <fieldset>

 <legend>버튼요소</legend>
 <button type="submit">수락</button>
 <button type="reset">다시시작</button>
 <button type="button">더보기</button>
 </fieldset>
</form>
</body>
</html>

 

 

---

 

# 레이블 label

 

input, select, textarea 등의 박스와 관련된 문자를 연결해주는 역할.

접근성때문에 꼭!! 넣어줘야한다.

 

· 암묵적레이블 - 문자와 박스 앞뒤로 그냥 묶음!

<label>이름<input type="text"></label>

 

· 명시적레이블 - 박스에 id 값을 지정해주고, 레이블 for값으로 id값을 넣어준다.

<label for="id값">이름</label><input type="text" name="uname" id="uname">

 

 문자를 입력하지 않고,,선택하는 input에 radio, chechbox와 select는 선택하려는 값에 value값을 꼭 넣어준다.

 

여러개중 하나만 선택해야 하는 버튼에는 name을 같게,

다중선택이 가능한 버튼은 name을 다르게,

id는 어떤경우에도 중복되면 안됨!!

 

 

**  연락처, 이메일같이 여러박스가 있는경우.

1. 첫번째 박스에만 레이블로 연결해주고, 나머지박스는 각각 title값을 준다.(←이방법을 주로 사용!)

2. 각 박스에 의미있는 단어를 만들어 연결해주고 나중에 숨긴다.

 

   <label for="cell1">연락처</label>
   <input type="text" name="cell1" id="cell1" title="연락처 앞자리" />-
   <input type="text" name="cell2" title="연락처 중간자리" />-
   <input type="text" name="cell3" title="연락처 뒷자리" />