반응형
1. 입력폼 태그와 하이퍼링크 태그의 차이점
1) 입력폼 태그 : <form>
- submit이벤트 발생 시 동작됨
- 서버에게 값 전달할 때 많이 사용 - 특히 사용자 입력값
- GET 방식으로 요청 : 쿼리스트링으로 전달 (= URL주소로 값이 전달됨)
- POST 방식으로 요청 : (오직form만이 가능) : 리퀘스트 메세지(Request Message)의 몸체부(body)에 저장하여 전달
- 물론 사용자 입력값을 받지 않고 , 특정 값을 전달하고 싶을 수도 있음
- type = "hidden" 이용
- 왜? 자바프로그램에서 사용한 결과값을 다른 프로그램에게 주고 싶어서
2) 하이퍼링크 태그 : <a>
- click이벤트 발생 시 동작됨
- 단순히 연결된 링크에 들어갈 때 많이 사용
- GET 방식으로 요청 : 쿼리스트링으로 전달 (= URL주소로 값 전달할 수 있음)
- 서버에게 특정 값 전달도 가능
a 태그 사용
- 클릭 이벤트를 이용하여 웹프로그램을 GET 방식으로 요청 가능
- href 속성값으로 요청할 웹프로그램의 URL 주소를 설정함 : ex) href="19_form.html"
- 태그내용(텍스트 또는 이미지)를 클릭한 경우 웹프로그램을 요청하여 처리결과를 응답받아 출력함 - 페이지 이동
- 클라이언트 브라우저 주소창의 URL 주소가 변경됨
a 태그에 값 전달
- 요청 웹프로그램에 값을 전달할 경우 직접 질의문자열(QueryString)을 작성함
- URL 주소는 영문자,숫자,일부 특수문자로만 작성 가능하므로 직접 질의문자열을 작성 하여 값을 전달할 경우
영문자,숫자,일부 특수문자를 제외한 문자값은 정상적인 전달 불가능 - 전달은 되나 특히 한글같은 경우 인식이 안되어 글자가 다 깨짐
- 기본적으로 <a> 이용시 href는 기본속성값이 ISO-8859-1(서유럽)이기 때문
- 하지만 영문자,숫자,일부 특수문자를 제외한 문자값은 부호화 처리하면 정상적인 전달 가능 - JavaScript 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>form 태그</h1>
<hr>
<!-- 요청할 웹프로그램 대신 웹문서 만들어 사용해보기 : 원래는 웹문서가 아닌 웹프로그램으로 만들어야함 -->
<p>입력값을 전달받아 처리하는 페이지 - 웹프로그램</p>
<!-- <p><a href="19_form.html?name=홍길동">입력페이지 이동</a></p> --> <!--ERROR-->
<p><a href="19_form.html?name=honggildong">입력페이지 이동</a></p>
</body>
</html>
2. <form> 태그
- 웹프로그램을 요청하여 사용자로부터 입력받은 값을 전달하기 위한 태그
- 하위태그로 입력태그를 1개 이상 작성하고,
- form 태그를 실행하기 위한 제출이벤트(Submit Event)를 발생시키는 태그를 작성
1) 입력태그
- 사용자로부터 값을 입력받기 위한 태그
- 1개 이상 필수
- <input>, <textarea>, <select> 등
2) 제출이벤트(Submit Event)를 발생시키는 태그
- 필수
- <input>, <button> 등
- 제출 이벤트(Submit Event)에 의해 form 태그 동작되어 브라우저의 주소창이 action 속성값으로 설정된 URL 주소로 변경되어 웹프로그램을 요청하며, 입력태그에 입력된 입력값을 전달
- button 태그의 type 속성값을 [submit]으로 설정하면 버튼을 클릭한 경우 제출 이벤트 발생
3) action 속성
- form 태그로 요청할 웹프로그램(Servlet)의 URL 주소를 속성값으로 설정
- URL 주소는 절대경로, 상대경로 작성 다 가능
4) method 속성
- 웹프로그램의 요청방식(GET - 기본 또는 POST)을 속성값으로 설정
- 웹프로그램 요청방식에 따라 사용자 입력값을 전달하는 방식이 다름
- GET 방식
- 사용자 입력값을 URL 주소의 질의문자열(QueryString)으로 전달
- 보안이 필요 없는 소량의 값을 전달할 때 사용하는 요청방식
- POST 방식
- 사용자 입력값을 리퀘스트 메세지(Request Message)의 몸체부(Body)에 저장하여 전달
- 보안이 필요한 값 또는 대량의 값을 전달할 때 사용하는 요청방식
- 리퀘스트 메세지
- 웹프로그램 요청시 클라이언트의 정보를 저장하여 전달하기 위한 메세지(객체)
- 머릿부(Header)와 몸체부(Body)로 구성되며 GET 방식으로 요청할 경우 몸체부는 항상 비어있는 상태
5) enctype 속성
- 사용자 입력값을 전달하기 위한 파일형식(MimeType)을 속성값으로 설정
- application/x-www-form-urlencoded(기본)
- 사용자 입력값을 인코딩 처리된 문자 데이타로 전달하기 위한 속성
- multipart/form-data
- 사용자 입력값을 원시 데이타로 전달하기 위한 속성값 - 파일을 전달할 경우 사용
- 파일의 내용은 인코딩처리되어있으면 안됨, 무조건 POST방식만 가능
6) 예시
19_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>form 태그</h1>
<hr>
<!--<form action="19_action.html" method="get" enctype="application/x-www-form-urlencoded">-->
<form action="19_action.html" method="post" enctype="application/x-www-form-urlencoded">
<!-- 입력태그 : 사용자로부터 값을 입력받기 위한 태그 - input, textarea, select 등 -->
아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="password" name="passwd"><br>
<button type="submit">로그인</button>
<!-- <input type="submit" value="로그인"> -->
</form>
</body>
</html>
3. 입력 폼 태그 - <input>
- 사용자로부터 값을 입력받기 위한 태그 - 입력태그
type속성 (필수)
- 입력값의 형식을 속성값으로 설정
name속성 (권장)
- 태그의 이름을 속성값으로 설정
- 웹프로그램에게 값을 전달할 때 사용하는 식별자 역할 수행 , 중복 가능이지만, 중복으로 이름짓기는 비권장
value속성
- 입력태그의 초기값을 속성값으로 설정
size속성
- 입력태그의 크기(폭)을 속성값으로 설정
maxlength속성
- 입력태그에 입력 가능한 최대 문자 갯수를 속성값으로 설정
autofocus속성(HTML5)
- 입력태그에 입력 초점(Focus)을 위치 시키는 속성 , 속성값 생략 가능
required속성(HTML5)
- 입력태그에 필수 입력값을 설정하기 위한 속성 , 속성값 생략 가능
- required속성이 설정된 입력태그에 입력값이 없는 경우 웹프로그램 요청 불가능 (에러 발생)
placeholder속성(HTML5)
- 입력태그의 입력값에 대한 설명을 속성값으로 설정
readonly속성
- 입력태그를 읽기 전용으로 설정하는 속성 - 사용자 입력값 없이 전달 , 속성값 생략 가능
- ex) 회원가입 시 주소 입력창! (왜? 옆에 버튼 클릭해 주소를 찾을 수 있도록하기 위해서)
disabled속성
- 입력태그를 비활성화 처리하는 속성 - 사용자 입력도 안받고, 전달도 불가능 , 속성값 생략 가능
checked속성 (radio 또는 checkbox)
- 우선 선택 설정 속성 , 속성값 생략 가능
min속성(HTML5)
- 입력태그의 최소 입력값을 속성값으로 설정
max속성(HTML5)
- 입력태그의 최대 입력값을 속성값으로 설정
1) type속성의 속성값들
hidden : 사용자로부터 값을 입력받지 않고 요청 웹프로그램에게 필요한 값만을 전달하기 위해 사용
<form action="#" method="post">
<input type="hidden" name="num" value="1000">
<button type="submit">제출</button>
</form>
text : 사용자로부터 문자값을 입력받아 전달
<!-- size="10" : 10byte (문자10개 입력받을 수 있는 폭) -->
<!-- maxlength="20" : 20byte (최대 문자20개까지 입력가능) -->
<form action="#" method="post">
<p>아이디 : <input type="text" name="id" size="10" maxlength="20" autofocus="autofocus" required="required"></p>
<button type="submit">제출</button>
</form>
<!-- readonly : 입력태그를 읽기 전용으로 설정하는 속성 - 사용자 입력값 없이 전달 -->
<form action="#" method="post">
<p>이름 : <input type="text" name="name" value="홍길동" readonly="readonly"></p>
<button type="submit">제출</button>
</form>
password : 사용자로부터 문자값을 입력받아 전달 - 입력값이 특정문자로 변환되어 표시됨
<form action="#" method="post">
<p>비밀번호 : <input type="password" name="passwd" placeholder="형식에 맞는 비밀번호 입력"></p>
<button type="submit">제출</button>
</form>
radio : name 속성값이 같은 입력태그 중 하나를 선택하여 전달
<form action="#" method="post">
<!-- gender속성인 남자, 여자 중 딱 하나만 선택 가능 -->
<p>성별 :
<input type="radio" name="gender" value="남자">남자
<input type="radio" name="gender" value="여자" checked="checked">여자
</p>
<button type="submit">제출</button>
</form>
checkbox : name 속성값이 같은 입력태그 중 1개 이상을 선택하여 전달
<form action="#" method="post">
<!-- hobby 속성인 독서 등산 낚시 게임 중 하나 이상 선택가능 -->
<p>취미 :
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="등산">등산
<input type="checkbox" name="hobby" value="낚시">낚시
<input type="checkbox" name="hobby" value="게임" checked="checked">게임
</p>
<button type="submit">제출</button>
</form>
file : 파일을 입력받아 전달
<form action="#" method="post">
<p>사진 : <input type="file" name="profile"></p>
<button type="submit">제출</button>
</form>
email(HTML5) : 이메일을 입력받아 전달 - 이메일 형식에 대한 검증 처리
<form action="#" method="post">
<p>이메일 : <input type="email" name="email"></p>
<button type="submit">제출</button>
</form>
number(HTML5) : 숫자 형식의 문자값을 입력받아 전달 (증가 또는 감소 버튼 제공)
- 숫자 형식외의 값은 입력 불가능(최소값 또는 최대값 검증 처리)
<form action="#" method="post">
<p>나이 : <input type="number" name="age" min="1" max="200"></p>
<button type="submit">제출</button>
</form>
tel(HTML5) : 전화번호 형식의 문자값을 입력받아 전달
- 스마트기기의 입력패드 자동 변경, PC와 상관없음
- 웹앱(스마트기기에서사용하는 웹)을 만들 때 사용
<form action="#" method="post">
<p>전화번호 : <input type="tel" name="phone"></p>
<button type="submit">제출</button>
</form>
url(HTML5) : URL 주소 형식의 문자값을 입력받아 전달
- 스마트기기의 입력패드 자동 변경, PC와 상관없음
- 웹앱(스마트기기에서사용하는 웹)을 만들 때 사용
<form action="#" method="post">
<p>SNS : <input type="url" name="sns"></p>
<button type="submit">제출</button>
</form>
search(HTML5) : 검색 관련 문자값을 입력받아 전달
- 스마트기기의 자동완성 기능 사용 가능, PC와 상관없음
- 웹앱(스마트기기에서사용하는 웹)을 만들 때 사용
<form action="#" method="post">
<p>검색 : <input type="search" name="keyword"></p>
<button type="submit">제출</button>
</form>
color(HTML5) : 색을 입력받아 색상값(#RRGGBB) 전달 - 색 선택 가능
<form action="#" method="post">
<p>좋아하는 색 : <input type="color" name="color"></p>
<button type="submit">제출</button>
</form>
range(HTML5) : 등급을 입력받아 전달 - min속성값과 max속성값으로 범위 설정
<form action="#" method="post">
<p>실력 : 하 <input type="range" name="grade" min="1" max="5">상</p>
<button type="submit">제출</button>
</form>
date(HTML5) : 날짜(년-월-일)를 입력받아 전달 - 달력을 이용하여 날짜 입력 가능
<form action="#" method="post">
<p>생년월일 : <input type="date" name="birthday"></p>
<button type="submit">제출</button>
</form>
time(HTML5) : 시간({오전|오후}시:분)을 입력받아 전달 - 시계를 이용하여 시간 입력 가능
<form action="#" method="post">
<p>기상시간 : <input type="time" name="uptime"></p>
<button type="submit">제출</button>
</form>
datetime-local(HTML5) : 날짜(년-월-일)와 시간({오전|오후}시:분)을 입력받아 전달 - 달력과 시계 이용
<form action="#" method="post">
<p>알람 : <input type="datetime-local" name="alarm"></p>
<button type="submit">제출</button>
</form>
4. 제출이벤트(Submit Event)
- form 태그는 입력태그 외에 제출 이벤트(Submit Event)를 발생하는 태그가 반드시 존재
- 제출 이벤트(Submit Event)가 발생되면 form 태그가 실행되어 웹프로그램을 요청해 입력값 전달
1) type= "submit"
input 태그의 type 속성값을 [submit]을 설정하여 태그(버튼)를 클릭한 경우 이벤트 발생
<input type="submit" value="회원가입">button 태그의 type 속성값을 [submit]을 설정하여 태그(버튼)를 클릭한 경우 이벤트 발생
<button type="submit">회원가입</button>
2) type="reset"
- form 태그의 하위태그로 입력태그의 입력값을 초기화 처리하는 기능을 제공하는 초기화 태그 작성 가능
input 태그의 type 속성값을 [reset]을 설정하여 태그(버튼)를 클릭한 경우 초기화
<input type="reset" value="다시입력"> button 태그의 type 속성값을 [reset]을 설정하여 태그(버튼)를 클릭한 경우 초기화
<button type="reset">다시입력</button>
5. 입력촛점 태그 - <label>
- 입력태그의 입력촛점(InputFocus)을 제공하기 위한 태그
1) <label> 미사용
- label 태그를 사용하지 않은 경우 입력태그를 직접 선택해야만 입력촛점 제공
<h3>label 태그 미사용</h3>
<p>
이름 : <input type="text" name="name">
</p>
<p>
취미 :
<input type="checkbox" name="hobby" value="낚시">낚시
<input type="checkbox" name="hobby" value="등산">등산
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="게임">게임
</p>
2) <label> 사용
- label 태그를 사용한 경우 label 태그를 이용하여 입력태그에 입력촛점 제공 가능
<h3>label 태그 사용</h3>
<p>
<label>이름 : <input type="text" name="name"></label>
</p>
<p>
취미 :
<!-- for속성 : 입력태그의 식별자(id 속성값)를 속성값으로 설정 -->
<!-- => label 태그를 클릭할 경우 입력촛점을 제공할 입력태그를 설정 -->
<input type="checkbox" name="hobby" id="hobby1" value="낚시"><label for="hobby1">낚시</label>
<input type="checkbox" name="hobby" id="hobby2" value="등산"><label for="hobby2">등산</label>
<input type="checkbox" name="hobby" id="hobby3" value="독서"><label for="hobby3">독서</label>
<input type="checkbox" name="hobby" id="hobby4" value="게임"><label for="hobby4">게임</label>
</p>
6. 입력 폼 태그 - <textarea>
- 다수행의 문자값을 입력받기 위한 태그 - 입력태그
- 태그내용이 입력태그의 초깃값으로 설정
rows 속성
- 입력태그의 행의 갯수(크기)를 속성값으로 설정 ( = width )
cols 속성
- 입력태그의 열의 갯수(폭)를 속성값으로 설정 ( = height )
<form action="#" method="post">
<table>
<tr>
<td>장점</td>
<td><textarea rows="5" cols="80" name="good">장점이 아주 많습니다.</textarea></td>
</tr>
<tr>
<td>단점</td>
<td><textarea rows="5" cols="80" name="bad"></textarea></td>
</tr>
<tr>
<td colspan="2"><button type="submit">입력완료</button></td>
</tr>
</table>
</form>
7.입력 폼 태그 - <select>
- 목록에서 값을 선택하여 입력받기 위한 태그 - 입력태그
- 기본적으로 단일값을 선택하여 전달 가능하지만 속성에 의해 다수값 선택 가능
하위태그
- <option> (필수)
- <optgroup> (선택)
multiple속성
- 다수의 목록을 선택하기 위한 속성 - 속성값 생략 가능
- 다수 선택할 때는 [ctrl] 누르고 선택
<optgroup> 태그
- option 태그들을 하나의 그룹으로 표현하기 위한 태그
- label 속성 : 그룹의 이름을 속성명으로 설정
<option> 태그
- 선택 목록에 대한 값을 제공하기 위한 태그
- selected 속성 : 우선 선택 속성, 속성값 생략 가능
<form action="#" method="post">
<label for="class">학과</label>
<!-- <select id="class" name="class" multiple> -->
<select id="class" name="class">
<optgroup label="공과대">
<option value="arch">건축공학과</option>
<option value="machinic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</optgroup>
<optgroup label="인문대">
<option value="history">사학과</option>
<option value="lang">어문학과</option>
<option value="phlio">철학과</option>
</optgroup>
</select>
<button type="submit">입력완료</button>
</form>
8. 입력태그의 값을 목록으로 제공 - <datalist>
- input 태그에 입력 가능한 값을 목록으로 제공하기 위한 태그
- 하위태그 : <option>
list 속성
- datalist 태그의 식별자를 속성값으로 설정
- input 태그에 datalist 태그의 목록을 입력값으로 제공
<form action="#" method="post">
<label for="subject">좋아하는 과목 : </label>
<input type="text" name="subject" id="subject" list="subjectList">
<datalist id="subjectList">
<option>JAVA</option>
<option>JSP</option>
<option>SPRING</option>
</datalist>
<button type="submit">입력완료</button>
</form>
9. 입력태그의 영역구분 - <fieldset>
- 입력태그의 영역을 구분하기 위한 태그
하위태그
- <legend> , <input>, <select> ,<textarea> 등
<legend> 태그
- 입력태그의 영역에 대한 제목을 제공하기 위한 태그
<h3>회원가입</h3>
<form action="#" method="post">
<fieldset>
<legend>인증정보</legend>
<ul>
<li>아이디 : <input type="text" name="id"></li>
<li>비밀번호 : <input type="password" name="passwd"></li>
</ul>
</fieldset>
<fieldset>
<legend>개인정보</legend>
<ul>
<li>이름 : <input type="text" name="name"></li>
<li>이메일 : <input type="text" name="email"></li>
<li>전화번호 : <input type="text" name="phone"></li>
</ul>
</fieldset>
<div>
<button type="submit">회원가입</button>
<button type="reset">다시입력</button>
</div>
</form>
반응형
'web > html' 카테고리의 다른 글
| [css] 9. 뷰포트 (0) | 2024.05.22 |
|---|---|
| [html] 6. 하이퍼링크 태그 | 기타 태그 | 문장강조 태그 | 인용문출력 태그 | 멀티미디어 태그 | 이미지설명제공 태그 (2) | 2024.04.29 |
| [html] 5. 시맨틱태그 | 텍스트태그 | entity | 박스태그 | 이미지태그 | 리스트태그 | 테이블태그 (0) | 2024.04.28 |
| [html] 4. 기본 태그 | head | body (1) | 2024.04.28 |
| [html] 3. 웹 통신 프로토콜 (HTTP/TCP/IP) (0) | 2024.04.27 |
