[HTML/CSS] form 관련 태그들

Form이란

• 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)
• 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들
• 이런 작업은 모두 데이터베이스를 기반으로 한다.
• 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그
• 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용
• 본 글에서는 서버 프로그래밍에 대해서는 다루지 않고 브라우저에 표시될 폼을 만드는 태그들에 대해 살펴본다.
  

<form> 태그

폼을 만드는 기본 태그. <form>과 </form> 사이에 여러 폼 요소 삽입

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

<form> 태그에서 사용하는 속성들

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

1. 검색어를 입력하고 [검색] 버튼을 클릭
2. 입력한 내용이 웹 서버에 있는 search.php 파일로 전송
3. 서버에서 search.php 파일 실행 후 그 결과가 다시 웹 브라우저로 전달되어 화면에 표시됨
   

<label> 태그

• 폼 요소에 레이블(텍스트)을 붙이는 태그
• 라디오 버튼이나 체크 박스에서 텍스트 부분을 클릭해도 라디오 버튼과 체크 박스 버튼이 선택된다.

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

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

<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>

<input> 태그

• 사용자가 입력하는 부분은 거의 <input> 태그를 이용해 처리
• 입력하는 내용의 종류는 <input> 태그의 type 속성을 통해 지정
• type 속성 값에 따라 함께 사용할 수 있는 속성들도 달라진다

  <input type="유형" [속성="속성 값"]>
  

  <input> 태그의 id 속성

  • 여러 번 사용된 폼 요소를 구분하기 위해 사용
  • <label> 태그를 이용해 캡션을 붙일 수 있다.
  • CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있다.

    <input type="text" id="user-name" size="10">
    <input type="text" id="addr" size="60">
    

<input> 태그 유형의 종류

예시1

<form>
  <fieldset>
    <legend>로그인 정보</legend>
    <ul>
      <li>
        <label for="user-id">아이디 </label>
        <input type="text" id="user-id">
      </li>
      <li>
        <label for="pwd1">비밀번호 </label>
        <input type="password" id="pwd1">
      </li>
      <li>
        <label for="pwd2">비밀번호 확인 </label>
        <input type="password" id="pwd2">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>개인 정보</legend>
    <ul>
      <li>
        <label for="user-name">이름 </label>
        <input type="text" id="user-name">
      </li>
      <li>
        <label for="mail">메일 주소</label>
        <input type="email" id="mail">
      </li>
      <li>
        <label for="phone">연락처</label>
        <input type="tel" id="phone">
      </li>
      <li>
        <label for="homep">블로그/홈페이지</label>
        <input type="url" id="homep">
      </li>
    </ul>
  </fieldset>
  <input type="submit" value="가입하기">
</form>

예시2

<form>
  <fieldset>
    <legend>신청 과목</legend>
    <p>이 달에 신청할 과목을 선택하세요 (1과목만 가능)</p>
    <label><input type="radio" name="subject" value="speaking">회화</label>
    <label><input type="radio" name="subject" value="grammar">문법</label>
    <label><input type="radio" name="subject" value="writing">작문</label>       
  </fieldset>
  <fieldset>
    <legend>메일링</legend>
    <p>메일로 받고 싶은 뉴스 주제를 선택해 주세요 (복수 선택 가능)</p>
    <label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
    <label><input type="checkbox" name="mailing2" value="dialog">5분 회화    </label>
    <label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>
  </fieldset>
</form>

<input> 태그의 다양한 속성

autofocus

• 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시

placeholder

• 입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐

  <label class="reg" for="uname">이름</label>
  <input type="text" id="uname" autofocus>
  <label class="reg" for="uid">학번</label>
  <input type="text" id="uid" placeholder="하이픈없이 입력”>
  

readonly

• 내용을 보기만 하고 입력하지 못하게 함.
• 속성 값 없이 readonly 라고만 쓰면 됨.(readonly=“readonly”, readonly=“true”로 표시하기도 함)

  <label class="reg" for="subj">영어회화(초급)</label>
  <input type="text" id="subj" value="오전 9:00~11:00" readonly>
  

required

• 필수 필드 체크
• 속성 값 없이 required 라고만 입력(required=“required”라고 해도 됨)
• 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다르게 나타남

  <label class="reg" for="uname">이름</label>
  <input type="text" id="uname" autofocus required>
  

  min, max, step

• min, max : 해당 필드의 최솟값,최댓값
• step : 허용된 범위 내의 숫자 간격
• type이 date, datetime, datetime-local, month, week, time, range, number 일 경우에만 사용

  <label class="reg" for="group">단체주문</label>
  <input type="number" id="group" value="10" min="10" max="100" step="10">
  

  size, minlength, maxlength

• size : 텍스트 관련 필드에서 화면에 몇 글자까지 보이게 할지 결정
• maxlength : 입력 가능한 최대 글자
• minlegth : 입력해야 할 최소 글자. (크롬과 안드로이드 브라우저에서만 지원

  <label class="reg" for="uid">학번</label>
  <input type="text" id="uid" placeholder="하이픈없이 입력" maxlength="8" required