수업내용/Web
[2022.11.02.수] 블록 엘리먼트와 인라인 엘리먼트, 폼
주니어주니
2022. 11. 2. 18:09
1. 블록 엘리먼트와 인라인 엘리먼트
documnet객체 : html문서를 표현하는 객체
태그 -> 엘리먼트가 됨
(태그 하나마다 엘리먼트 객체가 만들어짐)
그거를 렌더링
클래스:객체 = 태그:엘리먼트
1-1. 블록 엘리먼트
- 항상 새로운 줄에서 시작한다.
- 항상 사용가능한 최대 너비를 차지한다. (한줄을 통째로 차지)
- 블록 엘리먼트의 왼쪽이나 오른쪽에는 다른 엘리먼트가 위치할 수 없다.
- 엘리먼트의 너비(width)를 지정할 수 있다.
- 엘리먼트내의 컨텐츠(자식엘리먼트, 텍스트)를 정렬할 수 있다.
- 대표적인 태그
- 문서의 제목 : h1~h6
문서의 내용 : p
목록 : ol, ul, li, dl, dt, dd
표 : table
입력폼 : form
컨테이너 태그 : div
* 다른 블록 엘리먼트, 인라인 엘리먼트, div 태그를 담는 태그
- 문서의 제목 : h1~h6
div 태그
- 블록엘리먼트를 그룹으로 묶을 수 있는 태그다.
- <div> 태그도 블록엘리먼트다.
- <div> 태그는 다른 블록엘리먼트나 인라인엘리먼트를 포함할 수 있고, 다른 div도 포함할 수 있다.
- <div> 태그는 html문서에서 엘리먼트들을 특정 그룹으로 묶을 때 사용한다.
1-2. 인라인 엘리먼트
- 새로운 줄에서 시작하지 않을 수도 있다.
- 컨텐츠를 표시하는데 필요한 만큼의 너비만 가진다.
- 인라인 엘리먼트는 블록 엘리먼트로 꼭 감싸자.
- 엘리먼트의 너비(width)를 지정해도 적용이 되지 않는다.
- 엘리먼트내의 컨텐츠(자식엘리먼트, 텍스트)를 정렬할 수 없다.
- 대표적인 태그
- 링크 태그 : a
이미지 태그 : img
포맷팅 태그 : strong, em, small, del, mark
폼요소 태그 : input, select, textarea, button, label
컨테이너 태그 : span
* 텍스트의 전부 혹은 일부를 담는 태그
- 링크 태그 : a
span 태그
- 텍스트를 담는 태그다.
- <span> 태그는 텍스트의 특정 부분을 감싸고 스타일 등의 표시를 한다.
- <span> 태그를 사용해서 담은 텍스트는 style, id, class를 사용해서 다양한 스타일로 표시할 수 있다.
- <em>으로 감싸고 강조를 줘도 됨 (em은 기본스타일이 정해져 있지만, span은 기본스타일 없이 내가 설정한대로만)
1-3. 블록 엘리먼트와 인라인 엘리먼트 간의 전환
- css 속성 중에서 display의 값을 변경하면 블록엘리먼트를 인라인엘리먼트로, 인라인엘리먼트를 블록엘리먼트로 변경할 수 있다.
- 블록엘리먼트를 인라인엘리먼트로 바꾸기
- <블록엘리먼트태그 style="display: inline;" >컨텐츠</블록엘리먼트태그>
- 인라인엘리먼트를 블록엘리먼트로 바꾸기
- <인라인엘리먼트태그 style="display: block;" >컨텐츠</인라인엘리먼트태그>
* 블록 엘리먼트, 인라인 엘리먼트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>블록 엘리먼트와 인라인 엘리먼트</title>
<style>
h1, h2, p, a, b, em, small{
margin: 5px;
padding: 5px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>블록 엘리먼트와 인라인 엘리먼트</h1>
<h2>블록 엘리먼트</h2>
<p style="width: 25%;">p는 블록 엘리먼트야</p>
<p style="width: 50%;">p는 블록 엘리먼트야</p>
<p style="width: 70%;">p는 블록 엘리먼트야</p>
<p style="text-align: right;">p는 블록 엘리먼트야</p>
<p style="text-align: center;">p는 블록 엘리먼트야</p>
<p style="text-align: left;">p는 블록 엘리먼트야</p>
<h2>인라인 엘리먼트</h2>
<p style="text-align: right";>
<a href="http://www.daum.net">다음</a>
<a href="http://www.daum.net">다음</a>
<a href="http://www.daum.net">다음</a>
<a href="http://www.daum.net">다음</a>
<a href="http://www.daum.net">다음</a>
</p>
<p><b>박명수</b>는 "아이들 만큼이라도 웃게 <em>아무 일 없다는 듯이</em> 해야 하지 않을까 싶다. <small>우리의 미래 아니냐</small>"고 말하면서 한숨을 내쉬었다.</p>
</body>
</html>
* div 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.products-box div{
float: left;
width: 240px;
border: 1px solid seagreen;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<h1>div 엘리먼트</h1>
<div style="color: blue; font-style: italic;">
<p>div 엘리먼트는 블록엘리먼트다.</p>
<p>div 엘리먼트는 블록 엘리먼트, 인라인 엘리먼트, 다른 div 엘리먼트를 포함할 수 있다.</p>
<p>div 엘리먼트는 여러 엘리먼트를 하나의 그룹으로 묶을 때 사용되는 엘리먼트다.</p>
<p>div 엘리먼트를 사용해서 여러 엘리먼트를 하나의 그룹으로 묶으면, 그룹 단위로 스타일을 부여할 수 있다.</p>
</div>
<div style="color: orange; font-size: 20px;">
<p>div 엘리먼트는 블록엘리먼트다.</p>
<p>div 엘리먼트는 블록 엘리먼트, 인라인 엘리먼트, 다른 div 엘리먼트를 포함할 수 있다.</p>
<p>div 엘리먼트는 여러 엘리먼트를 하나의 그룹으로 묶을 때 사용되는 엘리먼트다.</p>
<p>div 엘리먼트를 사용해서 여러 엘리먼트를 하나의 그룹으로 묶으면, 그룹 단위로 스타일을 부여할 수 있다.</p>
</div>
<div style="background-color: black; color: white; font-weight: bold">
<p>div 엘리먼트는 블록엘리먼트다.</p>
<p>div 엘리먼트는 블록 엘리먼트, 인라인 엘리먼트, 다른 div 엘리먼트를 포함할 수 있다.</p>
<p>div 엘리먼트는 여러 엘리먼트를 하나의 그룹으로 묶을 때 사용되는 엘리먼트다.</p>
<p>div 엘리먼트를 사용해서 여러 엘리먼트를 하나의 그룹으로 묶으면, 그룹 단위로 스타일을 부여할 수 있다.</p>
</div>
<h2>div의 활용</h2>
<div>
<input type="checkbox" checked onchange="toggleDisplay('box-1');"> 추천
<input type="checkbox" checked onchange="toggleDisplay('box-2');"> 신규
</div>
<div style="width: 100%; overflow: hidden; ">
<h3>추천 노트북 리스트</h3>
<div class="products-box">
<div>
<img src="resources/images/notebook-1.jpg" alt="노트북 이미지"/>
<p>11월에 세일이 가장 많이 들어가는 제품입니다.</p>
</div>
<div>
<img src="resources/images/notebook-1.jpg" alt="노트북 이미지"/>
<p>11월에 세일이 가장 많이 들어가는 제품입니다.</p>
</div>
<div>
<img src="resources/images/notebook-1.jpg" alt="노트북 이미지"/>
<p>11월에 세일이 가장 많이 들어가는 제품입니다.</p>
</div>
<div>
<img src="resources/images/notebook-1.jpg" alt="노트북 이미지"/>
<p>11월에 세일이 가장 많이 들어가는 제품입니다.</p>
</div>
</div>
</div>
<div style="width: 100%; overflow: hidden;">
<h3>신규 노트북 리스트</h3>
<div class="products-box">
<div>
<img src="resources/images/notebook-2.jpg" alt="노트북 이미지"/>
<p>11월에 세일이 가장 많이 들어가는 제품입니다.</p>
</div>
<div>
<img src="resources/images/notebook-2.jpg" alt="노트북 이미지"/>
<p>11월에 세일이 가장 많이 들어가는 제품입니다.</p>
</div>
<div>
<img src="resources/images/notebook-2.jpg" alt="노트북 이미지"/>
<p>11월에 세일이 가장 많이 들어가는 제품입니다.</p>
</div>
<div>
<img src="resources/images/notebook-2.jpg" alt="노트북 이미지"/>
<p>11월에 세일이 가장 많이 들어가는 제품입니다.</p>
</div>
</div>
</div>
</body>
</html>
* span 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text-danger{
color: red;
}
.text-success{
color: blue;
}
.text-small{
font-size: smaller;
}
.text-box{
padding: 5px;
border: 1px solid #eee;
border-radius: 20px;
}
.text-blue-box{
background-color: cornflowerblue;
color: white;
}
.text-green-box{
background-color: lightgreen;
color: white;
}
</style>
</head>
<body>
<h1>span 태그</h1>
<p>span 태그는 텍스트를 감싸는 태그</p>
<p>span 태그에 담겨있는 텍스트는 style, id, class 속성을 이용해서 다양한 스타일로 표현할 수 있다.</p>
<h2>span 태그의 활용</h2>
<dl>
<dt>제목</dt><dd>이것이 자바다</dd>
<dt>저자</dt><dd>홍길동 <span class="text-success text-small">(김유신 감수, 이순신 테스트)</span></dd>
<dt>출판사</dt><dd>중앙출판사</dd>
<dt>가격</dt><dd><span class="text-danger"><strong>35,500 </strong> 원</span> <span class="text-danger text-small">(500원 적립)</span></dd>
<dt>기타</dt><dd><span class="text-box text-blue-box">무료배송</span> <span class="text-box text-green-box">당일배송</span></dd>
</dl>
</body>
</html>
2. 폼과 폼요소
2-1. 폼
- 폼은 사용자가 값을 입력할 수 있는 입력요소(입력필드, 체크박스, 라디오버튼, 콤보박스 등)를 제공하는 것이다.
- 모든 입력요소들은 <form> 태그 안에 정의되어야 한다.
2-2. 폼요소
- 폼요소는 사용자가 값을 입력하거나, 선택하거나, 체크할 수 있는 것들이다.
- 대표적인 폼요소 태그
- <input>, <select>, <textarea>, <button>
<!DOCTYPE html>
<html lang="ko>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 입력</title>
</head>
<body>
<h1>폼 요소</h1>
<h2>회원가입 폼</h2>
<form action="">
<div>
<label>이름</label>
<!-- 텍스트 입력필드 -->
<input type="text" name="name" />
</div>
<div>
<label>비밀번호</label>
<!-- 비밀번호 입력필드 -->
<input type="password" name="pwd" />
</div>
<div>
<label>전화번호</label>
<select name="tel">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select>
- <input type="text">
- <input type="text">
</div>
<div>
<label>프로필 사진</label>
<!-- 첨부파일 입력필드 -->
<input type="file" name="profile" />
</div>
<div>
<label>생일</label>
<!-- 날짜 입력필드 -->
<input type="date" name="birth" />
</div>
<div>
<label>성별</label>
<!-- 라디오버튼 : 같은 이름을 가진 것 중에서 하나만 선택 가능-->
<input type="radio" name="gender" value="남">남성
<input type="radio" name="gender" value="여">여성
</div>
<div>
<label>학력</label>
<!-- 라디오버튼 : 같은 이름을 가진 것 중에서 하나만 선택 가능-->
<input type="radio" name="school" value="초등">초졸
<input type="radio" name="school" value="중등">중졸
<input type="radio" name="school" value="고등">고졸
<input type="radio" name="school" value="전문대">초대졸
<input type="radio" name="school" value="대학">대학졸
<input type="radio" name="school" value="대학원">대학원졸
</div>
<div>
<label>보유 기술</label>
<!-- 체크박스 : 복수 개 선택 가능 -->
<input type="checkbox" name="skill" value="java">자바
<input type="checkbox" name="skill" value="c">c
<input type="checkbox" name="skill" value="c++">c++
<input type="checkbox" name="skill" value="python">파이썬
<input type="checkbox" name="skill" value="SQL">데이터베이스
<input type="checkbox" name="skill" value="빅데이터">빅데이터
<input type="checkbox" name="skill" value="머신러닝">머신러닝
<input type="checkbox" name="skill" value="임베디드">임베디드 프로그래밍
</div>
<div>
<label>지원분야</label>
<!-- 셀렉트박스(콤보박스) : 제시된 옵션 중 하나 혹은 여러 개(multiple)를 선택 가능 -->
<select name="job">
<option value="app"> 응용프로그램 개발 </option>
<option value="web"> 웹 애플리케이션 개발 </option>
<option value="fullstack"> 풀스택 개발 </option>
<option value="front"> 프론트 엔드 개발 </option>
<option value="infra"> 인프라 관리 </option>
<option value="db"> 데이터베이스 관리 </option>
</select>
</div>
<div>
<label>자기소개</label>
<!-- textarea : 개행문자가 포함된 여러 라인의 텍스트 입력 가능 -->
<textarea name="memo" rows="10"></textarea>
</div>
</form>
</body>
</html>
2-3. 폼요소(input, select, textarea)의 주요 속성
1) 공통 속성
- name 속성
- 폼입력요소의 이름을 정의한다.
- 입력값이 서버로 전달될 때 name속성에 지정된 이름과 입력값의 쌍으로 전달된다.
- 모든 입력요소에는 name속성을 꼭 설정하자.
- 체크박스나 라디오버튼의 경우 같은 종류의 항목들은 같은 이름을 설정한다.
- 폼 입력값은 name=value&name=value&name=value 형식으로 서버로 전달된다.
( userId=hong&job=web&description=나는 나다. )
- disabled 속성
- 해당 폼 입력요소를 비활성화 시킨다.
- 비활성화된 폼 입력요소의 값은 서버로 제출되지 않는다.
- 비활성화된 폼 입력요소에는 값을 입력하거나 수정할 수 없다.
- readonly 속성
- 해앙 폼 입력요소는 읽기전용 입력요소가 된다.
- 읽기전용 입력요소는 값을 수정할 수 없다.
- 읽기전용 입력요소의 값은 서버로 제출된다.
- 라디오버튼, 체크박스는 readonly 속성이 적용되지 않는다.
2) 고유 속성
- <input> 태그의 주요 속성
- type 속성
- 폼입력요소의 타입을 결정한다.
- type 속성의 값은 미리 정해져 있다.
- 타입의 종류
- type="text" : 입력필드가 된다.
- type="password" : 비밀번호 입력필드가 된다.
- type="date" : 날짜 입력필드가 된다.(달력표시)
- type="number" : 숫자 입력필드가 된다 (숫자만 입력가능)
- type="email" : 이메일 입력필드가 된다.(유효하지 않은 이메일 형식인 경우 에러발생)
- type="url" : url 입력필드가 된다.
- type="file" : 첨부파일 폼요소가 된다.
- type="radio" : 하나만 선택가능한 라디오 버튼이 된다.
- type="checkbox" : 복수개 선택가능한 체크박스가 된다.
- type="reset" : 폼의 입력값을 초기상태로 리셋한다.
- type="submit" : 폼의 입력값을 서버로 제출한다.
- type="hidden" : 해당 폼 입력요소는 화면에 표시되지 않는다.
- value 속성
- 폼입력요소의 입력값을 정의한다.
- 라디오버튼, 체크박스, 히든 필드는 value를 사용해서 미리 값을 설정해야 한다.
- 첨부파일 입력요소에는 값을 지정할 수 없다.
- checked 속성
- 라디오버튼과 체크박스를 체크상태로 만든다.
- 라디오버튼과 체크박스는 현재 체크상태인 것만 서버로 값이 전달된다.
- minlength, maxlength 속성
- 최소/ 최대 문자 입력 글자수를 제한한다.
- type 속성이 text, password, email, url 등으로 지정된 입력필드에서 사용한다.
- step, min, max 속성
- 증감치, 최소갓, 최대값을 지정한다.
- type = "number" 로 지정된 입력필드에서 사용한다.
- type 속성
- <select> 태그
- 드롭다운 리스트를 만든다.
- 사용자가 입력해야 되는 값이 미리 결정되어 있는 경우에 사용한다.
- 예) 학력사항, 통신사, 지역 ...
- <textarea> 태그
- 여러 줄의 텍스트가 입력 가능한 입력필드이다.
- <textarea>에 입력값을 정의할 때는 value를 사용하지 않는다.
<textarea>미리 정의할 입력값</textarea>- rows 속성 : textarea가 표시할 줄 수를 지정한다.
- cols 속성 : textarea가 표시할 너비를 지정한다.
- <button> 태그
- 클릭가능한 버튼을 정의한다.
- <button> 태그가 <form>태그 안에 있을 때는 폼 입력값을 서버로 제출하는 submit버튼처럼 동작한다.
2-4. 폼요소 예시
* input 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>input 태그</h1>
<h2>input 태그의 타입 종류</h2>
<form method="post" action="register.jsp">
<dl>
<dt>type="text"</dt>
<dd>입력필드를 생성한다.</dd>
<dd>minlength와 maxlength 속성으로 최소/최대 문자열 개수를 지정할 수 있다. </dd>
<dd><input type="text" name="userid" minlength="6" maxlength="12" value="hong" readonly></dd>
<dt>type="password"</dt>
<dd>비밀번호 입력필드를 생성한다.</dd>
<dd>minlength와 maxlength 속성으로 최소/최대 문자열 개수를 지정할 수 있다. </dd>
<dd>비밀번호 입력필드에는 영어 대소문자, 숫자, 특수문자만 입력가능하다.</dd>
<dd><input type="password" name="pwd" minlength="9" maxlength="12"></dd>
<dt>type="date"</dt>
<dd>날짜 입력필드를 생성한다.</dd>
<dd>날짜 입력필드에 초기값으로 날짜를 지정할 때는 yyyy-mm-dd 형식으로 값을 입력한다.</dd>
<dd><input type="date" name="birth" value="2022-11-03" disabled></dd>
<dt>type="radio"</dt>
<dd>하나만 선택가능한 라디오버튼을 생성한다.</dd>
<dd>라디오버튼은 value속성으로 값이 미리 지정되어 있어야 한다.</dd>
<dd>라디오버튼에 checked 혹은 checked="checked"를 추가하면 해당 라디오버튼은 체크된 상태가 된다.
2개를 체크해도 1개만 체크됨</dd>
<dd>
<input type="radio" name="job" value="it" checked> 개발팀
<input type="radio" name="job" value="hr"> 인사팀
<input type="radio" name="job" value="sec"> 보안팀
<input type="radio" name="job" value="fi"> 총무부
</dd>
<dt>type="checkbox"</dt>
<dd>복수 개 선택가능한 체크박스를 생성한다.</dd>
<dd>체크박스는 value속성으로 값이 미리 지정되어 있어야 한다.</dd>
<dd>체크박스에 checked 혹은 checked="checked"를 추가하면 해당 체크박스는 체크된 상태가 된다.</dd>
<dd>
<input type="checkbox" name="skill" value="java" checked>자바
<input type="checkbox" name="skill" value="python">파이썬
<input type="checkbox" name="skill" value="oracle" checked="checked">오라클
<input type="checkbox" name="skill" value="spring">스프링
<input type="checkbox" name="skill" value="vue">vue
<input type="checkbox" name="skill" value="react">리액트
</dd>
<dt>type="file"</dt>
<dd>첨부파일 선택필드를 생성한다.</dd>
<dd>첨부파일 선택필드에서는 value속성으로 값을 설정할 수 없다. (보안문제) </dd>
<dd><input type="file" name="file"></dd>
<dt>type="number"</dt>
<dd>숫자만 입력가능한 입력필드를 생성한다. </dd>
<dd>숫자만 입력가능하고, 증가/감소 화살표가 표시된다.</dd>
<dd>value, step, min, max 속성으로 각각 초기값, 증감값, 최소값, 최대값을 지정할 수 있다.</dd>
<dd><input type="number" name="amount" value="10" step="10" min="0" max="100"></dd>
<dt>type="email"</dt>
<dd>이메일 입력필드를 생성한다. 입력값을 서버로 제출할 때 유효한 이메일 형식이 아니면 오류를 표시한다.</dd>
<dd><input type="email" name="useremail"></dd>
<dt>type="datetime-local"</dt>
<dd>날짜와 시간을 입력하는 입력필드를 생성한다. </dd>
<dd>value 속성으로 날짜와 시간을 지정할 때는 "2022-11-03T01:43"과 같은 형식으로 지정한다.</dd>
<dd><input type="datetime-local" name="tiketing" value="2022-11-03T01:43"></dd>
<dt>type="hidden"</dt>
<dd>화면에 표시되지 않는 숨김 입력필드를 생성한다. </dd>
<dd>숨김필드를 정의할 때는 name속성과 value속성을 지정해야 한다.
(화면에 표시되지 않기 때문에 사용자가 값을 입력할 수 없으므로, 값이 미리 설정되어 있어야 한다.)</dd>
<dd><input type="hidden" name="page" value="1"></dd>
<dt>type="reset"</dt>
<dd>폼입력값을 초기상태로 리셋하는 리셋버튼을 생성한다.</dd>
<dd><input type="reset" value="초기상태로 리셋"></dd>
<dt>type="submit"</dt>
<dd>폼입력값을 서버로 제출하는 제출버튼을 생성한다. </dd>
<dd><input type="submit" value="서버로 제출"></dd>
</dl>
</form>
</body>
</html>
* select 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>select 태그</h1>
<form method="post" action="register.jsp">
<dl>
<dt>셀렉트 박스</dt>
<dd>select 태그에 name속성으로 지정된 이름과 옵션에서 선택한 값의 쌍이 서버로 제출된다. </dd>
<dd>옵션태그에 value속성이 정의되어 있지 않으면 옵션태그의 콘텐츠가 서버로 제출되는 값이 된다.</dd>
<dd>아래의 셀렉트박스는 test1 = 값1/값2/값3 이 서버로 제출</dd>
<dd>
<select name="test1">
<option>값1</option> <!-- test1 = 값1/값2/값3 이 서버로 제출 -->
<option>값2</option>
<option>값3</option>
</select>
</dd>
<dt>셀렉트 박스</dt>
<dd>옵션태그에 value속성이 정의되어 있으면 value 속성으로 지정된 값이 서버로 제출되는 값이 된다.</dd>
<dd>아래의 셀렉트박스는 test2 = v1/v2/v3 이 서버로 제출 (값123은 그냥 화면에 표시되는 글자)</dd>
<dd>
<select name="test2">
<option value="v1">값1</option> <!-- test2 = v1/v2/v3 이 서버로 제출 -->
<option value="v2">값2</option>
<option value="v3">값3</option>
</select>
</dd>
<dt>옵션그룹이 있는 셀렉트박스</dt>
<dd>
<select name="dept">
<optgroup label="공과대학">
<option> 컴퓨터공학과</option>
<option> 기계공학과</option>
<option> 전기공학과</option>
<option> 전자공학과</option>
<option> 환경공학과</option>
</optgroup>
<optgroup label="인문대학">
<option> 국어국문학과</option>
<option> 영어영문학과</option>
<option> 사회학과</option>
<option> 역사학과</option>
<option> 철학과</option>
</optgroup>
<optgroup label="예술대학">
<option> 음악학과</option>
<option> 무용학과</option>
</optgroup>
</select>
</dd>
<dt>옵션 선택하기, 비활성화하기</dt>
<dd>option태그에 selected 혹은 selected="selected"를 지정하면 해당 옵션이 미리 선택되어 있다.</dd>
<dd>option태그에 disabled 혹은 disabled="disabled"를 지정하면 해당 옵션을 선택할 수 없다.</dd>
<dd>select태그에 disabled 혹은 disabled="disabled"를 지정하면 select 박스 전체를 선택할 수 없다.</dd>
<dd>
<select name="city" disabled>
<option>서울특별시</option>
<option>인천광역시</option>
<option selected>부산광역시</option>
<option>대전광역시</option>
<option>대구광역시</option>
<option>광주광역시</option>
<option>울산광역시</option>
<option disabled>평양특별시</option>
</select>
</dd>
<dt>select 박스 예</dt>
<dd>
<select name="career">
<option value="" selected disabled> -- 경력사항을 선택하세요 -- </option>
<option value="0"> 신입 </option>
<option value="1"> 1년 이상 </option>
<option value="2"> 3년 이상 </option>
<option value="5"> 5년 이상 </option>
<option value="7"> 7년 이상 </option>
<option value="10"> 10년 이상 </option>
</select>
</dd>
</dl>
<input type="submit" value="제출">
</form>
</body>
</html>
* textarea 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>textarea 태그</h1>
<form>
<dl>
<dt>textarea 태그</dt>
<dd>rows속성은 입력행의 개수, cols는 컬럼 수를 지정한다.</dd>
<dd><textarea name="memo1" cols="100" rows="3"></textarea></dd>
<dd><textarea name="memo1" cols="50" rows="6"></textarea></dd>
<dt>textarea 태그</dt>
<dd>textarea 태그는 반드시 여는태그와 닫는태그를 같이 작성해야 한다.</dd>
<dd><textarea name="memo2"></textarea></dd>
<dt>textarea 태그의 값</dt>
<dd>textarea의 값은 value가 아닌 여는태그와 닫는태그 사이에 값을 적는다. </dd>
<!-- <dd><textarea name="memo3" value="안녕하세요"></textarea></dd> -->
<dd><textarea name="memo3">안녕하세요</textarea></dd>
<dt>textarea 비활성화와 읽기전용 적용</dt>
<dd><textarea name="memo4" readonly>안녕하세요</textarea></dd>
<dd><textarea name="memo5" disabled>안녕하세요</textarea></dd>
</dl>
</form>
</body>
</html>
2-5. 요청방식
1) GET 방식 요청
1. 주소창에 주소를 입력해서 요청하는 것
2. 링크를 클릭해서 요청하는 것
3. 검색어를 입력하고 검색버튼 클릭하는 것
(데이터의 흐름 : 클라이언트 <- 서버 )
* <form> 태그에서 <form method="GET">으로 지정하거나 <form>이라고 적으면 -> GET 요청
2) POST 방식 요청
1. 회원가입폼에서 내 정보를 입력하고 등록버튼을 클릭한 경우
2. 글을 등록할때 텍스트/사진/동영상을 처무하고 등록하는 경우
(데이터의 흐름 : 클라이언트 -> 서버)
* <form> 태그에서 <form method="POST"> 으로 지정하는 경우에만 -> POST 요청
※ POST 방식에서 button 버튼 주의 !!
<form method="post" action="order.jsp">
<button>버튼1</button> --> 폼입력값을 서버로 제출
<button type="submit">버튼2</button> --> 폼입력값을 서버로 제출
<button type="button">버튼3</button> --> 폼입력값을 서버로 제출하지 않는다. (주소검색을 위한 팝업창 가능)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>form 태그</h1>
<h2>요청방식의 지정</h2>
<h3>GET 방식의 요청</h3>
<p>GET 방식의 요청은 method="get"으로 지정한다.</p>
<p>GET 방식의 요청은 서버로 제출되는 값이 url의 ?뒤에 붙여져서 서버로 전달된다.</p>
<p>GET 방식의 요청은 서버로 제출되는 값의 길이에 제한이 있다.</p>
<p>GET 방식의 요청은 첨부파일을 서버로 제출할 수 없다. .</p>
<form method="get" action="search.jsp">
<select name="opt">
<option value="title"> 제목 </option>
<option value="writer"> 저자 </option>
<option value="publish"> 출판사 </option>
</select>
<input type="text" name="keyword">
<input type="submit" value="검색">
</form>
<h3>POST 방식의 요청</h3>
<p>POST 방식의 요청은 method="post"으로 지정한다.</p>
<p>POST 방식의 요청은 서버로 제출되는 값이 HTTP 요청 메세지의 body부에 포함되어 전달된다.</p>
<p>POST 방식의 요청은 서버로 제출되는 값의 길이에 제한이 없다.</p>
<p>POST 방식의 요청은 첨부파일로 서버로 제출할 수 있다.</p>
<p>POST 방식의 요청은 서버로 전달되는 값을 요청메세지의 바디부에 담아서 서버로 보내기 때문에
웹브라우저의 주소창에 값이 표시되지 않는다.
(아이디, 비밀번호가 주소창에 표시되는 것 방지 -> get이 아닌 post 사용)
</p>
<form method="post" action="login.jsp">
<input type="text" name="userid">
<input type="password" name="userpwd">
<input type="submit" value="로그인">
<button>버튼1</button>
<button type="submit">버튼2</button>
<button type="button">버튼3</button>
</form>
</body>
</html>
