본문 바로가기
개발 수업/WEB

[CSS] 폼(form)

by 오늘 하루s 2023. 6. 22.
728x90
더보기

Day38. 230622

폼(form)

아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 창 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들.

 

쿼리스트링?

쿼리스트링은 사용자가 입력 데이터를 전달하는 방법 중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.

사용자가 입력 데이터를 전달하는 방법중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.

 

폼 만들기

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

 

form태그의 속성

속성 설명
method 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.
get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다.
post - 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고  사용자가 입력한 내용이 드러나지 않는다.
name 폼의 이름을 지정한다. 한 문서 안에 여러 개의
태그가 있을 경우, 폼들을 구분하기 위해 사용한다.
action
태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.
taget 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.

 

id 속성 사용하기

폼을 만들다 보면 똑같은 폼 요소가 여러번 사용된다. 여러 번 사용된 폼 요소를 구분하기위해 사용하는 것이 id속성이다.

 

<input>태그

 

  • type="text"
<input type="text" [속성="속성 값"]>

- 텍스트 필드에서 사용할 수 있는 속성

속성 설명
name 텍스트 필드를 구별할 수 있도록 이름을 붙인다.
size 텍스트 필드의 길이를 지정한다.
value 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용이다.
maxlengh 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정한다.

 

  • type="password"
<input type="password" [속성="속성 값"]>

 사용자가 입력하는 내용이 화면에 표시되지 않고 '*'나 ''

 

  • type="hidden"
<input type="hidden" [속성="속성 값"]>

 화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소.

사용자에게 굳이 보여줄 필요가 없지만 관리자가 알아야 하는 것.

 

  • type="number"
<input type="number" [속성="속성 값"]>

입력 창에 숫자를 직접입력하는 것이 기본이지만 브라우저에 따라 스핀 박스(입력 창 오른 쪽에 화살표를 사용해 숫자를 증감시키게 하는 것)가 표시되기도 한다.

 

  • type="range"
<input type="range" [속성="속성 값"]>

슬라이드 막대를 움직여 숫자 값을 입력하게 함.

다음 필드에서 사용 할 수 있는 속성 : min,max,step,value

 

  • type="color"
<input type="color" [value="기본색" [속성="속성 값"]>

색상표에서 사용자가 색상을 선택할 수 있게 해준다. 색상 값은 16진수로 표시한다.

 

  • type="submit" / type="reset"
<input type="submit | reset" [value="버튼내용"] [속성="속성 값"]>

reset버튼은 <input> 요소에 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 모두 지울 수 있따.

submit버튼은 사용자가 폼에 입력한 정보를 서버로 전송한다. submit버튼으로 전송된 정보는 처음에 <form>태그에서 지정한 폼 처리 프로그램에 넘겨진다.

 

 

<input>태그의 속성

  • min,max.step

min,max : 각각 해당 필드의 최솟값과 최댓값을 지정한다.

step : 허용된 범위 내의 숫자의 일정한 간격을 가리켜 step만큼 값이 늘어난다.

 

  • size, minlength, maxlength

size : 한 줄 짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할지 지정.

minlength : 최소 몇 글자 이상 입력해야하는지 지정.

maxlength : 최대 몇 글자까지 입력할 수 있는지 지정.

 

  • <textarea>태그 

한 줄 이상의 문장을 입력할 때 사용하는 폼.

너비 크기를 지정하는 cols속성과 몇 줄을 표시할지 지정하는 rows속성을 사용.

 

 

form.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
	<style>
   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');
   
   h2{font-family: 'Noto Sans KR', sans-serif;
    }
   </style>
</head>
<body>
	<h2>form(p133)</h2>
	<form action="ok.jsp" method="get">
	<%--input type="hidden"은 노출x, 예)글번호, 회원id 등 --%>
	  <input type="hidden" name="userNick" value="비밀"/>
	  
	 <ul>
	  <li>이름:<input type="text" name="userName" size="10" maxlength="5" value="초기값"/></li>
	  <li>id: <input type="text" name="id"/></li>
	  <li>비밀번호: <input type="password" name="pwd" size="10"/></li>
	  <li>메모<textarea name="memo" rows="5" cols="20">초기값</textarea></li>
	 </ul>
	 
	 <ul>
	   <li>색상:<input type="color" name="myColor"/></li>
	 	<li>수량(number):<input type="NUMBER" name="quantity1" value="1" min="0" max="10" step="1"/></li>
	 	<li>수량(range):<input type="range" name="quantity2" value="1" min="0" max="10" step="1"/></li>
	 </ul>
	 
	 
	  <input type="submit" value="확인"/>
	  <input type="reset" value="취소"/>
	</form>
</body>
</html>

 

ok.jsp>

<%--
	<%@ %>은 지시어(directive)부분
	<%@ page %> page directive. 페이지지시어
				jsp페이지에 대한 정보를 지정
				jsp페이지가 생성하는 문서의 타입, 에러페이지 등 jsp페이지에서 필요로 하는 정보 설정
 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서버측페이지</title>
</head>
<body>
 <!-- html 주석문 -->
 <%--jsp 주석문 
   이 문서는 form01.jsp문서에서 보낸 data를 받아 처리하는 서버측페이지이다.

 <%= %>은 표션식(expression)으로 값을 브라우저에 출력
 --%>
 <% //스크립트릿(scriptlet).java코드를 실행
 /*jsp문서에서
  <input type="타입속성값" name="파라미터명"/>
  <input type="text" name="userName"/>
 
  request객체의 getParameter("파라미터명") 메소드를 호출하여 
  String타입의 값(user가 입력한 값, 선택한 값,개발자가 필요한 값)을 반환받는다*/
  String name = request.getParameter("userName");
  String id = request.getParameter("id");
  String pwd = request.getParameter("pwd");
 %>
 <h2>ok.jsp문서</h2>
 
 *user명:<%=name%><br/>
 *id:<%=id%><br/>
 *password:<%=pwd%><br/>
 
</body>
</html>
728x90

'개발 수업 > WEB' 카테고리의 다른 글

Visual Studio 설치  (0) 2023.06.22
[HTML] Get방식, Post방식  (0) 2023.06.22
[HTML,CSS] 목록을 만드는 태그, 목록 스타일  (0) 2023.06.22
이클립스 jsp파일 오류(The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path)  (0) 2023.06.22
[CSS] CSS박스모델  (0) 2023.06.21

관련글

티스토리툴바