반응형

이번 시간에는 HTML 테이블과 폼을 만드는 방법에 대해 배우겠습니다. 테이블은 데이터를 표 형식으로 정리할 때 사용되고, 폼은 사용자로부터 정보를 입력받는 데 사용됩니다. 폼을 사용하면 사용자와 상호작용할 수 있는 웹 페이지를 만들 수 있습니다.

테이블 만들기

HTML에서 테이블을 만들 때는 <table>, <tr>, <td>, <th> 태그를 사용합니다. 각 태그는 테이블의 다른 부분을 정의합니다.

  1. <table> 태그
    <table> 태그는 테이블 전체를 정의합니다.

    <table>
  <!-- 테이블의 내용이 들어감 -->
</table>

  2. <tr> 태그
    <tr> 태그는 테이블의 행(row)을 정의합니다. 각 행은 여러 개의 셀로 구성됩니다.

    <table>
  <tr> <!-- 행 시작 -->
    <!-- 셀들 -->
  </tr> <!-- 행 끝 -->
</table>

  3. <td> 태그
    <td> 태그는 테이블의 셀(cell)을 정의합니다. 각 셀은 데이터를 담고 있습니다.

    <table>
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
  </tr>
</table>

  4. <th> 태그
    <th> 태그는 테이블의 헤더 셀을 정의합니다. 헤더 셀은 일반적으로 글씨가 굵고 가운데 정렬됩니다. th는 데이터를 설명하는 제목 역할을 합니다.

    <table>
  <tr>
    <th>헤더 1</th>
    <th>헤더 2</th>
  </tr>
  <tr>
    <td>데이터 1</td>
    <td>데이터 2</td>
  </tr>
</table>

    출력:

    헤더 1 헤더 2
    데이터 1 데이터 2

  5. 테이블에 속성 추가하기
    테이블에 스타일을 추가하여 테이블의 외관을 개선할 수 있습니다. border 속성을 추가하여 테이블에 경계를 설정할 수 있습니다.

    <table border="1">
  <tr>
    <th>헤더 1</th>
    <th>헤더 2</th>
  </tr>
  <tr>
    <td>데이터 1</td>
    <td>데이터 2</td>
  </tr>
</table>

폼 생성

HTML 폼을 사용하면 사용자가 정보를 입력할 수 있는 양식을 만들 수 있습니다. 폼 태그에는 다양한 입력 필드들이 있으며, 그 중 일부를 소개합니다.

  1. <form> 태그
    <form> 태그는 폼을 정의합니다. 폼의 action 속성은 폼 데이터가 제출될 서버의 URL을 지정하고, method 속성은 데이터를 제출하는 방법을 지정합니다.

    <form action="submit_form.php" method="POST">
  <!-- 폼의 내용이 들어감 -->
</form>
    • action 속성: 폼이 제출될 서버의 URL을 지정합니다.
    • method 속성: 폼 데이터를 서버에 보내는 방법을 설정합니다. GET은 URL에 데이터를 추가하여 전송하고, POST는 HTTP 요청 본문에 데이터를 담아 전송합니다.

  2. <input> 태그
    <input> 태그는 다양한 종류의 입력 필드를 만듭니다. type 속성을 사용하여 입력 필드의 유형을 정의합니다.

    <input type="text" name="username" placeholder="사용자 이름">
<input type="password" name="password" placeholder="비밀번호">
    • type="text": 텍스트 입력 필드를 생성합니다.
    • type="password": 비밀번호 입력 필드를 생성합니다. 입력한 내용은 보이지 않게 표시됩니다.

  3. <textarea> 태그
    <textarea> 태그는 여러 줄의 텍스트를 입력받을 수 있는 영역을 생성합니다. 예를 들어, 사용자에게 의견을 받거나 긴 텍스트를 입력받을 때 사용됩니다.

    <textarea name="comments" rows="4" cols="50" placeholder="여기에 의견을 남겨주세요"></textarea>
    • rows: 텍스트 영역의 높이를 정의합니다.
    • cols: 텍스트 영역의 너비를 정의합니다.

  4. <select>와 <option> 태그
    <select> 태그는 드롭다운 목록을 생성합니다. <option> 태그는 목록의 각 항목을 정의합니다.

    <select name="country">
  <option value="kr">대한민국</option>
  <option value="us">미국</option>
  <option value="jp">일본</option>
</select>
    • <option>: 드롭다운 목록의 항목을 정의합니다.

폼 속성

폼 태그의 여러 속성을 활용하여 폼의 동작 방식을 제어할 수 있습니다. 주요 속성은 다음과 같습니다:

  1. action 속성
    폼 데이터를 전송할 서버의 URL을 지정합니다.

    <form action="submit_form.php" method="POST">

  2. method 속성
    폼 데이터를 서버로 보내는 방법을 설정합니다. POST나 GET 방식으로 데이터를 전송할 수 있습니다.

    <form action="submit_form.php" method="POST">

  3. name 속성
    각 입력 필드에 name 속성을 설정하면 서버에 제출된 데이터에서 해당 필드를 구분할 수 있습니다. name은 필수는 아니지만, 데이터 처리 시 매우 중요합니다.

    <input type="text" name="username" placeholder="사용자 이름">

실습: 간단한 회원가입 폼 만들기

이제 간단한 회원가입 폼을 만들어 보겠습니다. 이 폼은 사용자로부터 이름, 이메일, 비밀번호 등을 받는 폼입니다.

<!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>
    <h1>회원가입</h1>
    <form action="submit_form.php" method="POST">
      <label for="username">사용자 이름:</label><br>
      <input type="text" id="username" name="username" placeholder="사용자 이름"><br><br>

      <label for="email">이메일:</label><br>
      <input type="email" id="email" name="email" placeholder="이메일"><br><br>

      <label for="password">비밀번호:</label><br>
      <input type="password" id="password" name="password" placeholder="비밀번호"><br><br>

      <label for="gender">성별:</label><br>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">남성</label>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">여성</label><br><br>

      <label for="country">국가:</label><br>
      <select id="country" name="country">
        <option value="kr">대한민국</option>
        <option value="us">미국</option>
        <option value="jp">일본</option>
      </select><br><br>

      <label for="comments">의견:</label><br>
      <textarea id="comments" name="comments" rows="4" cols="50" placeholder="여기에 의견을 남겨주세요"></textarea><br><br>

      <input type="submit" value="회원가입">
    </form>
  </body>
</html>

이 코드는 회원가입 폼을 작성합니다. 사용자 이름, 이메일, 비밀번호, 성별, 국가, 의견을 입력받을 수 있으며, "회원가입" 버튼을 클릭하면 서버로 데이터를 전송합니다. 이 폼은 submit_form.php로 데이터를 보내게 되며, 실제 데이터 처리 기능은 서버 측에서 구현해야 합니다.

결론

오늘은 테이블과 폼에 대해 배웠습니다. 테이블은 데이터를 표 형식으로 정리하는 데 유용하고, 폼은 사용자로부터 데이터를 입력받는 데 사용됩니다. 다양한 폼 입력 필드(<input>, <textarea>, <select>)와 폼 속성(action, method, name)을 활용하여 동적인 웹 페이지를 만들 수 있습니다.

반응형
저작자표시

'개발 > HTML' 카테고리의 다른 글

6일차: HTML5 및 멀티미디어  (0) 2025.02.01
5일차: HTML 속성 및 스타일링  (1) 2025.01.31
3일차: 이미지와 리스트  (0) 2025.01.29
2일차: 텍스트 형식화와 링크  (1) 2025.01.28
1일차: HTML 기본 이해  (0) 2025.01.27

+ Recent posts

티스토리툴바