6일 차: 폼 만들기
학습 목표: HTML에서 폼(form 태그)과 다양한 입력 요소(input, textarea, select 태그 등)를 이해하고 사용하는 방법 배우기
1. 폼 기본 구조
폼은 사용자로부터 데이터를 입력받아 서버로 전송하기 위해 사용돼. 폼은 form 태그로 감싸고, 다양한 입력 요소를 포함할 수 있어.
기본 폼 예제:
html
<! DOCTYPE html>
<html>
<head>
<title>Basic Form </title>
</head>
<body>
<h1>Contact Form </h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
설명:
<form>: 폼을 나타내는 태그. action 속성은 폼 데이터를 보낼 URL을 지정하고, method 속성은 데이터를 전송하는 방법(get 또는 post)을 지정해.
<label>: 입력 요소에 대한 설명을 제공하는 태그. for 속성은 해당 입력 요소의 id를 참조해.
<input>: 다양한 유형의 데이터를 입력받기 위한 태그. type 속성으로 입력 유형을 지정해.
<input type="submit">: 폼 데이터를 제출하는 버튼.
2. 다양한 입력 유형
input 태그는 다양한 type 속성을 사용하여 여러 종류의 데이터를 입력받을 수 있어.
텍스트 입력 (type="text"):
사용자가 짧은 텍스트를 입력할 수 있게 해.
html
<input type="text" id="name" name="name">
이메일 입력 (type="email"):
이메일 주소를 입력받을 때 사용해. 브라우저는 이메일 형식을 확인해줘.
html
<input type="email" id="email" name="email">
비밀번호 입력 (type="password"):
비밀번호를 입력받을 때 사용해. 입력된 텍스트가 숨겨져서 표시돼.
html
<input type="password" id="password" name="password">
체크박스 (type="checkbox"):
여러 개의 옵션 중에서 하나 이상을 선택할 수 있게 해.
html
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe">
라디오 버튼 (type="radio"):
여러 개의 옵션 중에서 하나만 선택할 수 있게 해.
html
<label for="gender-male">Male</label>
<input type="radio" id="gender-male" name="gender" value="male">
<label for="gender-female">Female</label>
<input type="radio" id="gender-female" name="gender" value="female">
숫자 입력 (type="number"):
숫자를 입력받을 때 사용해. 최소값(min)과 최댓값(max)을 설정할 수 있어.
html
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="120">
날짜 입력 (type="date"):
날짜를 입력받을 때 사용해. 사용자가 날짜를 선택할 수 있는 달력이 표시돼.
html
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
3. 텍스트 영역 (textarea)
텍스트 영역은 여러 줄의 텍스트를 입력받을 수 있는 입력 요소야.
예제:
html
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
설명:
<textarea>: 여러 줄의 텍스트를 입력받기 위한 태그. rows와 cols 속성으로 텍스트 영역의 크기를 설정해.
4. 드롭다운 메뉴 (select)
드롭다운 메뉴는 여러 옵션 중 하나를 선택할 수 있게 해.
예제:
html
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
설명:
<select>: 드롭다운 메뉴를 나타내는 태그.
<option>: 선택할 수 있는 각 옵션을 나타내는 태그. value 속성은 서버로 전송될 값을 지정해.
5. 폼에 스타일 추가하기
CSS를 사용해서 폼의 스타일을 변경할 수 있어. 예를 들어, 입력 요소의 크기, 여백, 테두리 등을 변경할 수 있어.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Styled Form </title>
<style>
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input, textarea, select {
width: 100%;
padding: 8px;
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4 CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Styled Contact Form </h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>
설명:
form: 폼 자체의 스타일을 지정해.
label: 라벨의 스타일을 지정해. display: block으로 각 라벨을 블록 요소로 만들어 줄 바꿈이 되게 해.
input, textarea, select: 모든 입력 요소의 스타일을 지정해. width: 100%로 입력 요소가 폼의 전체 너비를 차지하게 해.
input [type="submit"]: 제출 버튼의 스타일을 지정해.
input [type="submit"]:hover: 마우스를 제출 버튼 위에 올렸을 때의 스타일을 지정해.
6. 폼의 유효성 검사
HTML5는 기본적인 폼 유효성 검사를 지원해. 예를 들어, 필수 입력 필드를 지정하거나, 입력 형식을 검사할 수 있어.
필수 입력 필드:
html
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
이메일 형식 검사:
html
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
숫자 범위 검사:
html
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="120" required>
설명:
required: 필수 입력 필드로 지정해. 이 속성이 있으면 사용자가 이 필드를 반드시 입력해야 폼을 제출할 수 있어.
type="email": 이메일 형식을 검사해.
min과 max: 숫자 입력 필드의 최소값과 최댓값을 설정해.
7. 실습과 응용
이제 위에서 배운 내용을 토대로 연습해보자.
실습 1: 기본 폼 만들기
html
<!DOCTYPE html>
<html>
<head>
<title>Form Practice </title>
</head>
<body>
<h1>Registration Form </h1>
<form action="/register" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<input type="submit" value="Register">
</form>
</body>
</html>
실습 2: 스타일이 적용된 폼 만들기
html
<!DOCTYPE html>
<html>
<head>
<title>Styled Form Practice </title>
<style>
form {
width: 400px;
margin: 0 auto;
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-size: 16px;
color: #333;
}
input, textarea, select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #007 BFF;
color: white;
border: none;
padding: 15px 20px;
cursor: pointer;
border-radius: 5px;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Styled Registration Form </h1>
<form action="/register" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<input type="submit" value="Register">
</form>
</body>
</html>
오늘은 폼을 만드는 방법을 배웠어. 폼은 사용자로부터 정보를 입력받고, 서버로 전송하는 중요한 도구야. 다양한 입력 요소와 스타일링 방법을 통해 폼을 더 유용하고 예쁘게 만들 수 있어. 내일은 CSS에 대해 더 깊이 배워보자. 오늘도 잘했어!