<form> 태그
폼에 포함되는 다양한 입력 양식 태그들을 감싸줌
1.
action : 데이터를 보낼 url을 지정
2.
method : 보내는 방식을 지정함
값 - get, post
get : 브라우저에서 폼에 입력한 데이터를 url 끝에 붙여 눈에 보이게 보냄(엽서카드랑 비슷) - 데이터 조회 목적(검색)
post : 데이터를 url에 적지 않고 내부에 숨겨서 보냄(편지봉투와 비슷) - 서버에 있는 데이터를 쓰거나, 수정, 삭제할 때 주로 사용(게시물 작성)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>지수입니다.</title>
</head>
<body>
<h2>회원가입</h2>
<form action="my-app" method="get">
</form>
</body>
</html>
HTML
복사
•
<input> 태그 : 사용자에게 입력을 받기 위해 사용되는 태그, 빈 태그
<input type="text" name="id"> : <input> 태그 중 같은 타입과 구분되는 이름을 결정
placeholder="아이디를 입력하세요" : input에 아무 값도 입력되지 않았을 때 나타나는 텍스트
value="jisoo" : 실제 할당되는 값, 우리가 데이터를 넣으면 이 속성에 값이 들어감, 초기값처럼 둘 수 있음
•
<label> 태그 : 해당하는 라벨을 클릭 시 <input> 태그가 활성화 됨
•
<div> 태그 : 태그들을 구분 짓고 나누기 위해 사용되는 태그, division의 약자
•
<select> 태그 : 여러 개의 선택지를 제시하고 싶을 때 씀
<select name="gender'> : <input> 태그의 name 속성과 동일하게 작동
<option value="male">남성</option> : <input> 태그에서 입력한 값과 동일한 역할
•
<textarea> 태그 : 한 번에 많은 글을 입력 받을 때 사용, 종료태그 존재
•
<button> 태그 : <input> 태그의 버튼 타입과 동일하게 버튼을 생성
<!DOCTYPE html>
<html lang="en">
<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" id="userid" name="id" placeholder="아이디를 입력하세요." value="snow">
</div>
<div>
<label for="password">비밀번호: </label>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요.">
</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" id="introduce" cols="30" rows="20" placeholder="자기소개를 입력하세요."></textarea>
</div>
<button type="submit">제출</button>
<button type="reset">리셋</button>
</form>
</body>
</html>
HTML
복사