728x90
반응형
1. 폼 태그
form 태그는 HTML에서 사용자에게 입력을 받고, 그 데이터를 서버로 전송하기 위한 양식을 만드는 데 사용하는 태그입니다. 이 태그는 <input>, <textarea>, <select>, <button> 등 다양한 폼 요소들을 포함하며, 사용자가 작성한 데이터를 action 속성에 지정된 URL로 method 속성(GET 또는 POST)을 통해 전송합니다. form은 로그인, 회원가입, 검색창, 설문지 등 다양한 웹 기능에서 핵심 역할을 하며, 자바스크립트와 연동해 동적인 유효성 검사나 실시간 반응형 인터랙션도 구현할 수 있습니다. 웹에서 사용자와 상호작용하는 가장 중요한 도구 중 하나입니다.
2. 주요 폼 요소
1. <input> 태그 – 다양한 type 속성
2. 기타 폼 관련 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>회원가입</title>
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #f2f2f2;
margin: 0;
padding: 40px;
}
main {
max-width: 600px;
margin: auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
}
form {
display: flex;
flex-direction: column;
gap: 15px;
}
label {
font-weight: bold;
margin-bottom: 5px;
}
input,
select,
textarea,
button {
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="radio"],
input[type="checkbox"] {
width: auto;
margin-right: 5px;
}
.form-group.inline {
display: flex;
align-items: center;
gap: 10px;
}
.form-group.inline label {
margin-bottom: 0;
font-weight: bold;
white-space: nowrap;
}
input[type="color"] {
width: 50px;
height: 40px;
padding: 0;
border: none;
}
fieldset {
border: 1px solid #ccc;
padding: 15px;
border-radius: 8px;
}
legend {
font-weight: bold;
}
.form-group {
margin-bottom: 15px;
}
button[type="submit"] {
background-color: #4caf50;
color: white;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.footer-text {
text-align: center;
font-size: 0.9rem;
margin-top: 20px;
color: #777;
}
</style>
</head>
<body>
<main>
<h1>회원가입</h1>
<form action="/signup" method="post">
<div class="form-group">
<label for="username">아이디</label>
<input
type="text"
id="username"
name="username"
required
placeholder="아이디를 입력하세요"
/>
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<input type="password" id="password" name="password" required />
</div>
<div class="form-group">
<label for="email">이메일</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="phone">연락처</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="010-0000-0000"
/>
</div>
<div class="form-group">
<label for="birth">생년월일</label>
<input type="date" id="birth" name="birth" />
</div>
<div class="form-group">
<label>성별</label>
<label for="male"
><input type="radio" id="male" name="gender" value="male" />
남자</label
>
<label for="female"
><input type="radio" id="female" name="gender" value="female" />
여자</label
>
</div>
<div class="form-group inline">
<label for="color">좋아하는 색상</label>
<input type="color" id="color" name="color" />
</div>
<div class="form-group">
<label for="region">거주 지역</label>
<select id="region" name="region">
<option value="">-- 선택하세요 --</option>
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="incheon">인천</option>
</select>
</div>
<fieldset>
<legend>관심 분야</legend>
<input type="checkbox" id="html" name="interest" value="html" />
<label for="html">HTML</label>
<input type="checkbox" id="css" name="interest" value="css" />
<label for="css">CSS</label>
<input type="checkbox" id="js" name="interest" value="js" />
<label for="js">JavaScript</label>
</fieldset>
<div class="form-group">
<label for="intro">자기소개</label>
<textarea
id="intro"
name="intro"
rows="4"
placeholder="간단한 자기소개를 작성해주세요."
></textarea>
</div>
<div class="form-group">
<label for="file">프로필 사진 업로드</label>
<input type="file" id="file" name="profile" />
</div>
<button type="submit">가입하기</button>
<p class="footer-text">
이미 계정이 있으신가요? <a href="#">로그인</a>
</p>
</form>
</main>
</body>
</html>728x90
반응형