HTML - form 정리

form태그란?

form태그는 몇 가지 속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길것이지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정한다.

 

form태그 속성

method - 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.

속성값 - get 주소표시줄에 사용자가 입력한 내용이 그대로 드러남

post-입력한 내용이 드러나지 않고 길이의 제한없이 표준입력으로 넘겨줌 

 

name - 폼의 이름을 지정

action- form 태그 안의 내용들을 처리해 줄 서버 상의 프로그램 지정

target - action 태그에서 지정한 스크립트 파일을 현재창이 아닌 다른위치에 열도록 지정 

autocomplete="off" - 자동완성기능을 끔 

 

form태그 사이에 여러 폼태그들을 삽입하여 원하는 폼 형태를 만들 수 있다. 

 

폼에서는 사용자가 내용을 입력하는 필드를 삽입할때나 버튼을 삽입할때 input 태그를 사용한다. 

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

 

<lable>아이디<input type="text" ></label> 가능 하지만 

 

<label for="id">아이디</label>

<input type="text" id="id"/> 로 구분지어서도 가능 

되도록이면 분리하여 코딩을 하자 

 

<form action="login.php" method="POST">
      <ul>
        <li>
          <label for="id">아이디</label>
          <input type="text" id="id" />
        </li>
        <li>
          <label for="pw">비밀번호</label>
          <input type="password" id="pw"
        </li>
        <li>
          <input type="submit" title="로그인" value="로그인" />
        </li>
      </ul>
 </form>

 

라벨 태그안에 checkbox랑 radio 넣기 

 

왜넣을까?

라벨 태그안에 checkbox랑 radio넣으면 글자를 선택해도 체크가 되기떄문임 

<form>
      <h3>수강 분야(다수 선택 가능(</h3>
      <ul>
        <li><input type="checkbox" value="grm" />문법</li>
        <li><input type="checkbox" value="wr" />작문</li>
        <li><input type="checkbox" value="rd" />독해</li>
      </ul>
      <ul>
        <li>
          <label>
            <input type="radio" name="subject" value="eng" />영어회화
          </label>
        </li>
        <li>
          <label>
            <input type="radio" name="subject" value="ch" />중국어회화
          </label>
        </li>
        <li>
          <label>
            <input type="radio" name="subject" value="jp" />일번어회화
          </label>
        </li>
      </ul>
    </form>

위의 예제에서 checkbox는 자그만한 네모난거 눌러야 체크가 되는반면

밑에 있는 radio는 글자만 눌러도 체크가 됨 

그래서 checkbox나 radio를 input으로 줄떄 label이랑 같이 넣어두자~ 

 

 

하나의 폼에 여러구역을 나누어 표시하려고 할떄 fieldset, legend태그를 사용한다

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"></label>
              </li>
              <li>
                  <label for="pw">비밀번호</label>
                  <input type="password" id="pw"></label>
              </li>
          </ul>
      </fieldset>
    </form>

 

 

여기 내용들은 HTML5+CSS3 웹표준의 정석 - 고경희 지음 책을 고대로 가져온것 입니다.