기본 HTML 폼 만들기 - 웹 폼 제작 가이드

소개

이 랩에서는 <form> 태그와 다양한 폼 요소를 사용하여 기본적인 HTML 폼을 만드는 방법을 배웁니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 문서 설정

기본 구조를 갖춘 기본적인 HTML 문서를 생성하는 것으로 시작합니다.

<!doctype html>
<html>
  <head>
    <title>HTML Form Example</title>
  </head>
  <body></body>
</html>

기본 폼 생성

이제 입력 필드와 제출 버튼이 있는 기본적인 HTML 폼을 생성합니다. body 태그 안에 다음 코드를 추가하십시오.

<h1>HTML Form Example</h1>
<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

위 코드에서, 폼의 제목 역할을 하는 <h1> 태그가 있습니다. 그 다음 <form> 태그가 있고, 그 안에 <label> 태그와 <input> 태그가 있습니다. <label> 태그의 for 속성 값은 <input> 태그의 id 속성과 일치해야 합니다. 또한 줄 바꿈을 추가하기 위해 <br> 태그가 있습니다. 마지막으로, type 속성이 "submit"인 <input> 태그가 있습니다.

폼 요소 추가

폼에서 다양한 유형의 입력 필드를 사용하여 다양한 폼 요소를 추가할 수 있습니다. 드롭다운 메뉴와 체크박스를 폼에 추가해 보겠습니다. <form> 태그 코드를 다음 코드로 바꿉니다.

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <label for="gender">Gender:</label>
  <select name="gender" id="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
  <br /><br />
  <label for="hobby">Hobbies:</label>
  <br />
  <input type="checkbox" id="coding" name="hobby" value="coding" />
  <label for="coding">Coding</label>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <input type="checkbox" id="drawing" name="hobby" value="drawing" />
  <label for="drawing">Drawing</label>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

위 코드에서, <option> 태그를 사용하여 세 가지 옵션이 있는 성별 필드에 대한 <select> 태그를 추가했습니다. 또한 취미에 대한 서로 다른 레이블이 있는 세 개의 체크박스를 추가했습니다.

폼 속성

폼 동작을 사용자 정의하기 위해 <form> 태그에 속성을 추가할 수 있습니다. action 및 method 속성을 폼에 추가해 보겠습니다. <form> 태그 코드를 다음 코드로 바꿉니다.

<form action="submit-form.php" method="post"></form>

위 코드에서 "submit-form.php" 값을 가진 action 속성과 "post" 값을 가진 method 속성을 추가했습니다. 이는 브라우저에게 HTTP POST 메서드를 사용하여 폼 데이터를 "submit-form.php" 파일로 제출하도록 지시합니다.

폼 유효성 검사

required 속성을 사용하여 특정 필드를 필수 항목으로 만들 수 있습니다. 이름 필드 <input> 태그에 required 속성을 추가합니다.

<input type="text" name="name" id="name" required />

폼 접근성

<fieldset> 및 <legend> 태그를 사용하여 폼에 접근성 기능을 추가할 수도 있습니다. 성별 필드를 다음 코드로 감쌉니다.

<fieldset>
  <legend>Gender:</legend>
  ...
</fieldset>

이렇게 하면 성별 필드가 그룹화되고 해당 그룹에 대한 범례가 추가됩니다.

레이블 추가

마지막으로, <label> 태그를 사용하여 체크박스에 레이블을 추가할 수도 있습니다. 각 취미에 대한 체크박스와 레이블을 다음 코드로 감쌉니다.

<label for="coding">Coding</label>
<input type="checkbox" id="coding" name="hobby" value="coding" />

이렇게 하면 각 레이블이 해당 체크박스와 연결됩니다.

요약

이 랩에서는 <form> 태그와 입력 필드, 드롭다운 메뉴, 체크박스와 같은 다양한 폼 요소를 사용하여 기본적인 HTML 폼을 만드는 방법을 배웠습니다. 또한 method, action, required와 같은 폼 속성을 추가하는 방법과 <fieldset> 및 <legend> 태그를 사용하여 접근성 기능을 추가하는 방법도 배웠습니다.

HTML 입력 폼

소개