Form
- 사용자로부터 입력을 수집하기 위한 양식을 정의할 때 사용된다.
- input 태그들의 조합을 통해 데이터를 입력받는다.
- 주요 속성으로는
- action : 데이터를 전송할 서버의 URL을 지정한다.
- method : 데이터를 전송할 방식을 지정한다. ex) GET, POST
- GET방식의 경우 데이터가 URL을 통해 전달된다. 기본값.
- POST 방식의 경우 데이터가 HTTP Request 본문에 포함된다.
<form action="" method="POST">
<input type="text" name="id" id="id">
<input type="password" name="pw" id="pw">
<input type="submit" value="로그인">
</form>
input
- 데이터를 입력받는 요소이며, Form 태그로로 감싸져 한번에 데이터를 전달한다.
- 주요 속성으로는
- name : 데이터는 key-value 형태로 전송되는데, key 역할을 한다.
- value : value 역할을 한다.
- type : 입력 유형을 지정한다.
- text : 일반 텍스트 입력
- submit : 제출하는 버튼을 생성한다.
- password : 패스워드 입력. 입력이 마스킹처리된다.
- checkbox : 체크박스를 생성한다. 여러 옵션을 동시에 선택 가능하다.
- radio : 라디오 버튼을 생성한다. 여러개의 옵션 중 하나만 선택 가능하다.
- 그 외에도 email, number, range, file 등 여러 입력방식이 존재한다.
- label
- input 태그와 한쌍이며, input 태그를 설명할 때 사용한다.
- input 태그의 id 속성과 label 태그의 for 속성을 일치시켜 사용한다.
<form action="" method="POST">
<label for="id">아이디 :</label>
<input type="text" name="id" id="id"><br>
<label for="pw">비밀번호 :</label>
<input type="password" name="pw" id="pw"><br>
<input type="submit" value="로그인">
</form>
- textarea
- input 태그는 아니지만, 입력을 받는데 사용된다.
- text 타입의 input과는 달리 여러 줄의 텍스트를 입력받는다.
- 주요 속성으로는
- rows : textarea 내에 얼마만큼의 row를 작성할지 지정한다.
- cols : textarea 내에 얼마만큼의 col를 작성할지 지정한다.
<form action="">
<textarea name="" id="" cols="20" rows="5"></textarea>
</form>
[실습]
- 다음 이미지와 같은 숙소 예약 페이지를 만드시오.
- 참고) action를 https://postman-echo.com/post로 작성하면 data가 어떻게 전송되는지 확인할 수 있다.
[최종 완성]
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숙소 예약</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: 20px auto;
max-width: 600px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
h1, h2, h3 {
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="file"] {
margin-bottom: 15px;
}
.checkbox-container {
margin-bottom: 15px;
}
.checkbox-container label {
display: inline-block;
margin-right: 20px;
}
.btn-container {
text-align: center;
}
.btn {
background-color: #7ebcff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.divider {
border-top: 1px solid #ccc;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>숙소 예약</h1>
<h2>신상 정보</h2>
<form>
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<label for="profile-pic">예약자 사진:</label>
<input type="file" id="profile-pic" name="profile-pic">
<div class="divider"></div>
<h2>상세 정보</h2>
<h3>선호 객실 타입</h3>
<div class="checkbox-container">
<label for="city-view"><input type="checkbox" id="city-view" name="room-type" value="도시뷰"> 도시뷰</label>
<label for="lake-view"><input type="checkbox" id="lake-view" name="room-type" value="레이크뷰"> 레이크뷰</label>
<label for="mountain-view"><input type="checkbox" id="mountain-view" name="room-type" value="마운틴뷰"> 마운틴뷰</label>
</div>
<div class="divider"></div>
<h3>동행자 정보</h3>
<label for="guests">인원수:</label>
<select id="guests" name="guests">
<option value="1">1명</option>
<option value="2">2명</option>
<option value="3">3명</option>
<option value="4">4명</option>
<option value="5">5명</option>
</select>
<div class="divider"></div>
<h2>기타</h2>
<label for="requests">요청사항:</label>
<textarea id="requests" name="requests" rows="4"></textarea>
<div class="divider"></div>
<div class="btn-container">
<button type="submit" class="btn">전송</button>
</div>
</form>
</div>
</body>
</html>
- 이미지
Form
- 사용자로부터 입력을 수집하기 위한 양식을 정의할 때 사용된다.
- input 태그들의 조합을 통해 데이터를 입력받는다.
- 주요 속성으로는
- action : 데이터를 전송할 서버의 URL을 지정한다.
- method : 데이터를 전송할 방식을 지정한다. ex) GET, POST
- GET방식의 경우 데이터가 URL을 통해 전달된다. 기본값.
- POST 방식의 경우 데이터가 HTTP Request 본문에 포함된다.
<form action="" method="POST">
<input type="text" name="id" id="id">
<input type="password" name="pw" id="pw">
<input type="submit" value="로그인">
</form>
input
- 데이터를 입력받는 요소이며, Form 태그로로 감싸져 한번에 데이터를 전달한다.
- 주요 속성으로는
- name : 데이터는 key-value 형태로 전송되는데, key 역할을 한다.
- value : value 역할을 한다.
- type : 입력 유형을 지정한다.
- text : 일반 텍스트 입력
- submit : 제출하는 버튼을 생성한다.
- password : 패스워드 입력. 입력이 마스킹처리된다.
- checkbox : 체크박스를 생성한다. 여러 옵션을 동시에 선택 가능하다.
- radio : 라디오 버튼을 생성한다. 여러개의 옵션 중 하나만 선택 가능하다.
- 그 외에도 email, number, range, file 등 여러 입력방식이 존재한다.
- label
- input 태그와 한쌍이며, input 태그를 설명할 때 사용한다.
- input 태그의 id 속성과 label 태그의 for 속성을 일치시켜 사용한다.
<form action="" method="POST">
<label for="id">아이디 :</label>
<input type="text" name="id" id="id"><br>
<label for="pw">비밀번호 :</label>
<input type="password" name="pw" id="pw"><br>
<input type="submit" value="로그인">
</form>
- textarea
- input 태그는 아니지만, 입력을 받는데 사용된다.
- text 타입의 input과는 달리 여러 줄의 텍스트를 입력받는다.
- 주요 속성으로는
- rows : textarea 내에 얼마만큼의 row를 작성할지 지정한다.
- cols : textarea 내에 얼마만큼의 col를 작성할지 지정한다.
<form action="">
<textarea name="" id="" cols="20" rows="5"></textarea>
</form>
[실습]
- 다음 이미지와 같은 숙소 예약 페이지를 만드시오.
- 참고) action를 https://postman-echo.com/post로 작성하면 data가 어떻게 전송되는지 확인할 수 있다.
[최종 완성]
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숙소 예약</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: 20px auto;
max-width: 600px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
h1, h2, h3 {
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="file"] {
margin-bottom: 15px;
}
.checkbox-container {
margin-bottom: 15px;
}
.checkbox-container label {
display: inline-block;
margin-right: 20px;
}
.btn-container {
text-align: center;
}
.btn {
background-color: #7ebcff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.divider {
border-top: 1px solid #ccc;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>숙소 예약</h1>
<h2>신상 정보</h2>
<form>
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<label for="profile-pic">예약자 사진:</label>
<input type="file" id="profile-pic" name="profile-pic">
<div class="divider"></div>
<h2>상세 정보</h2>
<h3>선호 객실 타입</h3>
<div class="checkbox-container">
<label for="city-view"><input type="checkbox" id="city-view" name="room-type" value="도시뷰"> 도시뷰</label>
<label for="lake-view"><input type="checkbox" id="lake-view" name="room-type" value="레이크뷰"> 레이크뷰</label>
<label for="mountain-view"><input type="checkbox" id="mountain-view" name="room-type" value="마운틴뷰"> 마운틴뷰</label>
</div>
<div class="divider"></div>
<h3>동행자 정보</h3>
<label for="guests">인원수:</label>
<select id="guests" name="guests">
<option value="1">1명</option>
<option value="2">2명</option>
<option value="3">3명</option>
<option value="4">4명</option>
<option value="5">5명</option>
</select>
<div class="divider"></div>
<h2>기타</h2>
<label for="requests">요청사항:</label>
<textarea id="requests" name="requests" rows="4"></textarea>
<div class="divider"></div>
<div class="btn-container">
<button type="submit" class="btn">전송</button>
</div>
</form>
</div>
</body>
</html>
- 이미지
