[HTML] 폼(form) 삽입하기

*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱 

 

CH5. 입력 양식 작성하기 

5-1. 폼 삽입하기 

1) 폼을 만드는 <form> 태그

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

- <form> 태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정한다. <form> 태그의 속성은 아래와 같다.

종류	설명
method	사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. method에서 사용할 수 있는 속성값은 get과 post이다.
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다.
action	<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.
autocomplete	자동 완성 기능. 기본 속성값은 "on"으로 중요한 개인 정보나 인증 번호 같은 일회성 정보를 입력 받을 때는 이 기능을 사용하지 않기 위해 "off"로 지정해주는 것이 좋다.

 

2) 폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

- 하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset> 태그를 사용한다. 

- <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있다.

<form>
  <fieldset>
    <legend> 그룹 이름 </legend> 
  </fieldset>
</form>

 3) 폼 요소에 레이블을 붙이는 <label> 태그

- <label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.

- 레이블이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말한다. <label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어있다는 것을 웹 브라우저가 알 수 있다.

 

3-1) <label> 태그를 이용하는 첫 번째 방법: 태그 안에 폼 요소를 넣는 것

<label>레이블명<input></label>

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

3-2) <lable> 태그를 이용하는 두 번째 방법: <label> 태그와 폼 요소를 따로 사용하고 <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것. 다시 말해 폼 요소의 id 속성값을 <label> 태그의 for 속성에게 알려 주는 방법을 사용하는 것.

<label for="id명">레이블명<input id="id명"></label>

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

 

5-2. 사용자 입력을 위한 input 태그  

 

1) <input> 태그의 type 속성

https://www.w3schools.com/html/html_form_input_types.asp 

 

 

5-3. <input> 태그의 주요 속성 

1) 자동으로 입력 커서를 갖다 놓는 autofocus 속성과 필수 입력 필드를 지정하는 required 속성 

<input type=텍스트-입력-필드 autofocus required>

2) 힌트를 표시해 주는 placeholder 속성

<label for="phone">연락처</label> 
<input type="tel" id="phone" placeholder="하이픈 빼고 입력해주세요.(01012345678)">

3) 읽기 전용 필드를 만들어 주는 readonly 속성 

<input type=텍스트-입력-필드 readonly>

 

5-4. 폼에서 사용하는 여러 가지 태그

1) 여러 줄을 입력하는 텍스트 영역 <textarea> 태그

<textarea>내용</textarea>

<label for="memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>

// cols: 텍스트 영역의 가로 너비를 문자 단위로 지정.
// rows: 텍스트 영역의 세로 길이를 줄 단위로 지정. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생김.

 

2) 드롭다운 목록을 만들어주는 <select>, <option> 태그

- 사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용한다. 

- <select> 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option> 태그를 사용해 원하는 항목을 추가한다. 

- <option> 태그에는 value 속성을 이용해서 서버로 넘겨주는 값을 지정한다.

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

 

3) 데이터 목록을 만들어 주는 <datalist>, <option> 태그 

- 데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다.

- 데이터 목록을 만들 때는 <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시한다. 

- 이 때 value 속성을 사용해서 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다. 

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

 

4) 버튼을 만들어 주는 <button> 태그

- <button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있다.

<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>