input2-22.04.04

HTML 2022. 4. 4. 15:28

728x90

!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>
  input type="radio"  여러 값 중 하나만 선택 가능
  input type="checkbox"  하나 또는 여러개 선택 가능
  input type="hidden"  클라이언트에게 보이지 않지만 서버로 전송되는 숨겨진 값
</pre>

  <form action="test2.jsp"> <!-- method default : get -->
    이름 : <input name="name"> <br>
  <!-- name="gender"로 이름을 같게해야 같은 이름안에서 데이터처리가 가능하기떄문에 복수 선택 안됨 -->  
    성별 : 남<input type="radio" name="gender" value="남"> 
              여<input type="radio" name="gender" value="여"> <br>
  <input type="hidden" value="비밀데이터" name="hd">
  <!-- hidden : 사용자에게는 보이지 않지만 전달받은 개발자는 볼 수 있도록 -->
    좋아하는 음식 : 
  <input type="checkbox" name="food" value="떡볶이">떡볶이
  <input type="checkbox" name="food" value="피자">피자
  <input type="checkbox" name="food" value="파스타">파스타
  <input type="checkbox" name="food" value="곱창">곱창
  <input type="checkbox" name="food" value="빙수">빙수
  <input type="checkbox" name="food" value="냉면">냉면 <br>
  파일 : <input type="file" name="file"> <br>
  <input type="submit" value="전송">
  
  </form>
</body>
</html>

test2.jsp

JSP: Java Server Page
클라이언트의 요청 데이터를 받아서 처리하고 결과 값을 출력할 수 있는 페이지
post로 요청 받았을 경우 한글처리가 필요(request.setChara...)
서버 내에서 실행되고 결과만 클라이언트로 전송되는 형태

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
   String nm = request.getParameter("name"); 
   String gd = request.getParameter("gender"); 
   String hd = request.getParameter("hd"); 
   String fl = request.getParameter("file"); 
//    String fd = request.getParameter("food"); 
// getParameter: 단일 데이터 받기, getParameterValues: 다중 데이터 받기
   String[] fd = request.getParameterValues("food");

// 주소값을 출력, fd 담긴 내용을 풀어서 어떠한 공간에 담아서 출력해줘야 한다.
   String foods = "";
   for(int i=0; i<fd.length; i++){
      foods += fd[i] + " ";
   }

%>
<%="이름은" + nm %> <br>
성별은 <%=gd %> <br>
사용자 몰래 넘어온 정보는 <%=hd %> <br>
선택한 파일 : <%=fl %> <br>
좋아하는 음식 [<%=foods %>]

</body>
</html>

input3.html와 test3.jsp만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <form action="test3.jsp" method="post">
    <textarea name="ta" rows="5" cols="20"></textarea> <br><!--몇줄 몇칸 -->
    <select name="cars">
      <option value="부가티">부가티</option>
      <option value="마세라티">마세라티</option>
      <option value="페라리">페라리</option>
      <option value="제네시스">제네시스</option>
      <option value="벤츠">벤츠</option>
    </select> <br><br>
    <button>전송Btn</button>
  </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <form action="test3.jsp" method="post">
    <textarea name="ta" rows="5" cols="20"></textarea> <br><!--몇줄 몇칸 -->
    <select name="cars" multiple>
      <option value="부가티">부가티</option>
      <option value="마세라티">마세라티</option>
      <option value="페라리">페라리</option>
      <option value="제네시스">제네시스</option>
      <option value="벤츠">벤츠</option>
    </select> <br><br>
    <button>전송Btn</button>
  </form>
</body>
</html>

<줄넘김 처리>

가\r\n

\r\n이것들이 숨어있음

test3.jsp파일에서 수정하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	request.setCharacterEncoding("utf-8");
	String ta= request.getParameter("ta");
	//줄넘김 처리
	ta=ta.replace("\r","").replace("\n","<br>");
	String[] cars= request.getParameterValues("cars");
	
	String car="";
	for(int i=0; i<cars.length; i++){
		car+=cars[i]+" ";
	}
%>
<%="textarea에 입력한 내용 ["+ ta +"]" %> <br>
선택한 자동차: <%=car %>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
label{
  display: inline-block;   /* 인라인 상태를 마치 블록의 상태처럼 해주면 사이즈 조정이 가능해진다. */
  width: 100px;
}
#b {     /* 아이디는 #으로 접근 */
 display: inline-block; 
}
</style>
<script>
window.onload=function(){
	var btn=document.getElementsByTagName('button')[0];
	btn.addEventListener('click',function){
		var frm=document.getElementsByTagName('form')[0];
		frm.submit();
	});
	
};
</script>
</head>
<body>
  <form action="test4.jsp" method="post">
  <fieldset>
    <legend>인적사항</legend>
    <label for="a">이름</label> 
    <input id="a" name='nm' required> <br> <!--required필수로 적어줘야 하는것   -->
       
    <label for="b">성별</label> 
    <div id="b">
         여<input type="radio" value="여" name="gd">
         남<input type="radio" value="남" name="gd"> 
    </div> <br>

    <label for="c">이메일</label>     
    <input type="text" id="c" name="em" pattern="" > <br>  
    
    <label for="d">전화</label>
    <input type="text" id="d" name="t" placeholder="010-1111-1111" required pattern="[0-9]{3}-[0-9]{3,4}-[0-9]{4}"> <br>   
        
   <label for="e">생일</label>  <!-- label쓴 이유는 올록볼록 크기 맞추려고 -->    
    <input type="date" id="e" name="bir">   
    
    <input type="color">   
      
  </fieldset>
  <br>
 <input type="submit">
  <!--<button type="button">버튼</button>    type="button"이라고 해주면 그냥 버튼(기능x)이고 type을 빼주면 전송해주려는 버튼 -->
 </form>
</body>
</html>

label 태그란 input태그의 의미를 정의하기 위한 태그입니다. label을 쓰지 않았을 때와

차이점은 type이 text인 경우에 입력창이 활성화되고(Ex.이름을 누르면 입력창에 커서가 반짝거림)

checkbox이거나 radio인 경우에는 체크된다.

728x90

'HTML' 카테고리의 다른 글

css2-22.04.05 (0)	2022.04.05
css-22.04.04 (0)	2022.04.04
audio,video,form양식,input,한글깨짐-22.04.04 (0)	2022.04.04
span, div-22.04.04 (0)	2022.04.04
HTML-22.03.25 (0)	2022.03.25

ABOUT ME

하루복습 하루복습

'HTML' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'HTML' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바