[HTML5] form요소만들기

[HTML5] HTML 폼 요소 만들기

HTML 폼 요소 만들기

폼 관련 태그들

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>

• input에서 title이란?
  • input 요소에 label을 제공하지 못할 때 대신 사용.
• autocomplete="on || off"
  • on :: 기본값으로, 브라우저는 사용자가 이전에 입력한 값을 기반으로하여 자동으로 값을 완성.
  • off :: 브라우저가 자동으로 값을 완성하지 않으므로, 사용자는 매번 각 입력 필드에 값을 끝까지 입력해야 함.
    참고 :: form태그의 autocomplete 속성

 

• 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> :: 폼 요소 그룹으로 묶기

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p> 
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

Fruit juice size

SmallMediumLarge

 

---

 

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

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

    유형	설명
    hidden	사용자에게 보이지 않고 서버로 넘기는 값.
    text	한 줄짜리 텍스트 상자
    search	검색상자
    tel	전화번호 필드
    url	URL 필드
    email	이메일 필드
    password	비밀번호 필드
    datetime	국제 표준시의 날짜와 시간(연,월,일,시,분,초,분할초)
    datetime-local	사용자가 있는 지역의 날짜와 시간
    date	사용자 지역의 날짜(연,월,일)
    month	사용자 지역의 날짜(연,월)
    week	사용자 지역의 날짜(연,주)
    time	사용자 지역의 시간(시,분,초,분할초)
    number	숫자를 조절할 수 있는 화살표
    range	숫자를 조절할 수 있는 슬라이드 막대
    color	색상 표
    checkbox	2개 이상 선택가능한 체크박스
    radio	1개만 선택가능한 라디오 버튼
    file	파일을 첨부하는 버튼
    submit	서버로 전송하는 버튼
    image	submit버튼 대신 사용할 이미지 삽입
    reset	리셋 버튼
    button	버튼

    **HTML5 태그와 속성은 모두 지원하지 않으므로, 브라우저를 확인해야 한다.
  • 브라우저/버전 별 지원 상황 : Can I Use
  • 01) type="hidden" :: 히든 필드. 사용자에게 보여줄 필요없는 데이터를 서버로 전송.
  • <input type="hidden" name="이름" value="서버로 넘길 값">
• 02) type="text" :: 텍스트 필드. 한 줄 짜리 텍스트 필드(이름, 주소 등)
  • 텍스트 필드에서 사용할 수 있는 속성.
    • name :: 텍스트 필드를 구분하기 위한 이름.
    • size :: 화면에 몇 글자가 보이도록 할 것인지 지정.
    • value :: 텍스트 필드 부분에 표시될 내용. value 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다.
    • maxlength :: 최대 문자 개수 지정.
    •  
• 03) 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>
• 3) type="search" , type="url", type="email", type="tel" :: 분화된 텍스트 필드.
  • type="search" :: HTML5에서 추가. 일부 브라우저에서는 검색창 오른쪽에 내용을 지울 수 있는 닫기(X)버튼이 표시된다.
  • type="url" :: 공백이 없고 영문자와 마침표, 슬래시로만 이루어저 있는 웹주소 필드. 반드시 http://로 시작하는 사이트 주소를 입력해야 한다.
  • type="email" :: HTML5부터는 브라우저가 메일 주소 형식 여부를 자동으로 체크해준다.
  • type="tel" :: 바로 전화를 걸 수 있도록 전화번호로 인식.
  •  
• 4) type="number" :: 숫자 입력.
  • 말 그대로 입력값을 숫자로 인식.
    • 브라우저에 따라 창 우측에 스핀박스(증감 화살표)가 표시되기도 한다.

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

  
  
  
• 개수: 개
• 5) type="range" :: 슬라이드바 숫자 지정.
  • min :: 최소값 (기본값은 0)
    • max :: 최대값 (기본값은 100)
    • step :: 짝수 / 홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격을 지정 (기본값은 1)
    • value :: 필드에 표시할 초기값.

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

  
  
  
• 개수:개
• 6) type="radio" , type="checkbox" :: 라디오버튼 / 체크박스
  • name :: 구분을 위한 식별자.
    • value :: 서버로 넘겨줄 때 넘길 값.
    • checked :: 선택된 상태로 표시.
• 7) type="color" :: 색상 선택상자 표시.
  • HTML5 부터 지원.
    • 파이어폭스/크롬/오페라/안드로이드 브라우저 지원. 그 외에는 텍스트 필드로 표시된다.

    <label><input type="color"></label><br />
    <label>기본 value를 정해놨을 때<input type="color" value="#eaeaea"></label>
  

  
  기본 value를 정해놨을 때
• 08) type="date", type="month", type="week" :: 날짜 표시.
  • type="date" :: 필드에 yyyy-mm-dd 형식으로 연/월/일 표시.
  • type="month" :: yyyy-mm
  • type="week" :: yyyy-w24
• 9) 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
• 10) 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>
  

  메일주소:
• 11) type="image" :: 이미지 버튼 넣기. submit 버튼 대신 이미지 버튼을 넣을 수 있다.
• <input type="image" src="경로" alt="대체 텍스트">
• 12) type="button" :: 버튼 넣기.
  • 자체 기능이 없기 때문에 스크립트 함수 등을 연결해서 사용한다.

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

• 13) type="file" :: 파일 첨부하기.
  첨부파일
• <label>첨부파일 <input type="file"></label>

---

 

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

1. autofocus :: 입력커서 표시하기.
   • 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서를 표시.

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

 

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

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

   학번
3. readonly :: 읽기 전용 필드 만들기.
   • 사용자가 수정 / 삭제 할 수 없는 읽기 전용 필드.
   • readonly라고만 써도 되고, readonly="readonly" 라고 써도 된다.
4. required :: 필수 필드 지정하기.
   • 서버로 submit 하기 전에 필수 필드에 내용이 모두 채워졌는지 검사할 때 사용하는 Boolean.
   • required 혹은 required="required" 라고 쓴다.

 

5. min, max, step :: 최솟값, 최대값, 숫자 간격.
6. size, minlength, maxlength :: 길이, 최소길이, 최대길이.
7. formaction :: type="submit", type="image"일 때 실행할 프로그램을 연결.
8. formenctype :: type="submit", type="image" 일 때 서버로 전송한 폼 데이터를 어떤 방식으로 해석할 것인지 지정.
9. formmethod :: 서버로 폼을 전송하는 방식(get, post 등)을 지정. <form>태그의 방식은 무시.
10. formnovalidate :: 서버로 전송할 때 폼 데이터가 유효한지 검사.
11. formtarget :: 폼 데이터를 서버로 전송한 후 서버의 응답을 표시할 타깃 지정.
12. width, height :: type="image" 의 이미지 너비와 높이 지정.
13. list :: <datalist>에 정의 해놓은 옵션값을 <input>에 나열해 보여줌.
14. multiple :: type="email" 이나 type="file" 일 때 두 개 이상의 값을 입력.

 

---

 

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

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

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

• <optgroup> :: 옵션끼리 묶기.

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

내용1 내용2 내용3 내용4 내용5 내용6

 

• <detalist> <option> :: 데이터 목록 값 입력.
  • 텍스트 필드에 값을 직접 입력하는 것이 아니라 데이터 목록 중에 값을 선택.
  • <input> 태그와 함께 사용하므로, input 의 list 속성과 데이터 목록의 id를 같게 설정.
  • 속성
    • value :: label을 선택했을 때 서버로 넘길 값.
    • label :: 사용자를 위해 브라우저에 표시할 레이블. 미설정 시 value 값을 레이블로 사용.

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

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

  <textarea name="name" col="60" rows="5">
  텍스트 내용
  입니다.
  
  텍스트 영역 필드
  입니다.
  </textarea>
  

  텍스트 내용 입니다. <br /> <br /> 텍스트 영역 필드 입니다.

 

---

 

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%

 

---