Ch7 입력폼

웹 폼
; 웹 페이지를 통해 사용자 입력을 받는 폼을 웹폼(Webform) 또는 폼(form)이라고 한다.

- 종류
type="text" : 한줄의 텍스트 입력창
password : 암호입력을 위한 한줄 텍스트 입력창
button : 단순버튼
submit : 웹 서버로 폼 데이터를 전송시키는 버튼
reset : 입력된 폼 데이터를 초기화시키는 버튼
image : 이미지버튼
checkbox : 체크박스
radio : 라디오버튼
month|week|date|time|datetime : 년,월,일,시간 입력하는 창
number|range : 스핀버튼과 슬라이드바로 구성된 숫자 입력창
color : 색상 입력하기 쉽게 선택할 수 있는 컬러 다이얼로그창
email|url|tel|search : 형식검사기능을 가짐 (이메일, url, 전화번호, 검색키워드 등)
file : 로컬 컴퓨터의 파일을 선택하는 폼
textarea : 여러줄 입력창

- 형식
<form name="" action="" method="">
<input type="" name="" value="초기값">
</form>

---

form속성
. 형식 : <form></form>  
- action : 데이터를 처리할 프로그램의 url
- method : 데이터를 서버에 전달하는 방식 (get/post)
      . get: 기본값, 데이터를 질의 문자열(query string)형태로 서버에게 전달함
         데이터양이 제한되고, 보안에 취약함
      . post: 데이터를 메시지 바디에 포함시켜서 서버에 전달함
              데이터의 양이 제한이 없고, 데이터 노출이 되지 않음  
- name : 폼 이름

---

textarea
. rows = 수치 : 텍스트영역의 높이 (행의 수)
. cols = 수치 : 텍스트영역의 너비 (가로로 보여지는 글자 수)
. name = 이름 : 이름
. wrap ="값" : 자동줄바꿈을 지정

off: 줄바꿈 안됨
virtual : 자동 줄바꿈 수행 (전송 시 한줄로 취급)
physical : 자동 줄바꿈 수행 (전송 시 여러줄 취급)
placeholder : 초기값 설정

---

검색창 만들기

<form name="search_fo" action="https://search.naver.com/search.naver/" method="get">
검색단어: <input type="text" name="query"><br>
전&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;송: <input type="submit" value="검색">
</form>

---

회원정보 폼 만들기

<form action="">
아 이 디 : <input type="text" name="id" value="ps" size="12"><br>
암&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;호: <input type="password" name="pwd" value="1234" size="12"><br>
휴대전화: <input type="text" name="phone1" size="3" maxlength="3">
 - <input type="text" name="phone1" size="4" maxlength="4">
 - <input type="text" name="phone1" size="4" maxlength="8">
 </form>

 

---

체크박스, 라디오 버튼

<form name="form_info" method="post" >

당신의 취미를 모두 고르시오<br><br>
<input type="checkbox" name="hobby" value="게임" checked>게임 기본 체크
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="먹기">먹기
<input type="checkbox" name="hobby" value="자기">자기
<input type="checkbox" name="hobby" value="놀기">놀기   같은 종류끼리 name을 같게 함 

<hr><br>
성&nbsp;별&nbsp;&nbsp;
<input type="radio" name="gender" value="남자" checked>남자
<input type="radio" name="gender" value="여자">여자


<!-- 1,2,3,4학년 radio 버튼 구현, 현재 3학년 -->
<hr><br>
학&nbsp;&nbsp;년
<input type="radio" name="grade" value="1학년">1학년
<input type="radio" name="grade" value="2학년">2학년
<input type="radio" name="grade" value="3학년" checked>3학년
<input type="radio" name="grade" value="4학년">4학년
<hr><br>
<input type="submit" value="전송"><br>
<input type="reset" value="취소">

</form>

---

데이터 목록창

국가명: <input type="text" list="countries">
<datalist id="countries">
 <option value="대한민국">
 <option value="스위스">
 <option value="브라질">
 <option value="미국">
</datalist>
<br>
가보고싶은 여행지 : <input type="text" list="countries">
<datalist id="countries">
 <option value="스페인">
 <option value="아이슬란드">
 <option value="남아프리카공화국">
 <option value="미국">
</datalist>

---

rows/cols 지정

<form>
텍스트영역(rows/cols 미지정)<br>
<textarea name="ta1" wrap="virtual" placeholder="초기값"></textarea>
<br><br>
텍스트영역<br>
<textarea name="ta2" rows="7" cols="40" wrap="virtual" placeholder="초기값"></textarea>
<br><br><br>
<input type="submit" value="전송">
</form>

---

과목 선택 폼

<form>
과목
<select name="subject" size="1">
 <option value="html" selected>HTML</option>
 <option value="db">데이터베이스</option>
 <option value="ds">자료구조</option>
 <option value="net">네트워크</option>
 <option value="ai" disabled>인공지능</option> 선택못하도록 흐릿하게
</select>
<br>
<input type="submit" value="전송">
</form>

---

fieldset 요소

<form>

<fieldset>
 <legend>로그인</legend>
 <p>아&nbsp;&nbsp;이&nbsp;&nbsp;디&nbsp;<input type="text" size="21" maxlength="8"></p>
 <p>비밀번호&nbsp;<input type="password" size="12" maxlength="8"</p><br>

 <input type="submit" value="저장">

</fieldset>

</form>

---

table을 이용한 회원가입 폼

<form action="" method="get">

<fieldset>
<legend>회원가입</legend>

<table>
<caption><h3>회원가입 서식을 작성해주세요</h3></caption>
<colgroup>
<colwidth="30%">
<colwidth="70%">
</colgroup>

<tbody>
 <tr>
 <th scope="row"><label for="name">이름</label></th>
 <td><input type="text" id="name"></td>
</tr>
<tr>
 <th scope="row"><label for="id">아이디</label></th>
 <td><input type="text" id="id"></td>
</tr>
<tr>
 <th scope="row"><label for="pw">비밀번호</label></th>
 <td><input type="password" id="pw"></td>
</tr>
<tr>
 <th scope="row"><label for="r_pw">비번확인</label></th>
 <td><input type="password" id="r_pw"></td>
</tr>
<tr>
 <th scope="row"><label for="id_num">주민번호</label></th>
 <td><input type="text" id="id_num">-<input type="text" id="id_num"</td>
</tr>
<tr>
 <th scope="row"><label for="email">이메일</label></th>
 <td><input type="email" id="email">@<input type="text" id="email"></td>
</tr>
<tr>
 <th scope="row"><label for="pn">연락처</label></th>
 <td><input type="text" id="pn"></td>
</tr>
</tbody>

 

</table>
</fieldset>
</form>

---

라디오 버튼을 이용한 메뉴 선택폼 (이미지 선택)

<form>

<label>
 <input type="radio" name="china" value="1">
 짜장면<img src="jja.png">
</label>
<label>
 <input type="radio" name="china" value="2" checked>
 짬뽕<img src="jjam.png">
</label>
<input type="radio" name="china" value="3">
탕수육<img src="tang.png">                          label을 설정하지 않으면 이미지를 클릭해도 선택안됨

</form>

---

색상 선택

<form>
색 선택 <input type="color" value="#00BFFF" onchange="document.body.style.color=this.value">
&nbsp;&nbsp;&nbsp;
색선택 <input type="color" value="#ff00ff" onchange="document.body.style.color=this.value">
&nbsp;&nbsp;&nbsp;
색 선택 <input type="color" value="ffff00" onchange="document.body.style.color=this.value"><br>
<br>

<input type="submit" value="전송">

</form>

---

table을 활용한 날짜, 시간 폼

<h2>생일 축하합니다</h2>
<hr>
당신의 생일은 2022년 3월 13일이고, 틀리면 수정하여 파티 시간과 장소를 입력해주세요!
<hr>
<form>
<table>
<tr>
 <td>생일</td>
 <td><input type="date" value="2022-03-13"></td>
</tr>
<tr>
 <td>생일파티  시간</td>
 <td><input type="time"></td>
</tr>
<tr>
 <td>생일파티 장소</td>
 <td><input type="text"></td>
</tr>
</table>

<input type="submit" value="전송">
</form>

 

---

회원정보 입력

<form>
e-mail&nbsp;&nbsp; <input type="email" placeholder="id@host.com" autofocus><br> 자동으로 커서가 위치
홈페이지&nbsp;&nbsp;<input type="text" placeholder="http://" required><br> 필수 입력 항목
전화번호&nbsp;&nbsp;<input type="tel" placeholder=010-1111-2222><br>
주문수량&nbsp;&nbsp;<input type="number" min="50" max="100" step="10" ><br> 최소값과 최댓값, 간격

상품검색어&nbsp;&nbsp;<input type="search" placeholder="예)머그컵" required><br> 설명값
<input type="button" value="검색"><br>
<button type="button">검색</button><br> 버튼은 type을 button으로 설정하고 사용해야 함

<input type="submit" value="확인">&nbsp;&nbsp;<input type="reset" value="취소">
</form>

---