웹 시스템 개발 #FORM 초급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

이번 포스팅에서는 Form이란 무엇이며, 왜 사용하고, 어떻게 사용하는지에 대해 알아보고자 합니다.

Form이란?

HTML <form> 요소는 웹 페이지에서 상호 작용하고 데이터를 입력하며 웹 애플리케이션과 상호 작용할 수 있는 "대화형 영역을 정의"하는 데 사용됩니다.

Form은 사용자가 웹 페이지에서 데이터를 입력하고 제출할 때 사용되며 일반적으로 이 데이터는 웹 서버로 전송되어 처리됩니다. Form 요소는 다양한 입력 필드와 제출(Submit) 버튼을 포함할 수 있으며, 이러한 입력 필드는 사용자로부터 정보를 수집하고 처리하는 데 사용됩니다.

즉, Form을 사용하는 이유는 웹 페이지에서 사용자로부터 정보를 수집하고, 수집한 데이터를 처리하기 위한 도구로써 사용하기 위함입니다.

Form 사용방법

Form을 사용하기 위해서는 Form의 기본 구성 요소에 대해 이해가 필요합니다.

Form의 기본 구성 요소

Form은 여러 가지 입력 필드로 구성됩니다. 예를 들어, 텍스트 상자, 비밀번호 입력 칸, 라디오 버튼, 체크 박스 등이 있습니다. 이러한 입력 필드들은 사용자가 정보를 입력하거나 선택할 수 있도록 해줍니다.

HTML <form> 요소는 Form 내부에 있는 모든 컨트롤(입력 필드)을 담는 컨테이너라고 생각하시면 되고,

<form> 요소에는 name, action, method 속성이 있다는 것을 알아두시면 됩니다.

Form을 어떻게 사용하나요?

웹 페이지에 <form> 요소를 추가합니다.
각 입력 필드에 대한 정보를 추가합니다. 이때 입력 필드의 종류, 이름, 기본값 등을 설정합니다.
사용자가 정보를 입력하고, "제출" 버튼을 클릭하면, 웹 브라우저는 입력한 정보를 서버로 전송합니다.
서버는 이 정보를 받아 처리하고, 그에 따른 응답을 보내줍니다.

위 예시는 Form이 작동되는 간단한 플로우를 적어보았습니다. 자세한 내용은 아래에서 다시 천천히 설명드리겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>간단한 Form 예제</title>
</head>
<body>
    <h2>사용자 정보 입력</h2>
    <!-- Form 시작 -->
    <form action="/submit" method="post">
        <!-- 이름 입력 필드 -->
        <label for="name">이름:</label>
        <input type="text" id="name" name="name" required><br><br>

        <!-- 이메일 입력 필드 -->
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email" required><br><br>

        <!-- 제출 버튼 -->
        <input type="submit" value="제출">
    </form>
    <!-- Form 끝 -->
</body>
</html>

<form> 요소의 코드인 <form action="/submit" method="post">은 다음을 나타냅니다

action="/submit" : <form> 요소가 제출될 때 브라우저가 데이터를 전송할 서버의 URL을 지정합니다. 즉, 사용자가 폼을 작성하고 제출할 때, 입력한 데이터는 /submit URL로 전송됩니다.
method="post" : 폼 데이터를 서버로 전송하는 HTTP 메소드를 지정합니다. 여기서는 "post"를 사용했으므로, 데이터가 서버로 안전하게 전송되며, URL에 데이터가 노출되지 않습니다. "post" 메소드는 일반적으로 폼 데이터를 서버에 제출할 때 사용됩니다.

<input> Property 종류들

Text

사용자에게 한 줄의 텍스트 데이터를 입력할 수 있는 필드를 제공합니다.

size 속성: 입력 받을 문자의 가시적 크기(가로 너비)를 지정합니다.
maxlength 속성: 입력할 수 있는 문자열의 최대 길이를 제한합니다.

<input type="text" name="company" size="5" maxlength="5" />

Password

사용자에게 한 줄의 패스워드나 비밀번호를 입력할 수 있는 필드를 제공합니다.

한 줄의 텍스트 데이터를 입력받지만, 입력한 문자가 ( * )로 숨겨져 보이지 않습니다.

가시적으로는 보안 요소가 있지만, 암호화는 적용되지 않습니다.

<input type="password" name="password" />

Checkbox

사용자에게 다중 선택 옵션을 제공하며, 여러 개의 체크박스를 동시에 선택할 수 있습니다.

name 속성: 체크박스 그룹을 지정하기 위해 동일한 이름을 가진 체크박스들은 같은 그룹으로 인식합니다.

<input type="checkbox" name="interest" value="music" /> Music
<input type="checkbox" name="interest" value="movies" /> Movies
<input type="checkbox" name="interest" value="sports" /> Sports

Radio

여러 개의 라디오 버튼 중 하나만 선택할 수 있는 옵션을 제공합니다. 동일한 name 속성을 가진 라디오 버튼은 하나의 그룹으로 간주되며, 그 중 하나만 선택할 수 있습니다.

name 속성: 라디오 버튼 그룹을 지정하기 위해 동일한 이름을 가진 라디오 버튼들은 같은 그룹으로 인식합니다.

<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female

Button

일반 버튼을 생성하며, 클릭 시 아무 동작도 수행하지 않습니다. JavaScript 코드와 연동하여 클릭 이벤트에 동작을 추가할 수 있습니다.

type 속성: button, reset, submit, image 중 하나를 선택할 수 있습니다.
value 속성: 버튼에 출력될 텍스트 또는 이미지의 값입니다.

<input type="button" name="submitBtn" value="Submit" onclick="submitForm()" />
<button type="reset" name="resetBtn">Reset</button>
<input type="submit" name="submitBtn" value="Submit" />
<input type="image" src="submit.gif" alt="Submit" width="48" height="48" />

<button> 요소를 <form> 안에서 사용하거나 밖에서 사용하는 것은 동작에 차이가 있습니다.

<button> 요소를 <form> 안에서 사용한 경우

<form> 안에 있는 <button> 요소의 type 속성이 submit으로 설정되어 있으면, 이 버튼을 클릭하면 폼 데이터가 제출됩니다.
이 경우, 폼의 action 속성에 지정된 URL로 데이터가 전송되며, 서버에서 데이터를 처리한 후 새로운 페이지나 응답을 생성할 수 있습니다.
<button> 요소 내에 아무런 JavaScript 이벤트 핸들러가 없으면 기본 동작인 폼 제출이 실행됩니다.

<form>
  <button type="submit" name="submitButton">Submit</button>
</form>

<button> 요소를 <form> 밖에서 사용한 경우

<form> 밖에서 사용한 <button> 요소는 단순한 HTML 버튼으로 동작하며, 폼 제출과는 무관합니다.
클릭 시 어떠한 기본 동작도 수행하지 않으며 JavaScript 코드를 통해 버튼 클릭 이벤트에 원하는 동작을 추가해야만 특정 동작을 수행합니다.
버튼을 클릭하면 JavaScript 함수 (예: submitForm())가 호출되며, 이 함수에서 원하는 동작을 수행할 수 있습니다.

<button type="button" name="submitButton" onclick="submitForm()">Submit</button>

따라서, <button> 요소를 <form> 안에서 사용하면 폼 제출과 관련이 있으며, <form> 밖에서 사용하면 JavaScript 함수를 트리거하여 원하는 동작을 수행할 수 있습니다.

<select>

<select> 요소는 드롭다운 목록을 생성하는 데 사용됩니다.

사용자가 목록에서 항목을 "선택"할 수 있으며, 선택한 항목을 서버로 전송하거나 JavaScript를 통해 처리할 수 있습니다.

<label for="colors">Choose a color:</label>
<select id="colors" name="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
</select>

<label> 요소는 드롭다운 목록을 설명하는 레이블을 제공합니다. for 속성과 <select> 요소의 id 속성을 연결하여 레이블과 목록을 연결합니다.
<select> 요소는 드롭다운 목록을 생성하며, name 속성을 통해 목록에서 선택한 항목을 서버로 전송할 때 사용되는 이름을 지정합니다.
<option> 요소는 목록의 각 항목을 정의하며, value 속성은 해당 항목을 선택했을 때 전송되는 값을 지정합니다.

<label>

<label> 요소는 입력 필드를 설명하는 레이블을 생성하는 데 사용됩니다. 이는 사용자가 입력 필드와 관련된 정보를 이해하고 사용하는 데 도움이 됩니다.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

<label> 요소는 입력 필드를 설명하는 레이블을 생성합니다. for 속성과 입력 필드의 id 속성을 연결하여 레이블과 입력 필드를 연결합니다.

HTML5 시맨틱 태그란?

HTML5 시맨틱 태그는 웹 문서를 구조화하는데 사용됩니다. 시맨틱 태그들은 웹 페이지의 각 부분이 어떤 역할을 하는지 설명하며, 이를 통해 웹 페이지의 의미와 구조를 명확하게 전달할 수 있습니다.

아래는HTML5 시맨틱 태그에 대한 몇 가지 예시입니다.

<header>: 웹 페이지나 섹션의 머리말을 나타냅니다. 주로 페이지 상단에 로고나 제목, 네비게이션 메뉴 등이 들어갑니다.
<nav>: 네비게이션 메뉴를 감싸는 태그로, 웹 페이지에서 다른 페이지로 이동할 링크나 메뉴를 담습니다.
<section>: 문서의 일부를 나타내는 태그로, 주로 웹 페이지 내용을 장(chapter)이나 절(section)로 나눌 때 사용합니다.
<article>: 독립적인 콘텐츠 조각을 나타내며, 뉴스 기사나 블로그 포스트 등이 될 수 있습니다.
<aside>: 본문과 관련은 있지만 주요 내용과는 조금 다른 내용을 담는 공간으로, 사이드바나 광고 등을 넣을 때 사용합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Sample Page</title>
</head>
<body>
  <header>
    <h1>Welcome to Our Website</h1>
    <p>Explore our services and products.</p>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About Us</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  <section>
    <article>
      <h2>Latest News</h2>
      <p>Read about our recent achievements.</p>
    </article>
    <aside>
      <h2>Advertisement</h2>
      <p>Special offers for this week.</p>
    </aside>
  </section>
  <footer>
    <p>&copy; 2023 Our Company</p>
  </footer>
</body>
</html>

시맨틱 태그를 사용하면 웹 페이지를 조직화하고, 이를 통해 웹 페이지의 내용을 이해하기 쉽게 만들 수 있다는 이점이 있기에 사용됩니다.

저작자표시 동일조건