Forms & Table 태그
Forms & Table 태그
1. Forms
폼(Form)은 웹 페이지에서 사용자로부터 데이터를 수집하고 서버로 전송하는 데 사용되는 HTML 요소입니다. 로그인, 회원 가입, 검색, 설문조사 등 다양한 상호작용을 구현할 때 폼을 활용합니다.
1.1. form 태그
<form> 태그는 폼을 구성하는 컨테이너 역할을 합니다. 이 태그 내부에는 다양한 입력 요소들을 배치할 수 있습니다.
- action 속성: 폼 데이터를 처리할 서버의 URL을 지정합니다.
- method 속성: 데이터를 서버로 전송하는 방식을 지정합니다. 주로 GET 또는 POST 방식을 사용합니다.
<form action="/login" method="POST">
<!-- 폼 요소들 -->
</form><form action="/login" method="POST">
<!-- 폼 요소들 -->
</form>1.2. input 태그
<input> 태그는 사용자로부터 데이터를 입력받는 가장 기본적인 HTML 요소입니다. 텍스트, 비밀번호, 체크박스, 라디오 버튼 등 다양한 형태의 입력을 지원합니다.
- type 속성: 입력 필드의 유형을 지정합니다. 예를 들어, 텍스트 입력은
type="text", 비밀번호 입력은type="password"등으로 지정합니다. - name 속성: 폼 데이터와 함께 전송될 때 사용되는 필드의 이름을 지정합니다. 서버 측에서 이 이름을 통해 데이터를 식별합니다.
- id 속성: 레이블(label) 요소에서 for 속성을 사용하여 id 속성과 일치시킬 수 있습니다. 이렇게 하면 사용자가 레이블을 클릭했을 때 해당 입력 필드가 자동으로 포커스를 받거나, 스크린 리더가 사용될 때 사용자에게 더 나은 접근성을 제공할 수 있습니다.
1.3. label 태그
<label> 태그는 입력 필드의 설명을 제공하고, 해당 레이블을 클릭하면 연결된 입력 요소에 포커스가 맞춰지도록 합니다. 이는 사용자가 손쉽게 입력 필드를 선택할 수 있게 하며, 폼의 사용성을 크게 향상시킵니다.
- for 속성: 이 속성은
<label>이 설명하는 입력 요소의 ID를 지정합니다. for 속성의 값은 해당 입력 요소의 id 속성 값과 일치해야 합니다.
1.4. 폼 예제
다음은 간단한 로그인 폼의 예제입니다. 사용자의 이름과 비밀번호를 입력받아 서버로 전송하는 폼을 구현합니다.
<form action="/login" method="POST">
<label for="username">아이디:</label>
<input type="text" id="username" name="username" />
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" />
<button type="submit">로그인</button>
</form><form action="/login" method="POST">
<label for="username">아이디:</label>
<input type="text" id="username" name="username" />
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" />
<button type="submit">로그인</button>
</form>이 폼은 아이디와 비밀번호를 입력받아, 제출 시 /login URL로 POST 방식으로 데이터를 전송합니다.
좀 더 다양한 형태의 입력 요소를 사용해보도록 하겠습니다.
2. Table
테이블(table)은 정보를 구조화하여 표현하는데 사용되는 HTML 요소입니다. 데이터를 행과 열로 정렬하여 보여주며, 다양한 정보를 시각적으로 이해하기 쉽게 만들어 줍니다. 테이블을 만들기 위해 사용하는 주요 태그에는 <table>, <tr>, <th>, <td> 등이 있습니다.
격자무늬 레이아웃은 테이블 사용하면 안되나요?
과거에는 테이블을 이용하여 웹 페이지의 레이아웃을 구성하기도 했지만, 현대적인 웹 개발에서는 CSS를 사용하여 레이아웃을 구성하는 것이 일반적입니다. 테이블은 주로 데이터를 표현하는 용도로 사용됩니다.
지금은 격자무늬 레이아웃을 만들기 위해 테이블을 사용하지 않는 것이 좋습니다. 대신, CSS의 그리드(grid)나 플렉스(flex)를 활용하여 레이아웃을 구성하는 것이 좋습니다.
2.1. 테이블 구성 요소
<table>태그는 테이블을 만드는 데 사용됩니다. 이 태그 안에는 테이블의 구조를 정의하는 다른 태그들이 포함됩니다.<tr>(table row) 태그는 테이블의 행을 정의합니다.<th>(table header) 태그는 테이블의 헤더 셀을 정의합니다.<th>태그로 만들어진 셀은 기본적으로 굵은 글씨와 가운데 정렬로 표시됩니다.<td>(table data) 태그는 테이블의 데이터 셀을 정의합니다. 실제 내용이 이 태그 안에 위치합니다.
2.2. 테이블 예제
다음은 간단한 제품 정보 테이블의 예제입니다.
이 예제에서는 <table> 태그를 사용하여 테이블을 만들고, <tr> 태그로 행을 정의합니다. 첫 번째 행에는 <th> 태그를 사용하여 헤더 셀을 만들고, 나머지 행에는 <td> 태그를 사용하여 데이터 셀을 만듭니다. CSS를 사용하여 테이블의 스타일을 지정할 수 있습니다.