웹 브라우저(입력 칸) → 데이터 / 결과 ← 서버
<form> 태그
: 폼에 포함되는 다양한 입력 양식 태그들을 감싸줌
•
<action></action>
: 데이터를 보낼 URL을 지정
•
<method></method> *중요*
: 보내는 방식을 지정
- 값 → get, post
1.
get : 데이터를 URL 끝에 붙여 눈에 보이게 보냄 (데이터 head에) ⇒ 데이터 조회만을 목적으로 할 때
2.
post : 데이터를 URL에 적지 않고 내부에 숨겨서 보냄 (데이터 body에) ⇒ 서버에 있는 데이터를 쓰거나 수정 및 삭제 할 때
•
<input></input>
: 사용자에게 입력을 받기 위해 사용되는 태그, 빈 태그
- <input type="text">: <input> 태그의 종류를 결정
- <input type="text" name="id"> : <input> 태그 중 같은 타입과 구분되는 이름을 결정
- placeholder="아이디를 입력하세요" : input에 아무 값도 입력되지 않았을 때 나타나는 텍스트
- value="yeojeong" : 실제 할당되는 값, 우리가 데이터를 넣으면 이 속성에 값이 들어감, 초기값처럼 둘 수 있음
•
<label></label>
: 해당하는 라벨을 클릭 시 <input> 태그가 활성화 됨
- <input id="password">
- <label for="password">비밀번호: </label>
•
<div></div>
: 태그들을 구분짓고 나누기 위해 사용되는 태그, division의 약자
•
<select></select>
: 여러 개의 선택지를 제시하고 싶을 때 씀
- <select name="gender"> : <input> 태그의 name속성과 동일하게 작동
- <option value="male">남성</option> : <input> 태그에서 입력한 값과 동일한 역할
•
<textarea></textarea>
: 한 번에 많은 글을 입력받을 때 사용
•
<button></button>
: <input> 태그의 버튼 타입과 동일하게 버튼을 생성
- <input type="button" value="회원가입"> = <button type="submit">회원가입</button>
- <button type="submit">
<img src="강아지사진">
</button>
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>여정이입니당</title>
</head>
<body>
<h2>회원가입</h2>
<form action="my-app" method="get">
<div>
<label for="userid">아이디: </label>
<input type="text" name="id" placeholder="아이디를 입력하세요"></input>
</div>
<div>
<label for="password">비밀번호: </label>
<input type="password" name="password" placeholder="비밀번호를 입력하세요"></input>
</div>
<div>
<label for="gender">성별: </label>
<select name="gender" id="gender">
<option value="male">남성</option>
<option value="female">여성</option>
</select>
</div>
<div>
<label for="job">직업: </label>
<select name="job" id="job">
<option value="student">학생</option>
<option value="teacher">선생님</option>
<option value="etc">기타</option>
</select>
</div>
<div>
<label for="introduce">자기소개: </label>
<textarea name="introduce" cols="30" rows="20" placeholder="자기소개를 입력하세요."></textarea>
</div>
<button type="submit">제출</button>
<button type="reset">리셋</button>
</form>
</body>
</html>
HTML
복사