220502 HTML2

달거북씨 2022. 5. 27. 21:24

2022. 5. 27. 21:24

하루 수업마다 파일을 어마무시하게 만들어내서 정리가 오래 걸릴 줄은 알았지만, 하루 하는데 이렇게 시간이 많이 들 줄은 몰랐다...

달거북씨는 망했어...

1. <form>태그

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 
		<form>태그
		- 사용자 의견이나 정보를 입력받을 큰 틀을 만드는 데 사용되는 태그
		- 폼 태그 안에서 입력된 데이터를 한 번에 서버로 전송한다.
        
		<form>태그 안 action은 폼 데이터를 서버로 보낼 때 해당 데이터가 도착할 URL을 의미한다.
	-->
	<form action="http://localhost/Login.jsp">
    
	<!-- 
		<input>태그
		- 사용자로부터 입력을 받을 수 있는 칸(상자)을 생성한다.
       
		<input>태그 안 type = "text"는 사용자로부터 텍스트 타입을 입력받겠다는 뜻이고, 
		"password"는 비밀번호 타입으로 입력받겠다는 뜻이다. 
		패스워드 타입으로 받을 시 사용자가 입력하는 데이터가 *로 표시되어 나온다. 
		그 외에도 checkbox, submit, file, email, hidden 등등 다양한 타입을 지정할 수 있다.
        
		<input>태그 안 name으로 해당 폼 데이터의 이름을 지정할 수 있다.
	-->
		<p>아이디 : <input type = "text" name = "id"></p>
		<p>패스워드 : <input type = "password" name = "pwd"></p>
		<p>주소 : <input type="text" name = "addr"></p>
    
	<!--
		<input type = "submit">으로 입력받은 폼데이터를 action에 지정한 url로 한 번에 전송. 
		'제출' 버튼이 생성된다.
	-->
		<input type = "submit">
	</form>
</body>
</html>

[출력결과]

[전송결과]

▶ url에 입력한 localhost/Login.jsp로 데이터가 전송되었지만, 서버에 연결되어 있지 않아서 사이트에 연결할 수 없다.

▶ 파란색 밑줄을 보면, 각 name별로 해당 데이터가 입력된 것을 볼 수 있다.

<input>태그 속성

name : 웹 프로그램과 연계되는 속성으로 한 페이지 안에서 고유한 값을 명시
id : 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시해야 한다.
-> name과 id값은 서로 동일하게 지정해도 무관하다.
type : text, password, hidden 속성에 따라 화면에 표시되는 요소의 종류가 결정된다.
value : 해당 요소에 기본적으로 작성되어 있는 값을 기술한다.
maxlength : 최대 입력 가능한 글자 수를 제한한다.
placeholder : 설명글. 사용자가 직접 값을 입력하는 형태의 input 요소에 지정하여, 값이 입력되기 전에 보여질 설명글을 표시한다.

<form>태그 심화

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 	<form>
 		<!-- <fieldset> : 입력 내용에 대한 그룹을 명시 -->
 		<fieldset>
 		
 			<!-- 
 				<legend> 	: 그룹의 제목 
 				<label> 	: 입력 요소 앞이나 뒤에서 표시되는 제목을 구성
 				<label for = "요소 id"> : 라벨과 결합될 요소를 명시
 			-->
 			<legend> 내용 입력하기</legend>
 			<label for="user_id">아이디 :</label>
 			<input type="text" name="user_id" id="user_id" 
            			maxlength="5" placeholder="아이디를 입력해주세요"> <br>
 			
 			<label for="user_name">회원이름 :</label>
 			<input type="text" name="user_name" id="user_name" 
            			maxlength="5" placeholder="이름을 입력해주세요"> <br>
 			
 			<label for="user_pw">패스워드 :</label>
 			<input type="password" name="user_pw" id="user_pw" 
            			maxlength="5" placeholder="패스워드를 입력해주세요"> <br>
 			
 			<!-- <textarea> : 장문을 입력받기 위한 요소 -->
 			<label for="memo">자기소개 :</label>
 			<textarea name="memo" id="memo" maxlength="100"></textarea><br>
 			
 			<!-- 개발상엔 필요하지만 굳이 보여지지 않아도 되는 항목 -->
 			<label for="data">숨겨진 항목 :</label>
 			<input type="hidden" name="data" id="data" value="숨겨진 데이터">
 		</fieldset>
 	</form>
</body>
</html>

[출력결과]

2. radio와 check

<input type="radio"> : 여러 항목 중 한 가지만 선택 가능

<input type="check"> : 여러 항목 중 복수로 선택 가능

[코드1]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <p>
		선택 1 : <input type="radio" name="commonra">
		선택 2 : <input type="radio" name="commonra">
		선택 3 : <input type="radio" name="commonra">
		선택 4 : <input type="radio" name="commonra" >
	</p>
    
	<!-- hr : 구분 선 -->
	<hr/>
    
	<p>
		<h1>색상(단일선택)</h1>
		붉은색 : <input type="radio" name="color">
		검은색 : <input type="radio" name="color">
		파란색 : <input type="radio" name="color">
		보라색 : <input type="radio" name="color" checked>
		<!--  checked : 기본적으로 체크되어 화면에 표시된다. -->
	</p>
    
	<hr/>
    
	<p>
		<h1>사이즈(다중선택)</h1>
		95 : <input type="checkbox" name="size">
		100 : <input type="checkbox" name="size">
		105 : <input type="checkbox" name="size">
	</p>
    
</body>
</html>

[출력결과]

▶ radio는 동그라미, checkbox는 네모로 나온다.

▶ 보라색에 checked를 해주었으므로 처음 실행했을 때 체크되어 출력된다.

▶checkbox는 여러 개 선택이 가능하다.

[코드2]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 임의의 action. 서버가 없기 때문에 넘어가지는 않는다.-->
	<form action="http://localhost/order.jsp">
		<p>
			<h1>생상(단일선택)</h1>
			붉은색 : <input type="radio" name="color" value="red">
			검은색 : <input type="radio" name="color" value="black">
			파란색 : <input type="radio" name="color" value="blue">
			보라색 : <input type="radio" name="color" value="purpl" checked>
			<!--  checked : 기본적으로 체크되어 화면에 표시된다. -->
		</p>
		<hr/>
		<p>
			<h1>사이즈(다중선택)</h1>
			95 : <input type="checkbox" name="size" value="95" checked>
			100 : <input type="checkbox" name="size" value="100" checked>
			105 : <input type="checkbox" name="size" value="105">
		</p>
		<input type="Submit">
        
        <!-- 
		value를 쓰지 않은 경우,
		ex. <input type="radio" name="color">
		name에 대해 on으로 값이 넘어간다.
		http://localhost/order.jsp?color=on&size=on&size=on 
        -->
        
        <!-- 
		value를 쓴 경우,
		ex. <input type="radio" name="color" value="red">
		name에 대해 해당하는 value 값이 넘어간다.
		http://localhost/order.jsp?color=red&size=95&size=105 
         -->
	</form>
</body>
</html>

[출력결과]

[코드3]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 
		<fieldset>태그
		- 연관된 요소들을 하나의 그룹으로 묶을 때 사용
		- 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려준다.
		- 또한 <legend>태그로 <fieldset> 요소에 대해 정의가능(일종의 제목)
	 -->
	<fieldset>
		<legend>취미 선택하기</legend>
		<p>
			<input type="checkbox" name="sports" id="hobby1" value="soccer">
			<label for="hobby1">축구</label>
			<input type="checkbox" name="sports" value="basketball"> 농구
			<input type="checkbox" name="sports" value="baseball"> 야구
		</p>
	</fieldset>

	<fieldset>
		<legend>성별 선택하기</legend>
		<p>
			남자 : <input type="radio" name="gender" value="man" checked>
			여자 : <input type="radio" name="gender" value="woman">
		</p>
	</fieldset>
</body>
</html>

▶ 선택지에 대한 이름을 선택지 뒤에 붙이는 방법

<input>태그 안 id를 만들고 <label> 태그를 이용해 id에 대한 선택지 이름 정의하기
예시.
<input type="checkbox" name="sports" id="hobby1" value="soccer">
<label for="hobby1">축구</label>
<input>태그 뒤에 붙이기
예시.
<input type="checkbox" name="sports" value="basketball"> 농구

▶ 선택지에 대한 이름을 선택지 앞에 붙이는 방법

<input>태그 앞에 붙이기
예시.
남자 : <input type="radio" name="gender" value="man" checked>

[출력결과]

3. 드롭박스

[코드1]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 
	<select>
		<option></option>
	</select>
	
	<select>	: 드롭다운 박스를 구성
	<option>	: 선택 항목을 구성
	selected	: 해당 option을 기본적으로 선택 상태에 있게 한다.
 -->
	<fieldset>
		<legend>이동통신사 선택하기</legend>
		<label for="telecom">이동통신사 선택</label>
		<select name="telecom" id="telecom">
			<option value="SKT">SKTelecom</option>
			<option value="KT">KT</option>
			<option value="LG">LG U+</option>
		</select>
	</fieldset>
</body>
</html>

▶ <legend>태그의 '이동통신사 선택하기'는 <fieldset>태그에 대한 제목

▶ <label>태그의 '이동통신사 선택'은 <select>태그의 id와 연결된 제목

▶ <option>태그의 value 값은 <select>태그의 name과 짝지어져서 주소에 넘겨진다.

예시. http://localhost:9090/select.html?name=SKT

하지만 현재 form을 보내는 형태가 아니므로 주소로 넘겨지는 일은 없음

[출력결과]

[코드2]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="http://localhost/color.jsp">
		<h1>색상</h1>
		<select name="color">
			<option value="red">붉은색</option>
			<option value="blue">파란색</option>
			<option value="black">검은색</option>
		</select>
		<input type="submit">
	</form>
	
	<!-- 파란색을 선택하고 제출했을 때의 주소값-->
	<!-- http://localhost/color.jsp?color=blue -->
	
</body>
</html>

▶ 제출 형태로 만들기 위해서 <form>태그로 감싸주고 <input type="submit">을 적어준다.

[출력결과]

4. 버튼

[코드1. submit 제출버튼 이름 바꾸기]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="submit">
	<!-- <hr>태그 : 수평선 -->
	<hr>
	<input type="submit" value="전송">
</body>
</html>

▶ 기본 submit 버튼은 '제출'로 만들어지지만, 따로 value를 이용하여 바꿔줄 수 있다.

[출력결과]

[코드2. submit, button, reset]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="http://Localhost/form.jsp">
		<!-- 텍스트 입력 칸 -->
		<input type="text">
		
		<!-- '전송'으로 바꾼 submit 버튼 생성 -->
		<input type="submit" value="전송">
		
		<!-- 
			button
			: 순수 html이기 때문에 어떻게 작동시킬 것인지 작성하지 않으면 작동하지 않는다. 
		
			onclick은 마우스 클릭 시 실행되는 이벤트 요소
			마우스로 버튼을 클릭하면'hello world'가 작성된 alert 창이 실행된다. 
		-->
		<input type="button" value= "버튼" onclick="alert('hello world')">
		
		<!-- 초기화 버튼 -->
		<input type="reset">
	</form>
</body>
</html>

[출력결과]

밖에서 들어온 잡음이 좀 섞여있다ㅠ

5. 전송 방식

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- method로 인풋받은 값을 전달하는 방법을 정할 수 있다. -->
	<form action="http://Localhost/method.jsp" method="post">
		<input type="text" name="id">
		<input type="password" name="pwd">
		<input type="submit">
	</form>
	
	<!-- 
		Get방식	: 현재 사용하는 방식, url 방식으로 전송, 기본 전송 방식
		http://localhost/method.jsp?id=test&pwd=password
		
		Post방식	: url 방식이 아닌 데이터를 숨겨서 전송 
		http://localhost/method.jsp
		
		=> 비밀번호는 숨겨서 받아야하므로 post방식을 이용한다.
	-->
	
</body>
</html>

[출력결과]

7. 파일업로드

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 
		파일업로드 코드
		<form enctype="multipart/form-data">
			<input type="file">
		</form>
		
		enctype="multipart/form-data" : 이 속성이 명시되어 있어야 한다.
		method="post" : 이 속성이 명시되어 있어야 한다.
		type="file" : 웹 프로그램으로 파일을 전송할 수 있도록 찾아보기 버튼을 표시
			      한 번에 하나의 파일만 첨부 가능하고, 보통 업로드 크기에 제한이 있음
	 -->
	 
	 <form action="http://Localhost/upload.jsp" enctype="multipart/form-data" method="post">
	 	<input type="file">
	 	<input type="submit">
	 </form>
</body>
</html>

[출력결과]

▶ '파일선택' 클릭 시 파일을 선택할 수 있는 '열기' 창이 뜬다.

8. 실습

[문제. 다음과 같이 만들기]

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>폼</h2>
	<form action="http://Localhost/regist.jsp">
		<p>
			아이디 : <input type="text" maxlength="20" 
            			placeholder="아이디를 입력하세요." name="userid" required>
		</p>
        
		<p>
			패스워드 : <input type="password" maxlength="20" 
            			placeholder="비밀번호를 입력하세요." name="userpw" required>
		</p>
        
		<fieldset>
			<legend>성별</legend>
			<label>남자 <input type="radio" name="gender" value="남자" checked></label>
			<label>여자 <input type="radio" name="gender" value="여자"></label>
		</fieldset>
		
		<fieldset>
			<legend>좋아하는 과목</legend>
			<label>JAVA <input type="checkbox" name="hobby" value="JAVA" checked></label>
			<label>JSP <input type="checkbox" name="hobby" value="JSP" checked></label>
			<label>HTML <input type="checkbox" name="hobby" value="HTML" checked></label>
			<label>CSS <input type="checkbox" name="hobby" value="CSS"></label>
		</fieldset>
		
		<p>
			<select name="job">
				<option value="학생">학생</option>
				<option value="선생님">선생님</option>
				<option value="개발자">개발자</option>
			</select>
		</p>
		
		<p><input type="file"></p>		

		<p>자기소개</p>
				
		<p>
			<textarea rows="5" cols="40"> 자기 소개를 입력하세요.</textarea>
		</p>
		
		<p>
			우편번호 : <input type="text" value="역삼동" readonly>
			<button type="button">우편번호</button>
		</p>
		
		<p>
			상세주소 : <input type="text">
		</p>
		
		<p>
			참고사항 : <input type="text" disabled>
		</p>
		
		<p>
			<input type="reset" value="다시쓰기">
			<input type="submit" value="확인">
		</p>
	</form>
</body>
</html>

▶ <input>태그의 placeholder 속성을 통해 텍스트 입력 칸 안에 내용을 명시할 수 있다.

▶ <input>태그의 required 속성은 폼 데이터가 서버로 전송되기 전 반드시 채워져 있어야 하는 필드를 명시한다.

▶ <textarea>태그의 row 속성은 텍스트의 줄, cols 속성은 글자 수 제한을 의미한다.

예시. row="5" cols="40" >>> 텍스트를 5줄, 40자 입력할 수 있음을 뜻한다.

▶ <input>태그의 readonly 속성은 <input> 요소의 입력 필드가 읽기 전용임을 명시

▶ <input> 태그의 disabled 속성은 해당 <input> 요소가 비활성화됨을 명시

disabled 속성이 명시된 <input> 요소는 사용할 수 없으며, 사용자가 클릭할 수도 없다.

또한, 폼 데이터가 제출될 때도 disabled 속성이 명시된 <input> 요소의 데이터는 제출되지 않는다.

728x90

저작자표시 비영리 변경금지 (새창열림)

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220503~04 CSS 1 (0)	2022.06.13
220503 HTML3 (0)	2022.05.28
220428 HTML1 (0)	2022.05.24
220425 데이터베이스 INDEX (0)	2022.05.04
220422 데이터베이스 뷰, 시퀀스 (0)	2022.05.02

달거북씨의 코딩생활

220502 HTML2

1. <form>태그

<input>태그 속성

<form>태그 심화

2. radio와 check

3. 드롭박스

4. 버튼

5. 전송 방식

7. 파일업로드

8. 실습

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

+ Recent posts

티스토리툴바