HTML 다양한 입력 양식
<!-- 버튼(button) -->
<input type="button" value="Click me" onclick="msg()">
<input type="submit" onclick="msg()"> <!-- 자동문구 [제출] -->
<button onclick="msg()">나도 버튼</button>input type의 button문으로 (버튼)을 만들 수 있다
input type의 submit문은 양식을 제출할때(데이터를 보낼때) 쓰인다.
value : 버튼의 이름 지정
onclick="msg()" : 버튼클릭후 출력할 메세지
<button>문을 통해서도 (버튼)을 만들 수 있음
<!-- 필드셋(fieldset): 화면상에 영역을 그리는 태그 -->
<fieldset>
<legend>로그인 영역</legend>
<form>
ID: <input type="text" name="id" disabled value="admin"><br> <!-- disabled 입력 막아놓는 것 (정보 수정시 id같은 칸 막아놓는 그런 느낌) -->
PW: <input type="password" name="pwd" required maxlength="8"> <!-- form안에 required 속성 있으면 무조건 입력해야됨 --> <!-- maxlength 최대 글자수 제한 -->
<br> <input type="submit">
</form>
</fieldset> <fieldset>으로 묶어주면 안에있는코드에 검은색박스영역이 생성된다
<legend>문구를 입력하면 필드셋에 제목을 입력가능.
<form>입력된 데이터를 백으로 전달(form 안으로 묶어줘야 입력한 데이터전송이 가능하다.)
<input type="text" : 텍스트를 입력받을 수 있다.
name="id" : 데이터 전송을받을 이름은 "id"
value="admin" : 박스안에 텍스트를 "admin"으로 미리 표시해둠
type="password" : 패스워드를 입력받을 수 있다.(입력시 '***' 로 표시됨)
- disabled : 입력을 할 수 없게 막아놓는 것 (정보 수정시 id같은 칸 막아놓는 그런 느낌)
- required : form안에 required 속성 있으면 무조건 입력해야됨
- maxlength : 최대 글자수 제한
<form action="comp.jsp">
<fieldset>
<legend> 체크박스와 라디오 버튼</legend>
<input type="checkbox" name="vehicle1" value="자전거">
자전거가 있습니다.<br>
<input type="checkbox" name="vehicle1" value="자동차">
자동차가 있습니다.<br>
<input type="checkbox" name="vehicle1" value="요트">
요트가 있습니다.<br>
<hr>
<input type="radio" name="gender" value="male">
남성<br>
<input type="radio" name="gender" value="female">
여성<br>
<input type="radio" name="job" value="student">
학생<br>
<input type="radio" name="job" value="researcher">
연구원<br>
<input type="submit">
</fieldset>
</form><form action="comp.jsp"> : 제출했을시 comp.jsp로 연결
input type="checkbox" : 체크박스 버튼 타입
type="radio" : 라디오 버튼 타입
name에 따라서 분류됨 위에경우 "vehicle1","gender","job"으로 나뉘어짐
-체크박스 버튼은 중복선택 가능
-라디오버튼은 중복선택 불가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>선택 결과 페이지</title>
</head>
<body>
<%
//한글 깨짐 방지 작업
request.setCharacterEncoding("UTF-8");
//체크박스의 결과 받기
String ve[] = request.getParameterValues("vehicle1");
for(String v : ve){
out.print(v + "<br>");
}
out.print("<br>");
String gender = request.getParameter("gender");
out.print("성별 : "+gender+"<br>");
out.print("<br>");
String job = request.getParameter("job");
out.print("직업 : "+job+"<br>");
%>
</body>
</html>한글 깨짐이 있을 수 있기때문에 결과창에서
request.request.setCharacterEncoding("UTF-8"); 를 입력해 줘야한다.
<% %> : 자바의 기능을 입력 할 수 있게끔 해준다.
<fieldset>
<legend>숨김 속성</legend>
보이는 정보 : <input type="text" value="길동"><br>
안보이는 정보 : <input type="hidden" value="홍"><br>
</fieldset>hidden 타입으로 글자를 숨길 수 있다.
<!-- 파일 입력(file) -->
<fieldset>
<legend>파일 입력</legend>
<form>
파일 선택 : <input type="file" name="img">
<input type="submit">
</form>
</fieldset>input type="file"로 파일을 불러오는 버튼을 만들 수 있다.
<!-- color 선택 -->
<fieldset>
<legend>색상 선택</legend>
좋아하는 색상을 선택하세요 :
<form action="favcolor.jsp">
<input type="color" name="favcolor"><br>
<input type="submit">
</form>
</fieldset>input type = "color" : 색상 선택 버튼
<form action="favcolor.jsp"> : 제출시 favcolor.jsp로 출력
-----------------------------------------------------------------------------------------------------------------------------------
<!-- 날짜와 시간 (date, month, week, time, datetime) -->
<fieldset>
<legend>날짜 관련</legend>
<form>
오늘 : <input type="date" name="today">
프로젝트 시작 :
<input type="date" name="from" min="2020-05-20" max="2021-01-01"><br>
년-달 단위로 입력 :
<input type="month" name="mon"><br>
주단위로 입력 :
<input type="week" name="we"><br>
<input type="submit">
</form>
</fieldset>"date" :날짜 블럭 타입
max~min : 최대날짜 최소날짜
month : 년-달 단위
week : 주 단위
<fieldset>
<legend>시간 관련</legend>
<form>
시간 :
<input type="time" name="tt"><br>
생일 (년도, 월, 일, 시간) 입력 :
<input type="datetime-local" name="bday">
</form>
</fieldset>time : 시간데이터 타입
datetime-local : 년도, 월, 일, 시간 모두 입력받는 타입(생일입력시)
<!-- 기타 입력 형식(number, range, e-mail, url -->
<fieldset>
<legend>기타 입력</legend>
<form>
숫자 입력 :
<input type="number" name="num" min="1" max="10"><br>
범위 설정 :
<input type="range" name="point" min="0" max="100">
<br>
이메일 입력 :
<input type="email" name="myemail"><br>
홈페이지 :
<input type="url" name="myhome"><br>
<input type="submit">
</form>
</fieldset>number : 숫자만 입력
range : 범위 설정
email : 이메일 입력
url : 주소값 입력
<script type="text/javascript">
//여기는 javascript 영역
function msg() {
alert("버튼을 눌렀습니다.");
}
</script>function msg(){
alert("버튼을 눌렀습니다."); --버튼 입력시 출력문구를 javascript영역으로 입력
}