[웹 디자인] 5일차: HTML 폼과 입력 요소

HTML 폼

HTML 폼은 사용자로부터 입력을 받아 서버로 전송하는 데 사용됩니다. 폼은 다양한 입력 요소를 포함하며, 사용자가 데이터를 입력하고 제출할 수 있게 합니다.

폼 요소

• <form>: 폼을 정의하는 요소입니다.
  • action: 폼 데이터를 제출할 URL을 지정합니다.
  • method: 폼 데이터를 전송하는 HTTP 메서드를 지정합니다 (GET 또는 POST).

예제:

<form action="/submit" method="post">
  <!-- 폼 요소들이 여기 들어갑니다 -->
</form>

입력 요소

입력 요소는 폼 내에서 사용자로부터 데이터를 입력받는 다양한 방법을 제공합니다.

텍스트 입력

• <input type="text">: 단일 행 텍스트 입력 필드를 정의합니다.
• <input type="password">: 암호 입력 필드를 정의합니다. 입력한 텍스트가 숨겨집니다.
• <input type="email">: 이메일 주소를 입력받는 필드를 정의합니다. 이메일 형식을 검증합니다.
• <input type="url">: URL을 입력받는 필드를 정의합니다. URL 형식을 검증합니다.

예제:

<form>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">

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

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

  <label for="website">웹사이트:</label>
  <input type="url" id="website" name="website">
</form>

라디오 버튼과 체크박스

• <input type="radio">: 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼을 정의합니다.
• <input type="checkbox">: 여러 옵션을 선택할 수 있는 체크박스를 정의합니다.

예제:

<form>
  <p>성별:</p>
  <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>

  <p>취미:</p>
  <input type="checkbox" id="hobby1" name="hobby" value="reading">
  <label for="hobby1">독서</label>

  <input type="checkbox" id="hobby2" name="hobby" value="traveling">
  <label for="hobby2">여행</label>

  <input type="checkbox" id="hobby3" name="hobby" value="sports">
  <label for="hobby3">운동</label>
</form>

선택 상자와 리스트

• <select>: 드롭다운 리스트를 정의합니다.
• <option>: 드롭다운 리스트의 옵션을 정의합니다.

예제:

<form>
  <label for="country">국가:</label>
  <select id="country" name="country">
    <option value="korea">대한민국</option>
    <option value="usa">미국</option>
    <option value="japan">일본</option>
  </select>
</form>

다중 선택 리스트

• <select multiple>: 여러 항목을 선택할 수 있는 리스트를 정의합니다.

예제:

<form>
  <label for="fruits">과일:</label>
  <select id="fruits" name="fruits" multiple>
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="orange">오렌지</option>
  </select>
</form>

텍스트 영역

• <textarea>: 여러 행의 텍스트 입력 필드를 정의합니다.

예제:

<form>
  <label for="message">메시지:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>
</form>

버튼

• <button>: 버튼을 정의합니다. 텍스트나 이미지로 표시할 수 있습니다.
• <input type="submit">: 폼 데이터를 제출하는 버튼을 정의합니다.
• <input type="reset">: 폼 필드를 초기화하는 버튼을 정의합니다.

예제:

<form>
  <input type="submit" value="제출">
  <input type="reset" value="초기화">
</form>

폼 속성

• action: 폼이 제출될 URL을 지정합니다.
• method: 폼 데이터를 제출할 HTTP 메서드를 지정합니다 (GET 또는 POST).
• name: 폼의 이름을 지정합니다.
• target: 폼이 제출될 창을 지정합니다 (_self, _blank, _parent, _top).
• autocomplete: 폼 자동 완성을 설정합니다 (on 또는 off).

예제:

<form action="/submit" method="post" name="contactForm" target="_blank" autocomplete="on">
  <!-- 폼 요소들이 여기 들어갑니다 -->
</form>

결론

HTML 폼과 입력 요소는 사용자로부터 데이터를 입력받고 처리하는 중요한 도구입니다. 다양한 입력 요소와 속성을 활용하여 사용자 친화적인 폼을 작성할 수 있습니다. 이번 글에서는 폼과 입력 요소의 다양한 속성과 사용법에 대해 배웠습니다.

다음 글에서는 HTML5 시맨틱 요소에 대해 알아보겠습니다.

다음 글에서 만나요!