6장: 폼 요소
HTML 폼 요소는 사용자가 데이터를 입력하고 제출할 수 있도록 하는 다양한 입력 필드를 제공합니다. 폼 요소는 `<form>` 태그와 여러 입력 태그로 구성됩니다.
6.1 `<form>` 태그
폼을 생성하려면 `<form>` 태그를 사용합니다. 이 태그는 사용자가 입력한 데이터를 서버로 전송할 수 있도록 합니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 예제</title>
</head>
<body>
<form action="/submit" method="post">
<!-- 입력 필드가 여기에 추가됩니다 -->
</form>
</body>
</html>
6.2 입력 필드
입력 필드는 사용자가 데이터를 입력할 수 있도록 합니다. 여러 종류의 입력 필드가 있으며, 각각의 태그와 속성을 가지고 있습니다.
6.2.1 텍스트 입력 필드 (`<input type="text">`)
사용자가 텍스트를 입력할 수 있는 기본 입력 필드입니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 입력 필드 예제</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
</form>
</body>
</html>
6.2.2 비밀번호 입력 필드 (`<input type="password">`)
비밀번호를 입력할 수 있는 입력 필드입니다. 입력된 텍스트는 화면에 표시되지 않습니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비밀번호 입력 필드 예제</title>
</head>
<body>
<form action="/submit" method="post">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
</form>
</body>
</html>
6.2.3 라디오 버튼 (`<input type="radio">`)
라디오 버튼은 사용자가 여러 선택지 중 하나를 선택할 수 있게 합니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>라디오 버튼 예제</title>
</head>
<body>
<form action="/submit" method="post">
<p>성별:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label>
</form>
</body>
</html>
6.2.4 체크박스 (`<input type="checkbox">`)
체크박스는 사용자가 여러 선택지 중 하나 이상을 선택할 수 있게 합니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>체크박스 예제</title>
</head>
<body>
<form action="/submit" method="post">
<p>관심 분야:</p>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">코딩</label><br>
<input type="checkbox" id="design" name="interest" value="design">
<label for="design">디자인</label><br>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">음악</label>
</form>
</body>
</html>
6.2.5 제출 버튼 (`<input type="submit">`)
폼 데이터를 서버로 제출하는 버튼입니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제출 버튼 예제</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="제출">
</form>
</body>
</html>
### 연습 문제
1. `<form>` 태그를 사용하여 사용자의 이름과 이메일을 입력받는 폼을 작성해 보세요.
2. `<input type="radio">`와 `<input type="checkbox">`를 사용하여 여러 선택지를 포함하는 폼을 만들어 보세요.
3. `<input type="submit">`를 사용하여 작성한 폼을 제출할 수 있도록 하세요.
댓글
댓글 쓰기