HTML(2)

입력양식 (FORM)작성하기

:웹을 사용하면서 흔히 볼수 있는 로그인, 회원가입, 주문서등과 같은 양식을 만들 수 있음.

1. form 삽입하기

• <form [속성= "속성값"]>여러가지 요소</form>
  : 속성을 이용해서 입력받은 자료를 어떤 방식으로 서버에 넘기고 어떤 프로그램으로 처리 할것인지 등을 지정.

==> 속성
1) method : 입력된 정보를 서버쪽으로 어떻게 넘겨줄것인지 지정.
==> get 은 길이제한이 있고, 입력내용이 그대로 드러남, post 는 길이제한이 없고 입력내용이 드러나지 않음. (한꺼번에 묶어서 전송)
2) name : javaScript 에서 폼을 제어할때 사용할 폼의 이름을 지정.
3) action : 태그 안의 내용을 처리해줄 서버 프로그램 지정.
4) target : action에서 지정한 스크립트 파일을 다른위치에서 열도록 지정.
5) autocomplete : 자동완성 기능. 사용자가 입력한적 있는 값 중 한 두글자 비슷하면 자동으로 보여줌. defualt = on이며, off 로 바꿔서 해제 할 수 있음.

• <fieldset [속성= "속성값"]><legend>그룹이름</legend></fieldset>
  :<fieldset>은 <form>태그 안에서 여러 그룹을 나누어서 표시 할때 사용하고, <legend>는 나눈 그룹의 이름을 지정함.

ex) 주문서 안에서 개인정보와 배송정보

• <lable>레이블 명<태그></lable>
  : <lable for = "id 명"> 레이블명<input id= "id명"></lable>
  ==> 이렇게 써도 가능. 이때 id명은 같아야함.
  : 폼요소 하나하나에 이름을 붙여줄 때 사용.
  : 입력란 가까이에 붙여놓은 텍스트를 지정하며, <lable>태그를 써줌으로써 요소와 레이블 텍스트가 서로 연결되었음을 브라우저가 인식할 수 있음.

==>
ex

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

2) <lable for="user_id">아이디 (6자 이상)</lable><input type="text" id= "user_id">

실행결과

1) 아이디 (6자 이상)

2) 아이디 (6자 이상)

2. 사용자 입력 받기 <input>

:로그인 , 회원가입, 검색창 등 다양한 폼에서 사용자가 입력한 정보를 받는 용도

<입력 형태 지정하는 type 의 여러가지 속성>

: type 속성을 이용하여 매우 다양한 형태로 생성 가능.

1) text
: 폼에서 가장많이 사용하는 요소
: 주로 아이디나이름, 주소 등 한줄짜리 일반 텍스트를입력받을 때 사용.
: size 로 화면에 보여지는 글자수를 지정 ==> 글자수가 10개인데 size=5일때 5글자까지만 보여지고 나머지는 화면에 보여지지 않음.
: value로 초깃값을 지정할수 있음. 사용하지 않으면 빈칸이 보여짐. (defualt와 비슷)
: maxlength 로 입력할 수 있는 최대문자 수를 지정할 수 있음.

2) password
: text 와 똑같이 동작하지만 비밀번호는 입력내용이 화면에 보여지지 않아야하므로 '*' 나 '●'로 나타남.

3) search
: 검색을 위한 필드로 지정할 때 사용.
: 브라우저에서는 검색어가 입력이 되면 오른쪽에 x 표시가 되어 지울 수도 있음.

4) url
: 웹 주소를 입력 받을 때 사용.
: 입력값이 지정한 형식에 맞지 않으면 오류 메세지가 뜸.

5) email
: email주소를 입력 받을 때 사용.
: 입력값이 지정한 형식에 맞지 않으면 오류 메세지가 뜸.

6) tel
:전화번호 를 입력 받을 때 사용.
: 지역마다 전화번호의 형식이 달라서 입력값이 전화번호인지는 체크 할 수 없음.

7) radio
: 여러 항목 중 하나의 항목을 선택할 때 사용.
: 이미 선택한 항목있을 때 다른 항목을 선택하면 기존선택 항목은 취소됨.
: value로 선택된 항목을 서버에게 넘겨 줄 값을 지정하며, 숫자 또는 영문이어야 하며 필수적으로 적어줘야함.
: checked 기본 선택 항목 지정할 때 사용.
: name 을 똑같이 적으면 같은 버튼으로인식되어 위치가 달라도 모든 radio 버튼중 하나만 선택할 수 있음.

8) checkbox
: 여러항목중 2개 이상의 항목을 선택할 때 사용.

9) number
: 스핀박스로 숫자를 선택하게 할때 사용.
: min, max 로 입력할수 있는 최솟값(기본 =0)과 최댓값(기본=100)을 지정할 수 있음.
: step 로 숫자의 간격을 지정 할 수 있음.( 기본=1)
: value 로 초기값 지정.

10) range
: 슬라이스 막대를 움직여 조정하게 할 때 사용.

11) date, month, week

• date : 달력에서 날짜를 선택하게 할때 사용
  ==> 날짜가 선택되면 'YYYY-MM-DD' 형식으로 표시됨
• month : 달력에서 월 까지만 선택하게 할 때 사용.
  ==> 월을 선택하면 'YYYY-MM'형식으로 표시됨
• week : 달력에서 주를 선택하게 할 때 사용
  ==> 주를 선택하면 1월 첫째주를 기준으로 몇번째 주인지 'YYYY-n번째주' 형식으로 표시됨

12) time, datetime, datetime_local

• time : 시간을 지정하게 할 때 사용.
  ==> 오전/오후 , 시, 분 의 3항목으로 구분되어 표시
• datetime / datetime_local : 날짜와 시간을 함께 지정하게 할 때사용.
  ==> 사용자의 지역에 맞는 날짜와 시간이 함께 표시. (sysdate와 비슷)

!!!!선택 제한 속성
min 과 max 로 시작날짜와 마지막 날짜나 시간를 지정하여 선택 범위를 지정할 수 있음
( 지정 범위 외의 날짜는 비활성화 되어 선택할 수 없음)

13) submit, reset

• submit : 폼에 입력된 정보를 서버에 전송할 때 사용되며, form 태그의 action 에서 지정한 프로그램으로 넘겨짐
• reset : 입력된 사용자의 모든 정보를 재설정하게 할때 사용되며, 입력 내용이 초기화 됨.

==> value로 버튼에 표시할 명칭을 지정할 수 있음.
ex) 취소하기, 전송, 주문하기 , 완성 등.

14) image
: submit 과 같은 기능을 하는 이미지버튼을 나타낼 때 사용.
==> <input type="image" src="이미지 경로" alt="대체텍스트">

15) button
: submit 이나 reset과 같이 기능은 없고 버튼 형태만 나타낼 때 사용하며, 주로 클릭하면 자바스크립트가 실행됨.
==> value 로 버튼에 표시할 명칭을 지정 할 수 있음.

16) file
: 폼에 사진이나 문서를 첨부하게 할 때 사용되며, 브라우저 화면에 [파일선택] 이나 [찾아보기]등의 버튼이 표시됨.

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

ex)

<input type="hidden" value="사이트를 통한 직접 로그인"> 

: 로그인할 때 로그인을 한다는 정보는 사용자가 알필요는 없지만 관리자는 알아야 하기 때문에 hidden으로 설정.

< input 의 기능구현을 도와주는 속성들 >

1) autofocus
: <input type=텍스트-입력-필드 autofocus>
: 페이지가 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시해줌으로써 텍스트 필드에 바로 입력할 수 있게 해줌.

2) placehoder
: <input type="타입" id="입력필드" placehoder="힌트 내용">
: 사용자가 입력필드에 입력할 때 적당한 힌트내용을 표시하고, 필드를 클릭하면 사라짐.
: 어떤 내용을 입력해야하는지 알려주는 기능.

3) readonly
: <input type=텍스트-입력-필드 readonly>
: 사용자가 입력하지는 못하고 읽게만 하게 하는 읽기 전용필드 기능.

4) required
: 반드시 입력해야 하는 입력필드에 사용.
: 지정해놓은 입력필드에 입력값이 없으면 오류메세지가 뜸.

3. 여러줄 입력받기 <textarea>

: 텍스를 여러줄 입력 받을 때 사용하며, 회원가입양식에서 사용자 약관등을 표시할때 자주 사용함.
: cols 로 텍스트 영역의 너비를 지정할수 있음.
: rows 로 몇줄의 텍스트를 받을 지 지정 할 수 있음. 지정한 줄보다 많아지면 스크롤막대 생성.

ex)

<textarea cols =60 rows= 3 placeholder = "200자 내외로 적어주세요.">
</textarea>

실행결과

4. 드롭다운 목록 생성 <select>

: 사용자가 직접 입력하지 않고 여러 옵션 주에서 선택하게 할 때 사용.
: option 태그를 사용해서 원하는 항목을 추가할수 있고, value 속성으로 기본값을 설정 할 수 있음.
: selected 속성으로 기본선택 항목을 지정할 수 있음.
: size 로 옵션의 항목 수를 지정 할 수 있음.
: multiple 로 여러 항목 선택 가능.

<select> 
      <option value = "값1">내용1</option>  
      <option value = "값2">내용2</option>      
   	  <option value = "값2">내용3</option>
       ......
 </select>

실행결과

내용1 내용2 내용3

5. 데이터 목록 생성 <datalist>

: 사용자가 직접 입력하지 않고 미리 만들어 놓은 값에서 선택하게 할 때 사용.

<input type="text" list="데이터목록 id">
  <datalist id= "데이터목록 id">
     <option value= "서버로 넘길 값1">선택 옵션1</option>
     <option value= "서버로 넘길 값2">선택 옵션2</option>
      .......
  </datalist>

: value 로 설정한 값이 텍스트 필드에도 나타남.

실행결과

선택 옵션1 선택 옵션2

6. 버튼 생성 <button>

: input 태그의 button 속성과 달리 버튼의 모양을 삽입하는것이 아닌 버튼에 기능을 넣어주는 태그 .
: 버튼에 type 을 설정해서 버튼이 활성화 되었을 때 어떤 동작을 할지 submit, reset, button 중에 지정 할 수 있음.( 기본값 submit)

 <button type="submit">전송</button>
 <button type="reset">취소</button>
 <button type="button">내용</button>            // <input type="button"> 과 같음.

실행결과

전송
취소
내용