소개
HTML <fieldset> 태그는 HTML 요소를 함께 그룹화하는 데 사용되며, 잘 구성되고 구조화된 문서를 만드는 데 도움이 됩니다. <fieldset> 태그를 사용하면 양식 내 관련 필드를 그룹화하여 양식 필드를 더 체계적으로 표시할 수 있습니다.
이 Lab 에서는 <fieldset> 태그를 사용하여 구조화되고 체계적인 양식을 만드는 방법을 보여드리겠습니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 페이지 생성
index.html이라는 파일을 생성하고 HTML 페이지의 기본 구조를 작성합니다.
<!doctype html>
<html>
<head>
<title>Creating a Form with Fieldset Tag</title>
</head>
<body></body>
</html>
fieldset 을 사용한 폼 생성
HTML body 에 form 요소를 추가한 다음, <fieldset> 태그를 사용하여 관련 양식 필드를 그룹화합니다. 또한 input 필드에 설명을 추가하기 위해 양식 요소에 label 태그를 추가합니다.
<form>
<fieldset>
<legend>User Details</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname" /><br /><br />
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lastname" /><br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br /><br />
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="uname">Username:</label>
<input type="text" id="uname" name="username" /><br /><br />
<label for="pass">Password:</label>
<input type="password" id="pass" name="password" /><br /><br />
</fieldset>
<input type="submit" value="Submit" />
</form>
위 코드는 두 개의 fieldset 으로 구조화된 양식을 생성합니다. 첫 번째 fieldset 은 사용자의 개인 정보를 그룹화하고, 두 번째 fieldset 은 계정 정보를 그룹화합니다. 필드에 대한 몇 가지 컨텍스트를 제공하기 위해 label 태그를 사용했음을 알 수 있습니다.
CSS 추가하기
CSS 를 사용하여 fieldset 에 적절한 디자인을 적용할 수 있습니다. border, background-color 및 일부 padding 을 추가하여 fieldset 을 더 보기 좋게 만들 수 있습니다.
<style>
fieldset {
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 4px;
margin: 5px;
background-color: #f8f8f8;
}
</style>
브라우저에서 HTML 파일을 열어 양식을 보고 테스트해 보세요.
요약
Fieldset 태그는 잘 정리되고 구조화된 문서를 생성합니다. 양식을 만드는 데 유용합니다. input 필드에 대한 컨텍스트를 제공하려면 label 태그를 사용하십시오. Fieldset 태그는 관련 양식 필드를 그룹화하고 관련 필드 주위에 테두리를 추가합니다. 마지막으로, CSS 스타일링은 fieldset 에 디자인을 제공하여 더 보기 좋게 만듭니다.
