HyunJun 기술 블로그

Web 2.0과 HTML <form>, <label>, <input>, <textarea> Element 본문

HTML

Web 2.0과 HTML <form>, <label>, <input>, <textarea> Element

공부 좋아 2023. 6. 8. 09:28
728x90
반응형

1. World Wide Web 2.0

Web 1.0은 read only였습니다. Web 2.0은 Read와 Write가 가능하고 사용자의 Data를 활용하는 Web을 의미합니다. 즉 현시대에 사용 중인 거의 모든 서비스(웹 서비스)를 의미합니다.

 

  • 사용자와 서비스 제공자의 데이터 입력에 의한 상호작용을 위해 form, label, input, textarea가 존재합니다.
  • 즉, HTML에서 데이터의 입력(input)에 사용되는 요소들이며, form, label, input, textarea이 거의 한 세트라고 봐도 무방합니다.
  • 기존 서비스에서는 로그인, 회원가입 등에서 사용됩니다.

2. <form>

form 요소는 로그인, 회원가입, 설문, 데이터 등을 서버로 전송하기 위해 사용되는 요소입니다.

method는 중요한 정보일 경우 post로 보내고 간단한 내용의 경우 get으로 보내도 무방합니다.

<form action="myserver" method="post">label, input, textarea form</form>

 

아래의 결과를 보다시피, form 요소는 혼자서는 동작하지 못합니다.

결과

2-1. <input>은 데이터를 입력하기 위한 요소

  • type 속성으로 입력받을 데이터가 어떤 타입인지를 설정할 수 있습니다.
  • placeholder 속성으로, 값이 입력되지 않았을 시에 설명 용도로 보일 텍스트를 지정할 수 있습니다.
  • 기본적으로 <input>은 Inline 요소이므로 깔끔하게 보기 위해 스타일을 block 요소로 변경하였습니다.
  • 이러한 input 요소들은 form 태그의 자식 요소로서 존재할 때, form을 전송 시 해당 데이터들로 전송됩니다.
  • name 속성은 해당 폼에서의 이름을 명시합니다.
    • 서버로 제출된 폼 데이터에서 이름을 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용됩니다.
  <head>
    <style>
      input {
        display: block;
      }
    </style>
  </head>
  <body>
    <form action="" method="post">
      <input type="text" name="form-text" placeholder="텍스트 입력" value="기본값" />
      <input type="number" name="form-number" placeholder="숫자 입력" />
      <input type="email" name="form-email" placeholder="이메일 입력" />
      <input type="color" name="form-color" />
      <input type="checkbox" name="form-checkbox" value="체크 박스" />
      <input type="date" name="form-date" />
      <input type="image" src="./submit.png" alt="제출 버튼" style="width: 150px" />
      <button>제출하기</button>
    </form>
  </body>

기본적으로 form 태그의 자식 요소로서 button이 존재한다면 해당 버튼은 form을 submit(제출) 하는 용도로 쓰이게 되며, image 타입의 input 요소는 이미지가 있는 submit 버튼으로 쓰이게 됩니다. 기본적으로 위와 같이 작성 시 action에 설정한 서버 url로 method (get, post)에 맞추어서 전송이 되지만, 현재 서버가 없는 관계로 JavaScript에서 form data를 확인해 보겠습니다.

 

간단하게 </body> 태그 위에 확인용 js 코드를 추가해 보았습니다. form 태그 요소를 가지고 와서, submit이라는 이벤트가 발생할 때 새로고침을 막고, event.target에서 폼데이터를 가지고 와서 새로운 폼데이터를 생성하고 데이터를 콘솔로 찍어보겠습니다.

    <script>
      const myForm = document.querySelector("form");
      myForm.addEventListener("submit", (event) => {
        // submit 행동을 막아줍니다. 즉, 페이지 이동을 아래의 메서드로 막아줄 수 있습니다.
        event.preventDefault();

        const data = new FormData(event.target);
        console.log([...data.entries()]);
      });
    </script>
  </body>

 

이메일 같은 경우 형식에 맞지 않으면 form 전송 시 브라우저에서 자체적으로 막아줍니다.

 

아래와 같이 작성 후, SUBMIT 아이콘과, 제출하기를 각각 눌러 보았습니다.

(좌) 제출하기 클릭, 체크박스 해제 (우) SUBMIT 버튼 클릭, 체크박스 체크

 

2-2. <label>은 input을 설명하기 위한 요소

input 요소를 설명하기 위해 쓰이며, 해당 label을 클릭 시 input 창으로 이동합니다. input의 id와 for을 연결해야 합니다.

  <label for="text">텍스트!</label>
  <input style="display: inline" id="text" type="text" name="form-text" placeholder="텍스트 입력" value="기본값" />

 

 

굳이 id와 for을 연결하지 않아도 아래처럼 input 요소를 label 안에 넣으면 위의 움짤과 동일하게 동작합니다.

  <label>텍스트!
    <input style="display: inline" type="text" name="form-text" placeholder="텍스트 입력" value="기본값" />
  </label>

 

2-3. <textarea>는 많은 양의 텍스트를 편하게 입력하기 위한 요소

text type인 input 요소에서는 엔터(개행)를 사용할 수 없지만 textarea에서는 사용할 수 있습니다. 장문의 글이 필요한 게시판 같은 곳이나, 개행이 포함된 텍스트를 구현하려면 사용하면 됩니다. 기존의 코드에 textarea만 추가했습니다.

<form action="" method="post">
.
.
.
<textarea name="form-textarea" cols="30" rows="10" placeholder="글을 작성하세요."></textarea>
.
.
</form>

 

폼 제출 시, 개행을 포함한 문자열 데이터를 확인할 수 있습니다.

728x90
반응형
저작자표시 비영리 변경금지
'HTML' Related Articles more
Comments