본문 바로가기
Web/HTML

[HTML] Form

by 코딩하는 랄로 2023. 10. 30.
728x90

Form

HTML은 웹 서버로 데이터를 보내기 위한 태그로 form 태그를 지원하고 있다. 사용자의 정보 또는 필요한 정보를 입력 받아 form 태그를 통해 웹 서버에 보내고, 전송 받은 데이터를 웹 서버가 처리하고, 결과로 또 다른 웹 페이지를 보여주게 되는 것이다. 이번 포스팅에서는 form 태그를 어떻게 사용하는 지에 대해서 알아보겠다.

 

 

 

Form 태그 속성

폼 태그는 데이터를 전송하기 위한 태그이기 때문에 그와 관련된 여러가지 속성을 가지고 있다. 

속성 설명
action 폼을 전송할 서버 또는 페이지 url
name 폼을 식별하기 위한 이름을 지정
accept-charset 폼 전송에 사용할 문자 인코딩을 지정
target action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
method 폼을 서버에 전송할 http 메소드를 지정

 

target 과 method 속성의 속성값에 대해서는 더 알아보자. target은 속성값으로 아래와 같은 속성값들을 정의하고 있다.

속성값 설명
_black 서버로부터 받은 응답을 새로운 윈도우나 탭에서 보여줌
_self 기본값, 응답을 링크가 위치한 현재 프레임에서 보여줌
_parent 응답을 현재 프레임의 부모 프레임에서 보여줌
_top 응답을 현재 윈도우 전체에서 보여줌
프레임 이름 응답을 명시된 프레임에서 보여줌

 

form 태그에서 사용할 수 있는 method 속성의 속성 값으로는 아래의 2가지가 있다.

속성값 설명
GET 보내는 정보를 url에 명시, 눈에 보이기 때문에 보안에 취약, 용량 제한, 북마크 가능
POST url에 명시X(데이터는 request body에 위치), 보안O, 용량제한 X, 북마크 X

GET 방식은 보안이 필요하지 않으면서 지정된 리소스에 자원을 읽고 싶은 경우에 사용되고, 그렇지 않은 경우 POST 방식을 사용한다.

 

 

이를 이용하여 폼 태그 속성을 아래와 같이 지정할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action = "https://www.w3schools.com/action_page.php" accept-charset="utf-8"
    name = 'formEx' target="_blank" method="get">

    </form>
</body>
</html>

 

위의 예제는 formEx라는 이름을 가지는 form 태그가 안의 정보를 action에 정의한 url로 utf-8 인코딩을 통해 GET 방식으로 보내고, 받은 응답은 새로운 창에 띄우는 동작을 하는 코드이다.

 

 

 

Form 요소(element)

form 태그는 정보를 입력 받고 보내는 여러 요소 태그와 함께 동작한다. 

 

 

폼 그룹 태그 : fieldset, legend

fieldset 태그는 폼 태그 안에 관련 있는 여러 폼 엘리먼트들을 그룹화할 때 사용한다. legend 태그는 그룹의 이름을 지정하는 태그이다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="https://www.w3schools.com/action_page.php" method="GET">
    <!-- 그룹화 -->
    <fieldset style="width: 150px;">
      <!-- 그룹 이름 -->
      <legend>이름</legend>
      First name: <input type="text" name="firstname" value="미키"><br>
      Last name: <input type="text" name="lastname" value="마우스"><br><br>
    </fieldset>
    <fieldset style="width: 150px;">
      <legend>신체 정보</legend>
      height: <input type="text" name="firstname" value="180"><br>
      weight: <input type="text" name="lastname" value="80"><br>
      <br>
    </fieldset>

  </form>
</body>

</html>

 

아래와 같은 결과를 얻을 수 있다.

 

폼 입력 태그 : input

input 태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어준다. 데이터를 입력 받는 핵심 태그이다 보니 여러가지 속성을 가지고 있다.

속성 설명
type 어떠한 타입의 데이터를 입력 받을지를 지정하는 속성이다.
ex) text, radio, checkbox, password, button, submit, reset,...
name 태그 이름을 지정
readonly 태그를 읽기 전용으로 지정
maxlength 태그 최대 글자수를 지정
required 해당 태그를 필수 입력 태그로 지정, 입력하지 않고 submit 시 에러메세지를 브라우저에 출력
autofocus 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동
placeholder 태그에 입력할 값에 대한 설명을 지정
pattern 정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용

 

위의 입력 태그 속성을 사용한 예제이다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="https://www.w3schools.com/action_page.php" method="GET">
    <!-- 그룹화 -->
    <fieldset style="width: 350px;">
      <!-- 그룹 이름 -->
      <legend>개인 정보 입력</legend>

      <!-- required : 필수 입력-->
      이름: <input type="text" name="name" required><br><br>

      <!-- 패턴대로 입력하지 않으면 경고창 뜸 -->
      주민번호: <input type="text" name="person_code" 
      pattern="[0-9]{6}-[0-9]{7}" title="123456-1234567 형식으로 입력해주세요"><br><br>
      아이디: <input type="text" name="id"><br><br>
      패스워드: <input type="password" name="pw"><br><br>

      <!-- radio는 같은 그룹끼리는 무조건 같은 name을 가져야 함-->
      <!-- checked는 페이지 로딩 시 기본값으로 체크 되어 있도록 하는거-->
      성별: 남<input type="radio" name="gender" checked>
            여<input type="radio" name="gender"><br><br>

      <!-- 체크박스는 같은 이름 공유X, 중복 선택이 가능하므로 -->
      컴퓨터언어: C++<input type="checkbox" name="checkbox1">
                 Python<input type="checkbox" name="checkbox2">
                 JavaScript<input type="checkbox" name="checkbox3"><br><br>

      <input type="submit" value="submit">
      <input type="reset" value="reset"><br><br>
    </fieldset>

  </form>
</body>

</html>

 

아래와 같이 잘 동작하는 것을 볼 수 있다.

 

input 태그는 타입에 따라 주의해야 점이 다르다. 예를 들어, 위의 예제에서 radio 타입을 사용한 성별 입력란은 하나만 선택하게 해야 한다. 그렇게 하기 위해서는 radio 타입이 하나의 이름을 공유하고 있어야 중복 선택을 허용하지 않는다. 반면 checkbox는 중복 선택을 허용하기 때문에 다른 name을 가지고 있어야 한다.

 

이렇듯, input 태그는 타입별로 사용법이 조금씩 다르고 가지고 있는 속성도 달라지기 때문에 이 점 주의하여 사용하여 한다.

 

 

폼 목록 태그 : select, optgroup, option

select 태그는 항목을 선택을 할 수 있도록 하는 태그이다. radio, checkbox 와는 달리 선택항목을 목록으로 보여주는 것이 차이점이라고 할 수 있다. select 의 속성은 다음과 같다.

속성 설명
size 한번에 표시할 항목 수를 지정
multiple 다중선택을 허용할 것인지를 지정

 

select 태그는 선택 항목 목록을 생성하겠다고 선언하는 태그이다. 그렇기 때문에 목록을 지정해주는 하위 태그인 optgroup, option 태그가 필요하다. optgroup은 이름에서 알 수 있듯이 목록 태그인 option을 그룹화하는데 사용되는 태그이다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="https://www.w3schools.com/action_page.php" method="GET">
    <!-- 그룹화 -->
    <fieldset style="width: 500px;">
      <!-- 그룹 이름 -->
      <legend>select 연습</legend>

      사용 가능한 프로그래밍 언어 선택 (기본 목록)<br>
      <select name='lang1'>
        <option value="C">C</option>
        <option value="C++">C++</option>
        <option value="Java">Java</option>
        <option value="JavaScript">JavaScript</option>
        <option value="Python">Python</option>
      </select><br><br>

      사용 가능한 프로그래밍 언어 선택 (size 변경)<br>
      <!-- size : 3-->
      <select name='lang2' size=3>
        <option value="C">C</option>
        <option value="C++">C++</option>
        <option value="Java">Java</option>
        <option value="JavaScript">JavaScript</option>
        <option value="Python">Python</option>
      </select><br><br>

      사용 가능한 프로그래밍 언어 선택 (multiple 옵션)<br>
      <!-- size : 3-->
      <select name='lang3' size=3 multiple>
        <option value="C">C</option>
        <option value="C++">C++</option>
        <option value="Java">Java</option>
        <option value="JavaScript">JavaScript</option>
        <option value="Python">Python</option>
      </select><br><br>

      사용 가능한 프로그래밍 언어 선택 (optgroup)<br>
      <!-- size : 3-->
      <select name='lang4'>
        <optgroup label="Web">
          <option value="HTML">HTML</option>
          <option value="CSS">CSS</option>
        </optgroup>
        <optgroup label="programming">
          <option value="C">C</option>
          <option value="C++">C++</option>
          <option value="Java">Java</option>
          <option value="JavaScript">JavaScript</option>
          <option value="Python">Python</option>
        </optgroup>
      </select><br><br>

      <input type="submit" value="submit">
      <input type="reset" value="reset"><br><br>
    </fieldset>

  </form>
</body>

</html>

 

아래의 결과를 얻을 수 있다.

 

여러줄 글 상자 : textarea

textarea는 여러 줄을 입력 받을 수 있는 태그로 rows, cols 속성을 통해 입력될 크기를 지정을 한다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="https://www.w3schools.com/action_page.php" method="GET">
    <!-- 그룹화 -->
    <fieldset style="width: 500px;">
      <!-- 그룹 이름 -->
      <legend>textarea 연습</legend>

      textarea - row : 10 / col : 100 <br>
      <textarea rows="10" cols="100" placeholder="textarea 연습임"></textarea><br>

      <input type="submit" value="submit">
      <input type="reset" value="reset"><br><br>
    </fieldset>

  </form>
</body>

</html>

 

아래와 같은 폼이 나온다.

 

 

그 외

그 외에도 HTML5에서 추가된 엘리먼트로 datalist, date, number, range 등 다양한 요소 태그 들이 있지만, 특정 브라우저에서는 아직 지원하지 않는 경우도 있기 때문에 주의하여 사용하여야 한다. (해당 태그에 대한 건 추후 포스팅에서...)

 

728x90
저작자표시 비영리 동일조건

'Web > HTML' 카테고리의 다른 글

[HTML] Semantic Tag  (0) 2023.10.30
[HTML] display  (0) 2023.10.29
[HTML] list  (1) 2023.10.29
[HTML] Table  (0) 2023.10.28
[HTML] Tag - Image  (0) 2023.10.20

관련글

티스토리툴바