정보를 입력하는 태그(아이디, 비밀번호 등) ▶ 정보를 만들어서 보낸다
✅ get: 데이터 조회 요청, 호출
✅ post: 데이터 생성, 변경, 삭제 요청
서버가 받는 방식은 get이든 post든 똑같다
패스워드 등 개인정보가 담긴 것은 post 방식으로 사용 굳이 따지자면 post도 아니긴하다고 한다
대용량일 때 post를 사용한다
<!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>form</title>
</head>
<body>
<form action="./009.html" method="get">
<input type="text" name="id" id="">
<input type="password" name="pw" id="">
<button type="submit">로그인</button>
</form>
</body>
</html>
아이디, 비밀번호를 타이핑하면 url이 변하는 것을 확인할 수 있다 ▶ 이게 get 방식!
name이 key 값이며, 입력한 문자는 value 값
🔽 query=string
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ href │
├──────────┬──┬─────────────────────┬────────────────────────┬───────────────────────────┬───────┤
│ protocol │ │ auth │ host │ path │ hash │
│ │ │ ├─────────────────┬──────┼──────────┬────────────────┤ │
│ │ │ │ hostname │ port │ pathname │ search │ │
│ │ │ │ │ │ ├─┬──────────────┤ │
│ │ │ │ │ │ │ │ query │ │
" https: // user : pass @ sub.example.com : 8080 /p/a/t/h ? query=string👈 #hash "
│ │ │ │ │ hostname │ port │ │ │ │
│ │ │ │ ├─────────────────┴──────┤ │ │ │
│ protocol │ │ username │ password │ host │ │ │ │
├──────────┴──┼──────────┴──────────┼────────────────────────┤ │ │ │
│ origin │ │ origin │ pathname │ search │ hash │
├─────────────┴─────────────────────┴────────────────────────┴──────────┴────────────────┴───────┤
│ href │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✅ #hash: 문서 내의 아이디로 이동한다
✅ get 방식 유의사항
: 304(게시물 번호)를 305로 변경하면 다음 게시물로 넘어가는데, 비밀 게시글이라도 보일 수 있어서 조심해야 한다.
form 속성
<form action="./009.html" method="get"></form>
action: 입력 값을 전송할 페이지
method: 데이터 전송 방법
input 타입
<form action="./009.html" method="get">
<input type="text" name="id" id="">
👆 input은 입력할 수 있는 공간을 다양하게 만들어주는 역할이다!
<input type="password" name="pw" id="">
<button type="submit">로그인</button><br>
<input type="text"><br>
<input type="password"><br> 👈 플레인 text는 암호화 되지 않는다
<input type="date"><br>
<input type="time"><br>
<input type="range"><br> 👈 값을 설정하는 것은 자바스크립트로!(요소가 3개 정도 합쳐져 있음)
<input type="color"><br>
<input type="radio"><br> 👈 ~중 하나. 다중 선택 불가능. 다른 쪽을 체크하면 다른 쪽 값이 빠짐
<input type="checkbox"><br> 👈 ~중 여러개 가능
<input type="file"><br>
<textarea name="name" rows="8" cols="80"></textarea>
</form>
*required
: 입력 폼에 아무것도 입력하지 않을 시 메시지 창이 뜨고 다음 단계로 진행 불가
<label for="member_id">아이디</label>
<div>
<input type="text" required placeholder="아이디 입력" 👈 id="member_id">
<button type="button">
중복확인
</button>
</div>
*placeholder
: 입력하기 전 삽입된 텍스트(힌트) ▶ 입력 후 사라지고 입력 데이터로 변경
*range
: 슬라이드 바 형식의 form
<form>
<fieldset oninput="볼륨.value=parseInt(볼륨바.value)">
<legend>볼륨바</legend>
<input id="볼륨바" name="bar" type="range" title="범위선택">
<output name="볼륨" title="볼륨표시">0</output>
</fieldset>
</form>
fieldset: form 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용
legend: fieldset 태그 바로 뒤에 위치하며 폼 그룹의 목적을 나타내는 제목(캡션)을 의미
output: 스크립트 등 계산 결과나 사용자 액션의 결과를 나타낼 때 사용
*progress
: 진행 정도 나타내는 바
<form>
<fieldset>
<legend>Programming Skill</legend>
<label for="html">HTML</label>
<progress id="html" value="0.85" max="1">85%</progress><br>
<label for="css">CSS</label>
<progress id="css" value="0.85" max="1">85%</progress><br>
<label for="javascript">Javascript</label>
<progress id="javascript" value="0.35" max="1">35%</progress><br>
</fieldset>
</form>
✅ radio와 checkbox는 하나로 묶어 주는 것(동일한 name)이 중요하다!
label
input에도 무엇을 입력해야 하는지 타이핑할 수 있지만, label 요소를 사용는게 시멘틱하다
1. <label for="one">이름 :<input type="text" name="name" id="one"></label>
2. <label for="myName">이름 : </label>
<input type="text" name="name" id="myName">
for
for는 id와 mapping된다
텍스트를 눌렀을때 커서가 mapping된 id로 간다
select
<form action="./009.html" method="get">
<select name="device" id="myDevice">
<option value="iphone">아이폰</option>
<option value="galaxy">갤럭시폰</option>
<option value="ㅜㅜ">LG폰</option>
</select>
<button type="submit">선택</button><br>
</form>
✅ 서버로 전달되는 값: name, value
- input의 경우 입력한 값(sung2/1234)을 보여주고,
file:///D:/coding/likelion/FrontendSchool/20211102/prac/011.html?아이디=sung2&패스워드=1234
- select의 경우 value 값(iphone)을 보여준다
D:/coding/likelion/FrontendSchool/20211102/prac/0010.html?device=iphone
<!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>form복습</title>
</head>
<body>
<form action="./010.html" method="get">
<label for="one">이름 : </label>
<input type="text" name="id" id="one">
<label for="two">패스워드 : </label>
<input type="password" name="pw" id="two">
<button type="submit">로그인</button><br>
</form>
</body>
</html>
✅ label은 input이 뭔지 알려주는 것이다(얘는 이름이다, 얘는 패스워드다)
✅ type은 꼭 작성해야 한다
✅ 플레인 텍스트는 한 번 더 감싸주는 작업이 필요하다
'HTML·CSS' 카테고리의 다른 글
| [HTML] table 태그 (0) | 2022.02.04 |
|---|---|
| [CSS] 단위 (0) | 2022.02.04 |
| [HTML] Emmet (2) | 2022.02.04 |
| [HTML] 미디어 태그 (0) | 2022.02.04 |
| [CSS] 선택자 (0) | 2022.02.03 |