0513 HTML - input 태그

버튼(button)

버튼(button)	전송할 내용이 있으면 form 태그에 들어가야함.
	반드시 form 태그랑 input 태그를 함께 사용할 필요는 없음.

<input type="button" value="Click me" onclick="msg()">
<input type="submit" onclick="msg()">
<button onclick="msg()">나도 버튼</button>

<msg()에 들어갈 javascript 내용>

<script type="text/javascript">
	function msg() {
		alert("버튼을 눌렀습니다.");
	}
</script>

 

버튼 클릭시 나오는 alert 문구

필드셋(fieldset)

화면상에 영역을 그리는 태그. block 형식

 

로그인 영역

disabled	수정 불가능한 부분.
	ex. 회원 정보 수정시 고칠 수 없는 부분
	1. 그냥 텍스트로 사용
	2. 회원가입페이지 재활용하면서 고칠 수 없는 부분 지정
required	입력이 없는 상태로는 넘어갈 수 없는 부분

<fieldset>
	<legend>로그인 영역</legend>
	<form>
		ID : <input type="text" name="id" disabled value="admin"><br>
		<!--  disabled : 수정 불가능한 부분 
			회원 정보 수정시 고칠 수 없는 부분 
			1. 그냥 텍스트로 사용.
			2. 회원가입페이지 재활용하면서 고칠 수 없는 부분 지정 -->
		PW : <input type="password" name="pwd" required maxlength="8"><br>
		<!-- required : 입력이 없는 상태로는 넘어갈 수 없는 부분 -->
		<input type="submit">
	</form>
</fieldset>

 

숨김 속성

hidden

화면에서 글자 숨기기

<fieldset>
	<legend>숨김 속성</legend>
	<form>
		보이는 정보 : <input type="text" value="길동"><br> 
		안보이는 정보 : <input type="hidden" value="홍"><br>
	</form>
</fieldset>

 

파일 입력

<fieldset>
	<legend>파일 입력</legend>
	<form>
		파일 선택 : <input type="file" name="img"> <input type="submit">
	</form>
</fieldset>

 

색상 선택

<fieldset>
	<legend>색상 선택</legend>
    <form action="favcolor.jsp">
		좋아하는 색상을 선택하세요 : <input type="color" name="favcolor"><br>
		<input type="submit">
	</form>
</fieldset>

색상 선택 후 제출했을 때 주소창에서도 색상 확인이 가능함.

 

날짜, 시간 관련

<fieldset>
	<legend>날짜관련</legend>
	<form>
		오늘 : <input type="date" name="today"><br> 프로젝트 시작 : <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>
<fieldset>
	<legend>시간 관련</legend>
	시간 : <input type="time" name="tt"><br> 생일(년도, 월, 일, 시간)
	입력 : <input type="datetime-local" name="bday">
</fieldset>

 

기타 입력 형식(number, range, e-mail, url)

<fieldset>
	<form>
		<legend>기타 입력</legend>
		숫자입력 : <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>

email형식은 @을 포함하지않으면 데이터 전송에 실패함.

 

check-box & radio button

<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="submit">
		</fieldset>
	</form>
</body>

<comp.jsp 코드>

<%
//체크박스의 결과 받기
String ve[] = request.getParameterValues("vehicle1");
for(String v : ve){
	out.println(v + "<br>");
}
out.println("<br>");
//라디오박스의 결과 받기
String gender = request.getParameter("gender");
out.println("성별 : " + gender + "<br>");
%>

데이터 보낸 결과

라디오박스는 하나의 정보만 넘어감, name으로 분류가 됨

체크박스는 다중선택이 가능하지만 라디오박스는 다중선택이 불가능함.