<form>

정진우·2024년 2월 12일

HTML

목록 보기

2/4

HTML의 <form> 태그는 웹 페이지에서 사용자로부터 정보를 수집하는 데 사용됩니다. <form> 태그는 다양한 입력 요소들을 포함할 수 있으며, 사용자가 제출 버튼을 누르면 이 정보는 서버로 전송됩니다. 아래는 <form> 태그의 기본 구조와 몇 가지 중요한 속성에 대한 설명입니다.

  <form action="/submit" method="post">
    <!-- 입력 요소들을 여기에 추가 -->
    <label for="username">사용자명:</label>
    <input id="username" name="username" placeholder="사용자명을 입력하세요" minlength="2" type="text" required>

    <label for="password">비밀번호:</label>
    <input id="password" name="password" placeholder="비밀번호를 입력하세요" minlength="2" type="password" required>

    <label for="file">파일 선택:</label>
    <input type="file" id="file" name="file" accept=".jpg, .jpeg, .png">
    <!-- <input type="file" accept="image/*"> 
    이미지 파일만 허용하도록 할 때는 다음과 같이 사용할 수 있습니다:-->

    <input type="submit" value="제출">
  </form>

기본 구조

<form> 태그는 폼을 정의합니다.
action 속성은 폼이 제출될 때 데이터를 처리할 서버 측 스크립트의 URL을 지정합니다.
method 속성은 폼 데이터를 서버로 전송하는 방법을 지정합니다. 대표적으로 "GET" 또는 "POST"가 사용됩니다.

입력 요소

<label> 태그는 입력 필드에 대한 설명을 제공합니다.
<input> 태그는 사용자로부터 정보를 입력받는 데 사용됩니다. type 속성은 입력 필드의 종류를 지정합니다. 일반적으로 사용되는 유형으로는 text, password, checkbox, radio, 등이 있습니다.
id 속성은 <label>과 연결되어 시각적 보조 수단을 제공합니다.
name 속성은 서버로 전송되는 데이터의 이름을 나타냅니다.
file은 파일을 선택하는 입력필드를 만들 수 있습니다.
required 속성은 필수 입력 필드임을 나타냅니다.
placeholder는 해당 입력 필드에 기본적인 힌트나 설명을 제공하는 데 사용됩니다.
accept는 업로드 되는 파일의 유형을 지정하는데 사용됩니다.

HTML에서 id는 문서 내의 요소를 고유하게 식별하는 데 사용됩니다. id 속성은 한 HTML 문서 내에서 고유해야 하며, 이를 통해 스크립트, 스타일, 라벨 등에서 해당 요소에 쉽게 접근할 수 있습니다. 동일한 이름의 id가 여러 개 존재하는 경우 JavaScript에서 getElementById 메서드를 사용하면 오류가 발생합니다. 따라서 id는 문서 전체에서 고유해야 하며, 동일한 HTML 문서 내에서 중복된 id 값을 사용하지 않도록 주의해야 합니다.