폼태그

D5ngHyun·2022년 7월 14일

HTML 기초

목록 보기

6/6

클라이언트와 서버

클라이언트와 서버에 대해 간단하게 한번 살펴보겠습니다.

클라이언트는 웹 브라우저(크롬, 사파리, 엣지 등)을 말합니다.
서버는 서비스를 제공하는 컴퓨터를 말합니다. 클라이언트와 서버는 서로 요청과 응답을 합니다.
웹브라우저를 통해 주소창에 naver.com을 치고 들어갈때 실제 네이버 서버한테 물어봅니다.

웹 사이트 들어갈때

클라이언트: "나 웹 브라우저인데 네이버야 메인페이지좀 줄 수 있어 ???"
서버 : "알겠어 내가 html파일 줄게"

이런식으로 클라이언트가 요청을 하고 서버는 응답을 합니다.
결론은 클라이언트가 서버한테 요청을하고 웹사이트를 다운받는거고, HTML에 들어가는 CSS파일, JS파일, 오디오, 이미지, 비디오 등등 웹사이트에서 보여줘야하는 모든것들을 다운받게 됩니다.
이때 HTML파일을 읽을때 맨 위에서부터 아래로 읽게됩니다.

폼태그란 ?

폼태그는 사용자한테 입력받아 서버로 데이터를 전송하는 태그입니다.
로그인이나, 검색, 회원가입, MBTI 검사 등등에 사용하는것들을 폼태그입니다.

<form method="POST or GET" action="서버로 전달할 URL">
 
</form>

폼태그의 주요속성

method - GET, POST 서버로 데이터를 전송할때의 방식.
action - 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시함.
name - 폼의 이름

GET

GET 방식은 URL 끝에 데이터를 붙여 보내며 데이터가 외부에 노출되어 보안에 취약합니다.
일반적으로 Read(읽을 때)사용합니다.

POST

POST 방식은 지정된 리소스에서 데이터를 처리할 수 있습니다. (추가/수정/삭제 등) 데이터가 외부에 노출되지 않기 때문에 보안상의 이유가 있다면 POST 방식을 사용하는 것이 적절하겠습니다.

⌨️ 사용자 입력을위한 input태그

input태그란 사용자가 입력을 할 수 있는 태그를 말합니다.
로그인할때 예를 들자면 아이디 입력란, 비밀번호 입력란, 로그인하기 버튼이 있습니다.
이러한 입력란과, 로그인하기를 input태그를 사용하여 만들 수 있습니다.
추가적으로 라디오버튼, 체크박스, 제출, 검색등등 다양한 태그들이 많습니다.

❗️input태그는 단일태그입니다!! 이점 유의

<form method="POST" action="/practice">
  <input type="text" />
  <input type="password" />
  <input type="radio" />
  <input type="checkbox" />
  <input type="search" />
  <input type="submit" />
</form>

type

type을 지정하여 원하는 형식을 만들 수 있습니다.
더 많이보려면 https://www.w3schools.com/html/html_form_input_types.asp
참고해주세요.

name 속성

name은 서버로 전달되는 이름을 말합니다.
필수로 적어주어야 인풋에 있는 값을 폼태그를 이용해 서버로 전달됩니다.
(서버개발자가 값을 받을 수 있습니다.)

<input type="text" name="id" />

placeholder 속성

placeholder는 힌트를 표시해주는 속성입니다.
이름이 조금 어려워서 그렇지 다들 많이 보셨을겁니다.

11번가 사이트인데 위에처럼 아이디 입력란에 아이디라고 회색으로 텍스트가 있는데요,
저렇게 힌트를 표시해주는것을 placeholder라고 합니다.

<input type="text" name="id" placeholder="아이디." />
<input type="password" name="password" placeholder="비밀번호는 8자~20자" />

autofocus 속성

웹 사이트 들어가자마자 자동으로 입력란에 포커스가되어서 클릭없이 바로 입력 되는것을 말합니다.
로그인페이지로 접속을하면 우리가 아이디쪽에 클릭하지않고 바로 텍스트를 입력하는 경험을 하셨을텐데요, 이렇게 자동으로 포커스되는것을 autofocus라고 합니다.

❗️중복해서 써도 맨처음 적용한 태그 하나만 적용됩니다.

<input type="text" name="id" placeholder="아이디." autofocus />
<input type="password" name="password" placeholder="비밀번호는 8자~20자" />

input타입 submit

submit은 제출하다라는 뜻입니다.
submit버튼을 누르면 폼태그에 있는 action값으로 데이터가 전송됩니다.
value속성은 버튼의 이름을 지정할때 사용합니다.

<input type="submit" value="버튼이름(마음대로 바꾸세요)" />

실행결과

input타입 라디오와 체크박스

라디오 박스는 하나만 선택이 가능합니다. 즉 복수선택이 안됩니다.
체크박스는 여러개 중복선택이 가능합니다.

라디오박스

라디오박스를 사용할때에는 name값이 같아야하고 value는 달라야합니다!
name값이 달라지게되면 라디오박스가 중복선택이 됩니다. 이건 의도와 맞지않는것이니 주의 하셔야합니다.

❗️name값이 달라지거나 안넣게되면 라디오박스가 중복선택이 된다.

<form>
  <h4>성별</h4>
  <span>male</span>
  <input type="radio" name="gender" value="male" />
  <span>female</span>
  <input type="radio" name="gender" value="female" />
</form>

체크박스

체크박스는 중복이 선택가능합니다.
라디오박스와 마찬가지로 name속성값이 같아야하고 value는 달라야합니다!

❗️체크박스도 name값이 같아야하고, value값이 달라야지만 서버로 올바른 값이 전달될 수 있습니다.

<h4>당신의 취미는 ???</h4>
<span>축구</span>
<input type="checkbox" name="hobby" value="soccer" />
<span>노래</span>
<input type="checkbox" name="hobby" value="sing" />
<span>춤</span>
<input type="checkbox" name="hobby" value="dance" />
<span>게임</span>
<input type="checkbox" name="hobby" value="game" />

input태그와 연동하는 label태그

밑에 사진을보면 의뢰자 성명이라는 텍스트를 눌러도 바로밑 입력란에 포커스가 되는 경험을
해본적 있으실겁니다. 이때 텍스트(label태그)와 input태그가 같이 연동이 되어있는겁니다.
사용자 경험을 높이기위해 많이 사용하고 있습니다.

label태그와 input태그를 연동을 시키려면 2가지 방법이 있습니다.

첫번째 연동방법

label과 input태그가 분리되어 있을 때
label태그의 for속성값과 input태그의 id속성값이 같아야합니다.

<label for="값이 같아야함!!">아이디</label>
<input type="text" id="값이 같아야함!!" placeholder="아이디"/>

밑에 코드처럼 같아야합니다.

<label for="user__id">아이디</label>
<input type="text" id="user__id" placeholder="아이디"/>

두번째 연동방법

label태그안에 input 태그가 있을 때
label태그의 for속성을 안넣어줘도되고, input태그의 아이디 속성도 필요가없습니다.

<label>아이디: <input type="text" placeholder="아이디"/></label>

어떠한 방법을 사용해도 상관없습니다.
항상 디자인 시안을보고 결정하시는게 좋고 모르실때에는 두가지 방법 모두 다 써보고 뭐가 더 나은지 선택하시면 됩니다.

간단하게 로그인 만들기

최대한 시멘틱태그를 활용해서 만들것입니다.
fielset과 legend태그를 배우지않았지만 예제를 통해서 한번 만들어보도록 하겠습니다.
비슷한 유형으로 table태그의 caption이 있습니다.

fielset태그는 폼태그안에 섹션을 말합니다.
legend태그는 섹션의 제목을 말합니다.

<form>
  <fieldset> <!-- fielset태그는 폼태그안에 섹션을 말합니다. -->
    <legend>로그인</legend> <!-- legend태그는 섹션의 제목을 말합니다. -->
    
    <div>
      <label for="id">아이디</label>
      <input type="text" name="id" id="id" placeholder="아이디를 입력하세요." />
    </div>
    
        <div>
      <label for="pw">비밀번호</label>
      <input type="password" name="pw" id="pw" placeholder="비밀번호를 입력하세요." />
    </div>
    
    <!-- submit을 누르면 데이터가 서버로 전달되게 하는 버튼입니다 -->
    <!-- value라는 속성을 이용해서 이름을 지어줄 수 있습니다. -->
    <input type="submit" value="로그인" />
  </fieldset>
</form>

참고자료

https://mber.tistory.com/44
http://www.tcpschool.com/html-tags/form
https://ofcourse.kr/html-course/form-%ED%83%9C%EA%B7%B8
https://www.w3schools.com/html/html_form_input_types.asp

폼태그