04 폼 관련 태그들

04-1 폼 만들기

• 아이디 비밀번호, 로그인 버튼, 회원가입 창 등 웹사이트로 정보를 보낼 수 있는 모든 요소를 폼이라고 한다.

폼의 동작 방식 :

정보 입력 -> 로그인 버튼 클릭 -> 서버로 내용 전송 -> 서버 내의 데이터베이스와 비교 -> 브라우저에 결과 표시

<form> : 폼 만들기 폼 태그의 속성에서 사용자가 입력한 자료를 서버로 어떤 방식으로 넘길 지, 어떤 프로그램을 이용해 처리할 것인지 지정할 수 있다.

• method : 사용자가 입력한 내용을 서버로 어떻게 넘겨줄 것인지 지정.
  • get - 주소 표시줄에 입력값이 그대로 드러남.
  • post - 표준 입력(standard input)으로 데이터를 전송. 입력 길이에 제한이 없으며, 입력한 내용이 드러나지 않음.
• name : 한 문서 안에 여러 개의 form이 있을 경우를 위해 이름 지정.
• action : form 태그 안의 내용을 처리해 줄 서버 프로그램 지정.
• target : action 태그에서 지정한 스크립트 파일을 다른 창에서 열기.

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

<label> : 폼 요소에 레이블 붙이기

• 레이블? 창 옆에 ‘아이디’ ‘비밀번호’처럼 텍스트를 붙여놓은 것
• label 태그를 통해 폼+텍스트가 연결되어 있다는 것을 브라우저가 알 수 있다.

  <!-- <label> 태그 안에 폼 요소를 넣는 방법 -->
  <label>아이디(6자 이상)<input type="text" ... ></label>
  
  <!-- <label>과 폼 요소를 따로 사용하고, id 속성으로 연결하는 방법 -->
  <label for="user-id">아이디(6자 이상)</label>
  <input type="text" id="user-id">
  

• 라디오버튼/체크박스에 텍스트를 연결해두면 터치하기 편리하다

  <ul>
    <li>
      <label><input type="radio" name="subject" value="select1">선택지1</label>
    </li>
    <li>
      <label><input type="radio" name="subject" value="select2">선택지2</label>
    </li>
    <li>
      <label><input type="radio" name="subject" value="select3">선택지3</label>
    </li>
  </ul>
  

  • 선택지1
  • 선택지2
  • 선택지3

<fieldset> <legend> : 폼 요소 그룹으로 묶기

• fieldset로 폼들을 묶고, legend로 그룹 제목을 붙인다.

04-2 사용자 입력을 위한 <input> 태그

<input> : 입력 항목 만들기

• id 속성 : 똑같은 폼 요소를 여러 번 사용할 때, 요소를 구분하기 위해 id 사용.
• type 속성 : input 태그로 넣을 수 있는 유형

**HTML5 태그와 속성은 모두 지원하지 않으므로, 브라우저를 확인해야 한다.

브라우저/버전 별 지원 상황 : Can I Use

type="hidden" : 히든 필드 사용자에게 보여줄 필요 없는 데이터를 서버로 전송.

<input type="hidden" name="이름" value="서버로 넘길 값">

type="text" : 텍스트 필드 한 줄 짜리 텍스트필드. (이름, 주소 등)
텍스트 필드에서 사용할 수 있는 속성은 다음과 같다.

• name - 텍스트 필드를 구분하기 위한 이름
• size - 화면에 몇 글자가 보이도록 할 것인지 지정.
• value - 텍스트 필드 부분에 표시될 내용. value 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다.
• maxlength - 최대 문자 개수 지정

type="password" : 비밀번호 입력란 입력한 내용이 화면에 특수문자로 표시됨.

<form>
  <fieldset>
    <label>아이디:<input type="text" id="user_id" size="10"></label>
    <label>비밀번호:<input type="password" id="pw" size="10"></label>
  </fieldset>
</form>

type="search" type="url" type="email" type="tel" : 분화된 텍스트 필드

• type=”search” - HTML5에서 추가됨. 일부 브라우저에서는 검색창 오른쪽에 내용을 지울 수 있는 X버튼이 표시된다.
• type=”url” - 공백이 업고 영문자와 마침표, 슬래시로만 이루어져 있는 웹 주소 필드. 반드시 http://로 시작하는 사이트 주소를 입력해야 한다.
• type=”email” - HTML5부터는 브라우저가 메일 주소 형식 여부를 자동으로 체크해준다.
• type=”tel” - 바로 전화를 걸 수 있도록 전화번호로 인식한다.

type="number" : 숫자 입력

• 말 그대로 입력값을 숫자로 인식.
• 브라우저에 따라 창 우측에 스핀 박스(증감 화살표)가 표시되기도 한다.

<b>개수:</b> <input type="number" min="1" max="10" value="1"> 개

주문 개수: 개

type="range" : 슬라이드바 숫자 지정

<b>개수:</b> <input type="range" min="1" max="10" value="1"> 개

개수: 개

• min - 최소값 (기본값은 0)
• max - 최대값 (기본값은 100)
• step - 짝수/홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격을 지정 (기본값은 1)
• value - 필드에 표시할 초기값

type="radio" type=checkbox : 라디오버튼/체크박스

• name - 구분을 위한 식별자
• value - 서버로 넘겨줄 때 넘길 값
• checked - 선택된 상태로 표시

type="color" : 색상 선택 상자 표시

• HTML5부터 지원
• 파이어폭스/크롬/오페라/안드로이드 브라우저 지원. 그 외에는 텍스트 필드로 표시된다.

<label>이렇게 생겼다. <input type="color"> </label><br>
<label>기본value를 정해놨을 때 <input type="color" value="#0000ff">
</label>

이렇게 생겼다.
기본value를 정해놨을 때

type="date" type=month type="week" : 날짜 표시

• type=”date” - 필드에 "yyyy-mm-dd" 형식으로 연/월/일 표시.
• type=”month” - "yyyy-mm"
• type=”week” - "yyyy-W24"

<input type="date|month|week" name="날짜 표시하기" value="속성">

type="time" type="datetime" type=datetime-local : 시간 지정

• type=”time” - 시간
• type=”datetime” - UTC기준 날짜와 시간. UTC 기준일 경우 시간 뒤에 Z를 붙이면 되고, 그 외에는 +dd:dd나 -dd:dd로 직접 몇 시간 몇 분이 차이 나는지 입력해주어야 한다.

• type=”datetime-local” - 사용자시간 기준 날짜와 시간

• 날짜/시간에서 공통으로 사용되는 속성
  • min - 날짜나 시간의 최솟값
  • max - 날짜나 시간의 최대값
  • step - 스핀 박스 화살표를 누를 때 얼마나 조절할 지 지정
  • value - 화면에 표시할 초기값 지정. time일 경우 00:00~23:59, datetime이나 datetime-local일 경우 날짜 다음에 T를 쓰고 24시간제로 시간을 지정한다. ex) 2018-07-18T14:00

type="submit" type="reset" : 서버 전송, 리셋 버튼 넣기

• submit - 폼에 입력한 정보를 서버로 전송
• reset - input 요소에 입력된 모든 내용을 삭제하고 요소 재설정
• form action에서 지정한 프로그램에서 처리됨

<form action="register.php" method="post">
  <label>메일 주소: <input type="email"></label>
  <input type="submit" value="제출">
  <input type="reset" value="다시 입력">
</form>

메일 주소:

type="image" : 이미지 버튼 넣기 Submit 버튼 대신에 이미지 버튼을 넣을 수 있다.

<input type="image" src="경로" alt="대체 텍스트" [속성=""]>

type="button" : 버튼 넣기

• 자체 기능이 없기 때문에 스크립트 함수 등을 연결해서 사용한다.

<input type="button" value="클릭" onclick="함수 지정">

type="file" : 파일 첨부하기

<label> 첨부파일 <input type="file"> </label>

첨부파일

04-3 <input> 태그의 다양한 속성

autofocus : 입력 커서 표시하기

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

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

placeholder : 힌트 표시하기

• 텍스트 필드를 입력할 때 힌트를 표시하고, 클릭하면 내용이 사라진다.

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

readonly : 읽기 전용 필드 만들기

• 사용자가 수정/삭제할 수 없는 읽기 전용 필드
• readonly 라고만 써도 되고, readonly="readonly" 라고 써도 된다.

required : 필수 필드 지정하기

• 서버로 submit 하기 전에 필수 필드에 내용이 모두 채워졌는지 검사할 때 사용하는 Boolean.
• required 혹은 required="required" 라고 쓴다.

min max step : 최솟값, 최댓값, 숫자 간격

size minlength maxlength : 길이, 최소길이, 최대길이

formaction : type=”submit”, type=”image”일 때 실행할 프로그램을 연결

formenctype : type=”submit”, type=”image”일 때 서버로 전송한 폼 데이터를 어떤 방식으로 해석할 것인지 지정

formmethod : 서버로 폼을 전송하는 방식(get, post 등)을 지정. <form> 태그의 방식은 무시

formnovalidate : 서버로 전송할 때 폼 데이터가 유효한지 검사

formtarget : 폼 데이터를 서버로 전송한 후 서버의 응답을 표시할 타깃 지정

width height : type=”image”의 이미지 너비와 높이 지정

list : <datalist>에 정의해놓은 옵션값을 <input>에 나열해 보여줌

multiple : type=”email” 이나 type=”file”일 때 두 개 이상의 값을 입력

04-4 여러 데이터 나열해 보여 주기

<select> <optgroup> <option> : 드롭다운 목록 만들기

• 사용자가 여러 옵션 중 선택할 수 있는 목록.
• <select> 속성
  • size - 화면에 표시될 드롭다운 항목 개수 지정
  • multiple - ctrl키를 누른 상태로 여러 항목을 선택할 수 있다.
• <option> 속성
  • value - 옵션 선택 시 서버로 넘길 값 지정
  • selected - 화면에 표시될 때 기본으로 선택되어 있는 옵션
• <optgroup> - 옵션끼리 묶기.

<label class="selection" for="example">선택지</label>

<select size="1" id="example">
  <optgroup label="그룹 1">
    <option value="one"> 내용1 </option>  
    <option value="two"> 내용2 </option>
    <option value="three"> 내용3 </option>
    <option value="four" selected> 내용4 </option>
  </optgroup>
  <optgroup label="그룹 2">
    <option value="five"> 내용5 </option>  
    <option value="six"> 내용6 </option>
  </optgroup>
</select>

선택지

</select> </span>

<datalist> <option> : 데이터 목록 값 입력

• 텍스트 필드에 값을 직접 입력하는 것이 아니라, 데이터 목록 중에 값을 선택.

• <input> 태그와 함께 사용하므로, input의 list 속성과 데이터 목록의 id를 같게 설정.

• 속성
  • value - 레이블을 선택했을 때 서버로 넘길 값
  • label - 사용자를 위해 브라우저에 표시할 레이블. 미설정 시 value 값을 레이블로 사용

<input type="text" id="interest" list="choices">
<datalist id="choices">
  <option value="grammar" label="문법"></option>
  <option value="voca" label="어휘"></option>
  <option value="speaking" label="회화"></option>
</datalist>

<textarea> : 여러 줄 텍스트 영역

• 한 줄 이상의 문장을 입력할 때 사용하는 폼
• 속성
  • name - 텍스트 영역의 이름
  • cols - 텍스트 영역 가로 너비를 문자 단위로 지정
  • rows - 텍스트 영역 세로 길이를 줄 단위로 지정. 지정 숫자보다 줄 개수가 많아지면 스크롤 막대가 생성

<textarea name="name" cols="60" rows="5">
텍스트 내용
입니다.

텍스트 영역 필드
입니다.
</textarea>

04-5 기타 다양한 폼 요소들

<button> : 버튼 넣기

• type 속성 (미지정 시 submit)
  • submit - 폼을 서버로 전송
  • reset - 폼에 입력한 내용 초기화
  • button - 기능 없음
• input 태그를 사용할 때와 button 태그를 사용할 때의 모습은 다음과 같다.

<input type="button" value="전송하기">
<button type="submit">전송하기</button>

전송하기

• button 태그를 사용하면 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가하거나 CSS를 사용할 수 있다.

<output> : 계산 결과

• 이 태그에 입력한 값은 계산 결과라는 것을 브라우저에게 정확히 인식시켜준다.

<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
  <input type="number" name="num1" value="0" placeholder="숫자를 입력하세요">
  +<input type="number" name="num2" value="0" placeholder="숫자를 입력하세요">
  =<output name="result" for="num"></output>
</form>

<progress> : 진행 상태 보여주기

• value - 작업 진행 상태. 0부터 max값 사이의 부동 소수점으로 표현되며, max값이 지정되지 않으면 1보다 작아야 한다.
• max - 작업이 완료되었을 때의 값. 0보다 큰 부동 소수점으로 표현.

<label>진행률</label>
<progress value="70" max="100"></progress>

진행률

<meter> : 값이 차지하는 크기 표시

• progress가 진행 상태였다면, meter는 값이 차지하는 크기를 나타냄

속성

• min, max - 최솟값과 최댓값. 미지정시 0~1
• value - 범위 내에서 차지하는 값
• low, high - 낮은/높은 값의 기준치 설정
• optimum - 최적 값의 범위 지정. optimum이 high보다 크면 value가 클 수록 좋고, low보다 작으면 value가 작을 수록 좋다.

<ul>
  <li>
    <label>점유율 0.66 </label>
    <meter value="0.66"></meter>
  </li>
  <li>
    <label>배터리 15%</label>
    <meter min="0" max="100" low="20" high="70"
    optimum="100" value="15"></meter>
  </li>
  <li>
    <label>배터리 30%</label>
    <meter min="0" max="100" low="20" high="70"
    optimum="100" value="30"></meter>
  </li>
  <li>
    <label>배터리 85%</label>
    <meter min="0" max="100" low="20" high="70"
    optimum="100" value="85"></meter>
  </li>
</ul>

• 점유율 0.66
• 배터리 15%
• 배터리 30%
• 배터리 85%

References

• Do it! HTML5+CSS3