오전의 긍정왕 "메이커준😆"님의 힐링 워크샵이 끝난 후 <form>과 관련된 태그와 속성들을 마무리 했다.
<form>과 관련된 태그들은 실무에서도 많이 사용하는 태그들이 많기 때문에 한번 더 복습해보도록 하자!

<Form>의 GET/POST METHOD 😮

<form>은 <input> <select> 등에서 사용자의 입력을 거쳐 서버에 데이터를 전송하는 태그이다.
서버에 데이터를 전송하는 것은 단순한 과정 같지만 우리의 복잡한 서버와 클라이언트는 절대 평범하게 보내지 않는다.
이래서 공부를 안하곤 절대 안된다.

<form>은 기본적으로 메서드를 두개 가지고 있다.

<form action="" method="">
	<!-- <input> 등 forms 태그 -->  
<form>

첫번째 속성인 action은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 설정한다.

<form action="URL/파일경로" method="">
	<!-- <input> 등 forms 태그 -->  
<form>

속성 action의 값은 두 가지로 나눌 수 있다. 절대경로와 상대경로

• 절대 경로(absolute URL) : 다른 웹 사이트를 가리키는 경로. 쉽게 생각하면 우리가 주소창에서 자주 보는 "완전한 URL"이라고 생각하면 된다.

• 절대 경로(absolute URL) : 웹 사이트 내의 파일을 가리키는 경로. 쉽게 생각하면 우리가 외부 CSS파일을 link href=""태그로 연결할 때의 경로의 형식을 갖춘 경로로 생각하면 된다.

두번째 속성인 method는 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 설정한다. 양식을 제출할 때 사용하는 "HTTP" 메서드이다.

속성 method의 값은 많이 있지만 나는 get과 post만 일단 다루도록 한다.
현재 http를 동기분들과 스터디 중이라 나중에 꼭 http를 주제로 다루도록 해보겠다.

아무튼 속성마다 간단한 설명을 하자면 이렇다.

• get : 클라이언트(사용자)가 서버를 불러서 요청사항을 말하는 것
• post : 클라이언트가 서버에 아무도 보지 못하게 보내는 것

get은 내가(사용자) 저기 멀리 있는 사람(서버)한테 큰 소리(보안 목적 X)로 정보(데이터)를 누구든지 들리게(URL표시) 말하는 것(요청하는 것)이다.

post는 내가(사용자) 저기 있는 사람(서버)한테 조용히(보안 목적 O) 정보(데이터)를 쪽지에 접어서(URL표시 X) 전해주는 것(요청하는 것)이다.

이 비유를 듣고 정말 감탄을 했다... 레전드 강사님.. 존경합니다.. 🫡

간단한 복습 정리 ✏️

우선 전체적인 오늘의 실습 소스 코드는 이렇다.

<!-- form 내부 -->
	  <input type="text" required>
      
	  <input type="tel">

      <input type="email">
   
      <select name="device" id="myDevice" size="1">
        <option value="0">선택</option>
        <option value="애플">아이폰</option>
        <option value="삼성" selected>갤럭시</option>
        <option value="LG">LG</option>
      </select>

	  <fieldset>
        <legend>개인정보</legend>
        <label for="myName">이름</label>
        <input type="text" name="name" id="myName">
        <label for="myTel">전화번호</label>
        <input type="tel" name="tel" id="myTel">
        <label for="myEmail">이메일</label>
        <input type="email" name="email" id="myEmail">
      </fieldset>

	  <fieldset>
        <legend>개인정보 제공 동의</legend>
        <label for="checkAgree">개인정보 제공에 동의하십니까?</label>
        <input type="checkbox" name="agree" id="checkAgree">
      </fieldset>
      
	  <input type="submit">
      <button type="submit">제출</button>

	  <textarea name="" id="" cols="10" rows="10"></textarea>

	  <label for="solasystem">원하는 행성을 선택하세요 : </label>
      <input type="text" id="solasystem" list="planets" name="planets">
      <datalist id="planets">
          <option value="수성">수성</option>
          <option value="금성">금성</option>
          <option value="지구">지구</option>
          <option value="화성">화성</option>
      </datalist>

type="text" / type="tel" / type="email" 📧

• <input type="text"> : 기본적인 텍스트를 입력할 수 있다. 주로 "로그인" 페이지의 아이디를 입력하는데 사용된다.

• <input type="tel"> : 전화번호를 입력하는 입력창을 생성한다. 전화번호의 입력 형식을pattern 속성으로 지정할 수 있다.

pattern은 []안에 숫자의 범위를 입력하고 {}안에 숫자의 길이를 입력한다.

<input type="tel" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">

<small>형식 : 123-4567-8910</small>

만약 설정한 형식과 다르게 작성을 했다면 "요청한 형식과 일치시키세요."라는 경고 툴팁이 나오게 된다.

• <input type="email"> : 이메일을 입력하는 입력창을 생성한다. 이메일 형식은 기본적으로 설정이 되어있어 이메일 형식을 쓰지 않으면 tel과 마찬가지로 경고 툴팁이 나오게 된다.

왜 type="email"이나 type="tel"을 굳이 왜 쓰는거야? 😕

**왜 굳이 번거롭게 우리는 type을 변경하면서 <input>을 써야하는걸까? 그냥 type="text"로 통일해서 사용하면 안되는건가?

물론 type="text"로 통일하면 편하다. 그리고 심지어 출력에는 차이가 전혀 없다. 하지만 이렇게 세부적으로 type을 분류한 이유는 "사용자로부터 올바른 형식의 데이터를 받기 위해서"라고 한다.

만약 당신이 사용자의 이메일을 input태그의 값으로 받아야하는 상황인데 이메일을 보내지 않고 아이디 부분만 보낸다면 일을 번거롭게 두번 더 해야하는 상황이 온다. 이를 방지하기 위해 우리는 type을 상황에 분류하면서 사용할 것이다.

다시는 type을 무시하지마라...

<select>와 <option>

다른 <input>과 다르게 type을 설정하는 것이 아닌 자체가 forms 태그인 <select>와 <option>이다.

<select>는 여러가지 보기 메뉴인 <option>을 설정하고 하나를 선택하는 방식의 태그이다.

위의 이미지를 누르면 가지고 있는 option창이 열리고 선택할 option을 클릭하면 된다.

<select>에도 사용 가능한 속성인 multiple과 size이다.

• size : 드롭다운 메뉴에서 표시하는 최대로 옵션의 수를 설정하는 속성이다.

• multiple : 사용자가 ctrl이나 cmd키를 이용하여 옵션을 복수로 선택할 수 있다.

 <select name="device" id="myDevice" size="3" multiple>
      <option value="">선택</option>
      <option value="애플">아이폰</option>
      <option value="삼성" selected>갤럭시</option>
      <option value="LG">LG</option>
 </select>

아래 이미지는 multiple속성을 적용하여 ctrl이나 cmd키를 이용하여 선택을 한 상태이며, size를 3으로 설정하여 최대 옵션의 수를 조정한 것이다.

그리고 <option>에도 사용 가능한 속성이 있다. selected와 value이다.

• value : 사용자가 선택한 <option>의 값을 서버로 전달하기 위한 값을 설정한다. 주의해야할 점은 사용자가 선택한 값을 서버에 전달할 때 반드시 value 속성의 값을 반드시 넣어줘야 서버로 데이터를 전송 가능하다. 참고로 <option>의 콘텐츠는 출력만 될 뿐 전송되지 않는다.

만약에 <option>을 선택하지 않고 서버로 전송하면 <option>의 가장 첫번째 옵션의 value가 전송된다. 그리고 아무런 value값을 서버로 보내지 않겠다면 <option>의 value값을 빈 값 형태""로 설정하면 된다.

<fieldset>과 <legend>

<fieldset>
     <legend>개인정보</legend>
     <label for="myName">이름</label>
     <input type="text" name="name" id="myName">
     <label for="myTel">전화번호</label>
     <input type="tel" name="tel" id="myTel">
     <label for="myEmail">이메일</label>
     <input type="email" name="email" id="myEmail">
</fieldset>

나는 <fieldset>이라는 태그를 오늘 처음봐서 어떤 용도인지 잘 알아두어야 할 것 같다.🫣

<fieldset>는 **<form> 내에서 구역을 그룹화(구획화) 할 때 사용한다. 영역을 표시하는 기본적으로 적용된 스타일(User-agent-stylesheet)이 있어 CSS로 초기화가 가능하다.
아래의 이미지는 <fieldset>의 User-agent-stylesheet와 출력 결과이다.

또한 <fieldset>은 <form> 태그 내에서 그룹화해주는 태그일 뿐 SEO에 영향을 주지 않는다고 한다.
영향을 주는 것은 <fieldset>의 바로 아래에 사용하는 <legend>이다.

<legend>는 <fieldset>의 "Heading"의 역할을 한다. 아래의 이미지를 보면 빨간 박스가 <legend>가 출력되는 영역이다.

<textarea>

<textarea>는 여러 줄의 텍스트를 입력할 수 있는 태그이다.

 <textarea name="text" id="textarea" cols="20" rows="10"></textarea>

처음보는 속성 두 가지 cols와 rows가 있다.

• cols : 기본값은 20인 열의 개수이다. 즉, 입력창의 넓이를 말한다. 이는 문자의 평균적인 넓이를 기준으로 하기 때문에 설정한 cols의 값과 출력되는 결과는 다를 수 있다.

cols의 결과를 보면 영어는 한 줄에 입력된 글자 수는 설정된 cols값 20과 다른 21개, 한글의 경우 한 줄에 15개가 입력이 되었다. 이를 보면 값이 다를 것이라는 것을 알 수 있다.

• rows : 입력이 가능한 행의 수을 말한다. 이 또한 cols와 같이 문자의 평균적인 높이를 기준으로 하기 때문에 설정한 rows의 값과 출력되는 결과는 다를 수 있다.

rows의 경우 다를 수 있지만 영어/한글은 설정한 rows값과 일치하게 입력이 되었다.

<button>

<button>은 주로 <form>태그 안에서 데이터를 전송하기 위해 주로 사용되는 태그이다.

<button type="submit">제출</button>

<button>은 타입을 설정할 수 있는데 type="submit" type="reset" type="button" 가 있다.

• type="submit" : <form>에 입력된 데이터를 서버로 제출하는 <button>타입이다. type을 설정하지 않을 시 기본값으로 설정된다. <input type="submit">과 같은 동작을 한다.

<input type="submit">

<button type="submit">제출</button>

• type="reset" : <form>의 사용자 입력 값 모두를 초기화한다. <input type="reset">과 같은 역할을 한다.

• type="button": 기본 행동이 없으며 클릭했을 때 아무런 동작을 하지 않는다. 클라이언트측 스크립트와 연결하기 위한 용도로 사용된다.

<button>을 사용할 때 주의해야할 점은 반드시 <button>은 <form> 태그 안에 있어야한다.
만약 **<form>가 2개 이상일 때 <form> 태그의 바깥에 있으면 어떤 <form> 의 데이터를 전송할지 모르기 때문에 반드시 안에 사용**해야한다.

<input type="submit/reset">의 <button type="submit/reset">제출</button> 차이 📏

사용자의 입력 데이터를 받아 서버에 제출하거나 입력된 사용자 값을 초기화하는 역할을 한다. 동작이 같으니 이 두가지 중 어떤 것을 사용해야할까? 이 둘의 차이를 알아보자 😎

우선 <input>은 닫힘 태그가 없어 안에 다른 콘텐츠 추가가 불가능하다. 기본적으로 콘텐츠를 작성하지 않아도 "제출"이라는 임의의 텍스트가 설정되어있다. 물론 안의 콘텐츠는 value로 변경할 수 있다. <input>을 스타일을 적용할 수 있지만 설정하는데 한계가 있다.

하지만 <button>은 닫힘 태그가 있어 콘텐츠를(텍스트, 이미지 등) 추가와 수정이 가능하고 스타일을 자유롭게 사용가능하다.

많은 부분에서 보아 범용성이 높은 <button>을 사용하는 것이 좋다.

<datalist> 📒

<label for="solasystem">원하는 행성을 선택하세요 : </label>
      <input type="text" id="solasystem" list="planets" name="planets">
      <datalist id="planets">
          <option value="수성">수성</option>
          <option value="금성">금성</option>
          <option value="지구">지구</option>
          <option value="화성">화성</option>
      </datalist>

<datalist>도 내가 처음 보는 HTML 태그이다. <datalist>는 <select>와 <input>을 섞어서 사용할 수 있게 하는 태그이다. <input>의 <list> 속성의 값과 <datalist>의 <id>의 값을 일치시켜 연결한다.

클릭하지 않은 상태에서는 기본의 <input>태그와 비슷한 형태이며 클릭했을 때는 <select>,<option>과 유사한 형태이다.

사용자가 직접 <option>을 선택이 가능하고 또한 직접 입력으로 데이터 값을 선택할 수 있다.

클릭하지 않은 상태에서는 아래처럼 출력된다.

클릭한 상태는 <select>,<option>과 비슷한 형태의 드롭다운 메뉴가 나온다.

name 속성의 중요성 📛

  <form action="" method="post">
    <fieldset>
      <legend>개인정보</legend>
      <label for="myName">이름</label>
      <input type="text" name="name" id="myName">
      <label for="myTel">전화번호</label>
      <input type="tel" name="tel" id="myTel">
      <label for="myEmail">이메일</label>
      <input type="email" name="email" id="myEmail">
    </fieldset>
    <button type="submit">제출</button>
  </form>

게시글을 내리면서 자주 보았던 속성이 있었을 것이다. 바로 name이다.

name의 역할은 사용자의 데이터를 서버에 전송할 때 데이터의 key가 되며 사용자가 입력한 값은 value가 된다.

위의 소스 코드의 출력값과 데이터는 아래 이미지처럼 구성되어있다. <input> 임의의 사용자 값을 입력했다.
입력한 상태에서 <button>을 누르면 아래처럼 데이터가 전송이 된 내역이 나온다.
이 내역은 개발자 메뉴 > 네트워크 탭 > index.html 클릭 > 페이로드에서 볼 수 있다.

위에서 말했든 name 속성은 사용자가 입력한 데이터를 서버로 보낼 때 name 속성이 사용자 입력 값인 value의 데이터의 key가 된다.

그래서 name은 데이터의 정보를 위해서 <input>에 필수이다.

오늘의 정리를 마치며.. 💪

오늘은 <form> 태그 섹션을 마쳤다.
<form>은 이번에 만든 "로그인 페이지"부터 "회원가입"까지 만들면서 익숙해졌다고 생각했는데 여전히 복잡한 느낌이 있는 것 같다!

그리고 오늘 forms를 배우는데 데이터의 개념이 나오는 것 같아 이번 팀원분들과 함께하는 HTTP 스터디는 정말 잘한 거라고 생각한다!

솔직히 속으로 뭔가 반갑고 공부를 한다는 것에 뿌듯함을 느낀 하루였다😊