코딩일기

다양한 폼에서 사용자가 입력한 정보를 받을 때 주로 사용된다.

<input> 태그는 매우 다양한 형태의 type 속성이 있다.

<input type="type속성">

• text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스
• password : 비밀번호를 입력할 수 있는 필드
• search : 검색할 때 입력하는 필드
• url : URL 주소를 입력할 수 있는 필드
• email : 이메일 주소를 입력할 수 있는 필드
• tel : 전화번호를 입력할 수 있는 필드
• checkbox : 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스
• radio : 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼
• number : 숫자를 조절할 수 있는 스핀 박스
• range : 숫자를 조절할 수 있는 슬라이드 막대
• date : 사용자 지역을 기준으로 한 날짜(연, 월, 일)
• month : 사용자 지역을 기준으로 한 날짜(연, 월)
• week : 사용자 지역을 기준으로 한 날짜(연, 주)
• time : 사용자 지역을 기준으로 한 시간(시, 분, 초, 분할 초)
• datetime-local : 사용자 지역을 기준으로 한 날짜와 시간(연, 월, 일, 시, 분, 초, 분할초)
• reset : 리셋 버튼
• submit : 전송 버튼
• image : submit 버튼 대신 사용할 이미지
• button : 일반 버튼
• file : 파일을 첨부할 수 있는 버튼
• hidden : 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드

• type="text" : 폼에서 가장 많이 사용하는 요소로, 주로 아이디나 이름, 주소 등 한 줄짜리 일반 텍스트를 입력할 때 사용한다.
• type="password" : 입력하는 내용을 화면에 보여주지 않게 하기 위해 '*' 혹은 '●' 로 표시된다. 이 점을 제외하면 텍스트 필드와 똑같이 동작하고 같은 속성을 사용한다.
  
  
  

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

  
  

  

  
  
  • text, password 필드에서 사용하는 주요 속성
    
    1. size : 텍스트와 비밀번호 필드의 길이. 즉, 화면에 몇 글자까지 보이도록 할것인지 지정한다.
    2. value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용
    (비밀번호 필드에서는 사용하지 않는다)
    3. maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수
    
    
    
    
• type="search" : 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다. 모바일 기기의 웹 브라우저에서는 이 필드에 검색어를 입력하면 오른쪽에 x마크가 표시되어 입력한 검색어를 손쉽게 지울 수 있다.
• type="url" : 웹 주소를 입력하는 필드
• type="email" : 이메일 주소를 입력하는 필드
• type="tel" : 전화번호를 나타내는 필드 
  모바일 페이지에서 이 값을 이용하면 바로 전화를 걸 수 있다.
  
  위 네가지 필드들은 텍스트 필드를 기본으로 세분화된 필드이며, 텍스트 필드와 거의 같은 속성을 사용한다.
  텍스트 필드에서 세분화된 필드는 PC용 웹 브라우저에서는 큰 변화가 없는것 처럼 보이지만, 모바일 기기의 웹 브라우저에서 확인하면 변화를 알 수 있다.
  
  

      <fieldset>
        <legend>배송 정보</legend>
        <ul id="shipping">
          <li>
            <label for="user-name">이름 </label>
            <input type="text" id="user-name">
          </li>
          <li>
            <label for="addr">배송 주소</label>
            <input type="text" id="addr">
          </li>
          <li>
            <label for="mail">이메일</label>
            <input type="email" id="mail">
          </li>        
          <li>
            <label for="phone">연락처</label>
            <input type="tel" id="phone">
          </li>
        </ul>  
      </fieldset>

  
  

  

  
  
  
  
• type="checkbox" : 여러 항목 중 2개 이상을 선택
• type="radio" : 여러 항목중 1개만 선택 (이미 선택한 항목이 있을 경우 다른 항목을 선택하면 기존 항목은 취소된다)
  
  

      <fieldset>
        <legend>상품 선택</legend>
        <p><b>주문할 상품을 선택해 주세요.</b></p>
        <ul>
          <li>
            <label><input type="checkbox" value="s_3">선물용 3kg</label>
          </li>
          <li>
            <label><input type="checkbox" value="s_5">선물용 5kg</label>
          </li>
          <li>
            <label><input type="checkbox" value="f_3">가정용 3kg</label>
          </li>
          <li>
            <label><input type="checkbox" value="f_5">가정용 5kg</label>
          </li>
        </ul>   
        <p><b>포장 선택</b></p>
        <ul>
          <li><label><input type="radio" name="gift" value="yes" >선물 포장</label></li>
          <li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
        </ul>     
      </fieldset>​

  

  
  
  
  
  • checkbox, radio에서 사용할 수 있는 속성
    
    value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정한다. 이 값은 영문이거나 숫자여야 하며 필수 속성이다.
    checked : 체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다. 속성값이 따로 없다.
    name : PHP와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용된다. 모든 라디오 버튼의 name값을 똑같이 지정하는 것으로 라디오 버튼에서 하나의 버튼만 선택할 수 있게 할 수 있다.
    
    
    
    
• type="number" : 숫자를 조절할 수 있는 스핀 박스 (▲,▼를 클릭할 때마다 숫자를 높이거나 낮추는 기능)
• type="range" : 숫자를 조절할 수 있는 슬라이드 막대
  
  

        <ul>
          <li>
            <label><input type="checkbox" value="s_3">선물용 3kg</label>
            <input type="number" min="0" max="5">개 (최대 5개)
          </li>
          <li>
            <label><input type="checkbox" value="s_5">선물용 5kg</label>
            <input type="number" min="0" max="3" value="1">개 (최대 3개)
          </li>
        </ul>
        <ul>
          <li>
            <label><input type="checkbox" value="f_3">가정용 3kg</label>
            <input type="range" min="0" max="5">개 (최대 5개)
          </li>
          <li>
            <label><input type="checkbox" value="f_5">가정용 5kg</label>
            <input type="range" min="0" max="3" value="1">개 (최대 3개)
          </li>
        </ul>​

  

  
  
  • number, range에서 사용할 수 있는 속성
    
    min : 최솟값 지정 (기본값 0)
    max : 최댓값 지정 (기본값 100)
    step : 숫자 간격을 지정 (기본값 1)
    value : 필드에 표시할 초깃값
    
    
    
    

• type="date" : yyyy-mm-dd 형식으로 연, 월, 일 날짜 표시
• type="month" : yyyy-mm 형식으로 연, 월 날짜 표시
• type="week" : 1월 첫째 주를 기준으로 몇 번째 주인지 표시
• type="time" : 시간 (오전or오후, 시, 분) 표시
• type="datetime-local" : 날짜와 시간을 표시
  
  

  <input type="date">​

  

  
  

  <input type="month">​

  

  
  

  <input type="week">​

  

  
  

  <input type="time">​

  
  

  

  
  

  <input type="datetime-local">​

  

  • 날짜나 시간과 관련된 유형의 범위를 제한하는 속성
    
    min : 범위의 시작 날짜나 시간을 제한
    max : 범위의 마지막 날짜나 시간을 제한
    step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기 지정
    value : 기본적으로 표시할 날짜나 시간을 지정
    
    

    <input type="date" min="2021-02-01" max="2021-02-15">​

    

    
    
    
    
• type="submit" : 폼에 입력한 정보를 서버로 전송하는 버튼
  전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨진다.
• type="reset" : 폼에 입력한 내용이 모두 삭제되고 처음상태로 되돌아가는 버튼
  
  value 속성을 사용해서 버튼에 표시할 내용을 지정한다.
  
  

          <input type="submit" value="주문하기">
          <input type="reset" value="취소하기">​

  

  
  
  
• type="image" : submit 버튼과 같은 기능을 하는 이미지 버튼
  
  <input type="image" src="이미지 경로" alt="대체 텍스트">
  
  

  <input type="image" src="images/login.png" alt="로그인">

  

  
  
  
• type="button" : 특별한 기능이 없는 버튼
  주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용한다.
  
  
• type="file" : 웹 브라우저 화면에 '파일선택' 이나 '찾아보기' 버튼 등이 표시되는데, 이 버튼을 클릭하고 파일을 선택하면 파일이 첨부된다.
  
  

  <input type="file">​

  
  

  

  
  
  
• type="hidden" : 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소로, 사용자에게 굳이 보여 줄 필요는 없지만 관리자가 알아야 하는 정보를 입력한다.
  
  <input type="hidden" name="이름" value="서버로 넘길 값">
  
  

        <input type="hidden" name="url"  value="사이트를 통한 직접 로그인">
        <label>아이디: <input type="text" id="user_id" size="10"></label>
        <label>비밀번호: <input type="password" id="user_pw" size="10"></label>

  
  

  

  
  

폼(form)이란 '특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것'으로

사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있다.

대표적으로 로그인 창, 검색 창이 있다.

폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동한다.
그렇기 때문에 폼에 입력한 사용자 정보는 ASP나 PHP, JSP 등의 서버 프로그래밍을 이용해 처리한다.

다음은 로그인 폼을 예로 든 폼이 동작하는 방식이다.

1. 웹 브라우저에서 사용자가 아이디와 비밀번호를 입력하고 [로그인] 버튼을 클릭하면 입력한 정보는 웹 서버로 전송된다.

2. 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인하고 그 결과를 웹 브라우저에 보낸다.

• <form> : 폼을 만드는 가장 기본적인 태그
  몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정한다.
  
  <form [속성="속성값"]>여러가지 폼 요소</form>
  
  
  • autocomplete : 자동 완성 기능
    사용자가 입력한 내용을 기억했다가 비슷한 글자가 입력되면 이전에 입력했던 내용을 아래에 표시해준다.
    기본 속성값은 'on' 으로, 개인정보나 인증번호와 같은 일회성 정보를 입력해야 할 때는 'off' 로 지정하여 사용하지 않는다.
    
    <form action="" autocomplete="off"> ... </form>
    
    

• <fieldset>, <legend> : 폼 요소 묶기
  하나의 폼 안에서 여러구역을 나누어 표시할 때 <fieldset> 태그를 사용한다.
  <legend> 태그를 통해 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있다.
  
  <fieldset [속성="속성값"]>
    <legend>그룹 이름<legend>
  </fieldset>
  
  

    <form action="">
      <fieldset>
        <legend>상품 선택</legend>
      </fieldset>
      <fieldset>
        <legend>배송 정보</legend>
      </fieldset>      
    </form>

  

  
  
  
• <label> : 레이블 붙이기
  <label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있다.
  <label> 태그는 2가지 방법으로 사용할수 있다.
  
  1. <label> 태그 안에 <input> 태그 넣기
  
     <label>레이블명<input></label>
  
  
  2. <label> 태그와 폼 요소를 다로 쓰고 연결하기
  첫 번째 방법보다 복잡해 보이지만 <label> 태그를 사용한 레이블과 사용자 정보를 입력받는 <input> 태그가 떨어져 있어도 둘 사이를 쉽게 연결활 수 있다는 장점이 있다.
  
     <label for="id명">레이블명<input id="id명"><label>
  
  
  

  <label>아이디(6자 이상)<input type="text"></label>

  
  

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

  
  

• <a> : 링크 삽입
  텍스트를 사용하면 텍스트 링크가 되고, 이미지를 사용하면 이미지 링크가 된다.
  href 속성을 이용해 연결할 파일이나 링크할 주소를 지정한다.
  
  <a href="링크할 주소">텍스트 또는 이미지</a>
  
  링크가 추가된 텍스트나 이미지에 마우스 포인터를 가져가면 손 모양으로 바뀌기 때문에 링크가 없는 텍스트나 이미지와 구별할 수 있다.
  

  

  
  
  • target : 링크 새 창에서 열기
    target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열린다.
    

    <a href="../05/order.html" target="_blank">주문서 작성하기</a>​

    

텍스트 링크 만들기

<a>와 </a> 태그 사이에 링크로 만들 텍스트를 입력하고, href 속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣는다.

텍스트에 링크를 추가하면 아래 그림과 같이 텍스트에 밑줄이 생기면서 글자색이 파란색으로 변경된다. 그리고 한 번이라도 클릭한 텍스트 링크는 자주색으로 바뀌게 된다.

      <a href="../05/order.html">주문서 작성하기</a>

이미지 링크 만들기

텍스트 링크를 만드는 것과 같이 <a>와 </a> 태그 사이에 이미지 링크를 추가하고, href 속성에 이미지를 클릭하면 연결할 문서의 경로와 파일명을 넣는다.

    <a href="../05/order.html"><img src="images/tangerines.jpg" alt="레드향"></a>

웹 브라우저에서 지원하는 멀티미디어 파일의 종류

웹 브라우저 별 오디오, 비디오 파일 지원 여부

괄호 안의 내용은 해당 멀티미디어 파일을 지원하는 웹 브라우저의 버전을 뜻한다.

ex)인터넷 익스플로러는 9버전 이상에서 mp3, mp4 형식을 지원하지만 webm 형식은 지원하지 않는다.

※ HTML4 까지는 웹 브라우저에 멀티미디어 파일을 삽입한 후에 재생하려면 플러그인 프로그램이 따로 필요했는데, HTML5 에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있다. 즉 웹 브라우저에서 바로 멀티미디어 파일을 재생할 수 있다.

그렇기 때문에 브라우저마다 지원하는 플레이어가 다르다.

• <object> : 멀티미디어 삽입
  PDF, 자바 애플릿, 플래시 무비 등 다양한 멀티미디어 파일을 삽입할 때 사용된다.
  <object> 태그로도 이미지나 오디오, 비디오를 포함시킬 수 있지만 주로 <img>, <audio>, <video>태그로 사용된다.
  
  <object width="너비" height="높이" data="파일"> </object>
  

  <object width="900" height="800" data="product.pdf"></object>​​

  
  

  

• <embed> : 멀티미디어 삽입
  HTML 초기버전부터 사용해서 대부분의 브라우저에서 사용할 수 있다.
  따라서 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 할 때에 사용된다.
  닫는 태그가 필요없이 단독으로 사용된다.
  
  <embed src="파일 경로" width="너비" height="높이">
  

  <embed src="medias/spring.mp3">​

  

• <audio> : 오디오 파일 삽입
• <video> : 비디오 파일 삽입
  재생하거나 멈출 수 있도록 해주는 컨트롤 바를 나타내는 controls 속성을 함께 사용한다.
  
  ※ 대부분의 웹 브라우저에서는 오디오나 소리가 있는 비디오 파일의 자동 재생을 금지하고 있다.
  
  <audio src="오디오 파일 경로" controls></audio>
  <video src="비디오 파일 경로" controls></video>​
  

      <audio src="medias/spring.mp3" controls></audio>
      <video src="medias/salad.mp4" controls width="700"></video>

  
  

  

• <audio>, <video> 태그의 속성 :
  • controls : 플레이어 화면에 컨트롤 바를 표시한다.
  • autoplay : 오디오나 비디오를 자동으로 실행한다.
  • loop : 오디오나 비디오를 반복 재생한다.
  • muted : 오디오나 비디오의 소리를 제거한다.
  • preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다.
    사용할 수 있는 값은 auto, metadata, none이며 기본값은 preload="auto" 이다.
  • width, height : 비디오 플레이어의 너비와 높이를 지정한다.
    둘 중 하나의 값만 지정할 경우 나머지는 자동으로 계산해서 표시된다.
  • poster="파일이름" : <video> 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다.