WEB/HTML5
HTML5 - form
jomericano
2022. 6. 2. 18:25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 폼 관련요소</title>
<style>
label {font-weight: bold}
</style>
</head>
<body>
<h1>폼 관련요소</h1>
<h2>개요</h2>
<p>html에서 사용자의 정보를 입력받아 서버로 전송하려면 form요소를 사용해야 함</p>
<p>form 태그를 사용해서 입력받은 데이터를 서버로 어떻게 보낼 것인지,
전송한 데이터는 서버에 누가 처리할 것인지handler, 전송한 데이터의 유형은 무엇인지 등을 지정 </p>
<p>전송방식 method:
get 방식은 url에 질의문자열 querystring 형태로 데이터를 추가해서 전송함, 따라서 입력 데이터 노출.
또한 전송할 수 있는 데이터 크기가 제한적임. 중요도가 낮은 정보 입력 폼 없이 임의로 전달시 주로 사용
/post 방식은 데이터를 http header에 별도로 작성해서 전송함. 따라서 데이터가 외부로 보이지 않으며
전송할 수 있는 데이터의 크기가 무제한임. 또한 텍스트와 바이너리를 같이 보낼 수 있어서 보안성과 활용성이 좋음</p>
<p> 전송데이터 유형 : 텍스트만 전송시 enctype은 생략가능,
텍스트와 바이너리 데이터를 전송시 multipart/form-data로 설정</p>
<p> 질의 문자열은 클라이언트가 서버로 정보를 요청할때 정보전달 양식에 의해 작성된 문자열을 의미.
질의문자열의 시작은 ?로, 전달하려는 데이터는 키와 값의 형태로 작성하며, 각각의 정보는 & 로 연결함.
영문자, 숫자, 일부 특수문자는 그대로 전송되지만 ,그외 나머진 %와 16진수코드로 인코딩된 문자로 변환되어 전송됨 </p>
https://www.google.com/search?q=%E3%84%B3%E3%84%B3 영문이 아닌경우 16진수코드로 변환됨. urlencoder.org
<img src = "img/urdi.png">
<img src = "img/urdi.jpg">
<h3>로그인</h3>
<form name="getform" method="get" action="procLogin.do?type=admin"
enctype="application/x-www-form-urlencoded">
<div>아이디:
<input type = "text" name="userid"></div>
<div>비밀번호:
<input type="password" name="passwd"></div>
<div>
<button type="submit">로그인</button> </div>
</form>
<h3>로그인2</h3>
<form name="postfrm" method="post" action="procLogin.do?type-admin">
<div>아이디:
<input type = "text" name="userid"></div>
<div>비밀번호:
<input type="password" name="passwd"></div>
<div>
<button type="submit">로그인</button> </div>
</form>
<h2>폼 요소</h2>
<p>html5에서는 다양한 input요소 태그를 사용해서 사용자로부터 데이터를 입력받을 수 있음 </p>
<p>text : 한줄 텍스트를 입력받음</p>
<p>password : 한줄 비밀 텍스트를 입력받음, 입력시 별표문자가 화면에 표시</p>
<p>radio:여러 선택사항 중 하나만 골라 입력받음</p>
<p>checkbox: 여러 선택사항 중 다수를 입력받음 </p>
<p>select: 여러 선택사항 중 하나만 입력받음, 단 선택할 수 있는 사항은 드롭다운 메뉴로 보여짐</p>
<p>textarea : 여러불 텍스트를 입력받음</p>
<p>button : 사용자가 클릭할 수 있는 버튼을 표시, type 속성으로 버튼의 종류를 지정.
button 일반적인 버튼을 표시, 보통 자바스크립트와 함께 사용
submit 입력한 데이터들을 서버로 전송시 사용
reset 입력한 데이터들을 모두 지우고 초기화할 때 사용 </p>
<p>file: 텍스트가 아닌 파일을 서버로 전송할때 사용,
단, enctype이 multipart/form-data로 설정되어야 함
또한, 서버측에서는 텍스트만 처리하는 방식이 아닌 다른 방식으로 처리해야함 </p>
<p>label :폼요소에 제목을 작성할때 사용</p>
<form name=joinfrm" method="get" action="procJoin.do"
enctype="multipart/form-data">
<div><label for="userid">아이디</label>
<input type="text" name = "userid>" id="userid" required></div>
<div><label for="passwd">비밀번호</label>
<input type="password" name = "passwd>" id="passwd"></div>
<div><label for="name">이름</label>
<input type="text" name = "name>" id="name"></div>
<div><label for="male">성별</label>
<input type="radio" name = "gender" id="male" value="male" checked> 남
<input type="radio" name = "gender" id="female" value="female"> 여
</div>
<div><label for="reading">취미</label>
<input type="checkbox" name ="hobby" id="reading" value="reading" > 독서
<input type="checkbox" name ="hobby" id="trip" value="trip" > 여행
<input type="checkbox" name ="hobby" id="sports" value="sports" > 운동
<input type="checkbox" name ="hobby" id="game" value="game" > 게임
<input type="checkbox" name ="hobby" id="nothing" value="nothing" > 낫띵
<input type="checkbox" name ="hobby" id="programing" value="programing" > 프로그래밍
</div>
<div><label for="sido">거주지 시/도</label>
<select name="sido" id="sido" >
<option value="" > -- 선택하세요 -- </option>
<option value="seoul" > 서울 </option>
<option value="incheon" > 인천 </option>
<option value="daejeon" > 대전 </option>
<option value="kyungki" > 경기 </option>
<option value="busan" > 부산 </option>
<option value="kangwon" > 강원 </option>
<option value="jeonla" > 전라 </option>
</select>
</div>
<div><label for="myintro">자기소개</label>
<textarea name="myintro" id="myintro"
rows="5" cols="50" style="resize:none" >입력하세요</textarea>
</div>
<div><label for="imageFileOpenInput">첨부파일</label>
<input type="file" name="file" id="imageFileOpenInput" accept="image/*">
</div>
<div>
<button type="submit">입력완료</button>
<button type="reset">입력취소</button>
</div>
</form>
<h2>html5 폼 요소</h2>
<form name="html5frm" method="get" action="test html5.do">
<div>오늘 날짜 :
<input type="date" name="today"></div>
<div>수강신청 기간 :
<input type="date" name="startdate" min="2022-05-01" max="2022-05-31">
<input type="date" name="enddate" min="2022-05-01" max="2022-05-31"></div>
<div>방문가능 시간 :
<input type="time" name="visittime" min="09:05" max="17:30"></div>
<div>나이 :
<input type="number" name="age" min="1" max="100"></div>
<div>이메일:
<input type="email" name="email">
</div>
<div>전화번호:
<input type="tel" name="tel"
pattern="[0][0-9][0-9]-[0-9]{3,4}-[0-9]{4}" >
</div>
<div> 좋아하는 프로그래밍 언어는? :
<input list="proglist" name="prog">
<datalist id="proglist">
<option>python</option>
<option>java</option>
<option>c#</option>
<option>basic</option></datalist>
</div>
<div>
<button type="submit">입력완료</button>
<button type="reset">입력취소</button>
</div>
</form>
<h2>공통 input 속성</h2>
<form name="addtfrm" action="addtfrm.do"
method="get">
<div>주민번호:
<input type = "text" name="jumin1"
readonly value="123456-1234567"></div>
<div>주민번호:
<input type = "text" name="jumin2"
disabled value="123456-1234567"></div>
<div><input type = "text" name="jumin3"
placeholder="주민번호"></div>
<div>아이디 : <input type = "text" name="id"
maxlength="18"></div>
<div>우편번호 : <input type = "text" name="zip1" size="3" maxlength="4">-
<input type = "text" name="zip2" size="3" maxlength="4">
</div>
<div>
<button type="submit">입력완료</button>
</div>
</form>
</body>
</html>
실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<style>
table {width: 950px;
margin:0 auto}
td {padding :10px; margin:0 auto}
td:first-child {width:20% }
td:last-child {}
</style>
</head>
<body>
<h1>회원가입</h1>
<form name ="joinfrm" method="post" action="join.do">
<table>
<tr><td><label for="name">이름</label></td>
<td><input type="text" name="name" id="name" size="7"></td></tr>
<tr><td><label for="jumin1">주민등록번호</label></td>
<td><input type="text" name="jumin1" id="jumin1" size="7" maxlength="6">
‐ <input type="text" name="jumin2" id="jumin2" size="8" maxlength="7"></td></tr>
<tr><td><label for="name">아이디</label></td>
<td><input type="text" name="userid" id="userid" size="16" maxlength="16">
6-16 자의 영문 소문자, 숫자와 특수기호(_)만 사용할 수 있습니다. </td></tr>
<tr><td><label for="passwd">비밀번호</label></td>
<td><input type="password" name="passwd" id="passwd" size="16" maxlength="16"></td></tr>
<tr><td><label for="repasswd">비밀번호 확인</label></td>
<td><input type="password" name="passwd" id="repasswd" size="16" maxlength="16">
이전 항목에서 입력했던 비밀번호를 한번 더 입력하세요</td></tr>
<tr><td><label for="zip1">우편번호</label></td>
<td><input type="text" name="zip1" id="zip1" size="3" maxlength="3"> -
<input type="text" name="zip2" id="zip2" size="3" maxlength="3">
<button type="button" class="btn btn-dark"><i class="bi bi-search"></i>우편번호 찾기</button>
</td></tr>
<tr><td><label for="addr1">주소</label></td>
<td><input type="text" name="addr1" id="addr1" size="35">
<input type="text" name="addr2" id="addr2" size="35">
</td></tr>
<tr><td><label for="email1">전자우편 주소</label></td>
<td><input type="text" name="email1" id="email1" size="20">@ <input type="text" name="email2" id="email2" size="18">
<select name =email3 id="email3" style="width:120px">
<option>선택하세요</option>
<option>naver.com</option>
<option>hanmail.com</option>
<option>gmail.com</option>
</select>
</td></tr>
<tr><td><label for="tell">개인연락처</label></td>
<td><select type="text" name="tell" id="tell" style="width:75px; padding: 3px">
<option>국번</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="02">02</option>
<option value="031">031</option>
<option value="051">051</option>
</select>
- <input type="text" name="tel1" id="tel1" size="4" maxlength="4">
- <input type="text" name="tel2" id="tel2" size="4" maxlength="4">
</td></tr>
<tr><td style="vertical-align: top; margin-top:10px"><label>자동 가입방지</label></td>
<td><img src="img/captcha.png">
<input type = "hidden" name="captcha_code">
</td></tr>
<tr><td colspan="2" style="text-align : center">
<button type="submit" class="btn btn-danger"><i class="bi bi-check2"></i>입력완료</button>
<button type="reset" class="btn btn-primary">입력취소</button>
</td></tr>
</table>
</form>
</body>
</html>