코드잇 학습일기 Day17. 폼 태그 속성, 인풋 태그 종류와 속성

어제는 폼(form) 태그의 구성과 인풋, 라벨, 버튼을 만드는 코드를 공부했다. 오늘은 어제에 이어 폼 태그의 속성, 인풋의 종류 등에 대해서 알아볼 예정이다.

 

코드잇 학습일기

 

폼 태그의 속성

폼 태그는 action 속성과 method 속성 - 두 가지 속성을 가지고 있다.

action 속성

폼에 내용을 입력하고 버튼을 누르면 기본적으로 페이지를 이동한다. 만약 현재 페이지의 주소가 heinafantasy.com 이라고 가정하고, 아이디에 heina, 비밀번호에 1234를 적었다고 하면, 버튼을 눌렀을 때 아래와 같은 주소로 이동한다.

 

http://heinafantasy.com/?id=heina&password=1234

 

주소를 자세히 들여다 보면, 물음표 이후로 폼에 입력한 값이 들어있다. 이런 것을 쿼리 문자열(Query String) 이라고 한다. 만약 현재 페이지 주소 말고 다른 페이지 주소를 사용하고 싶다면 action 속성을 사용하면 된다.

 

<form action="https://google.com/search">
  <input name="q">
  <button>검색</button>
</form>

 

만약 위와 같은 코드로 짜여진 화면에 '디지털 노마드'라고 적고 검색 버튼을 누른다면 https://google.com/search?q=디지털 노마드 라는 주소로 이동할 것이다.

 

method 속성

웹 브라우저가 어떤 데이터를 전송할 때에는 서버에 '리퀘스트'를 보낸다. 리퀘스트의 종류에는 여러가지가 있는데 그 중에서 get 리퀘스트와 post 리퀘스트를 알아보자.

 

• get : 데이터를 받을 때 사용
• post : 데이터를 보낼 때 사용

 

폼에 있는 버튼을 눌렀을 때 페이지가 이동하는 것은, 웹 브라우저가 어떤 서버로 get 리퀘스트를 보낸 것이다. 그런데 프로필 사진 업로드 같이 파일 크기가 너무 큰 경우 get 리퀘스트와 쿼리 문자열 만으로는 데이터를 보낼 수가 없다. 그럴 때에 우리는 post 리퀘스트를 주로 사용한다. 

 

<form method="post">
  <div>
    <label for="profile">프로필 사진</label>
    <input id="profile" name="profile" type="file">
  </div>
  <button>
    확인
  </botton>
</form>

 

참고로 method 속성의 기본값은 get 이다. 더해서 post 메소드를 잘 보내는지 확인하기 위한 테스트용 서버가 있는데 아래 링크를 클릭하면 이동할 수 있다. 이 사이트의 사용 방법은 나중에 기회가 되면 추가 포스팅으로 소개하도록 하겠다.

 

https://pipedream.com/requestbin

RequestBin — A modern request bin to collect, inspect and debug HTTP requests and webhooks - Pipedream

 

인풋 태그의 종류

텍스트(text)

인풋 타입의 기본값이다. 일반적인 텍스트를 입력할 때 사용한다.

<input name="nickname" type="text">

 

체크박스(checkbox)

개인정보 취급방침 동의 등 한가지 항목만 선택하는 경우에는 greement(name)값이 on 이라는 문자열로 저장된다.

 

한 가지 항목만 선택하는 체크박스의 경우

 

여러 항목 중에서 복수 항목을 선택하는 경우에는 value 속성으로 값을 지정해준다. 아래 코드에서 아바타, 타이타닉을 선택한 후에 폼을 전송하면, 쿼리 문자열에서는 &movie=Avatar&movie=Titanic 으로 전송된다.

 

복수 항목을 선택하는 체크박스의 경우

 

날짜(data)

인풋 타입으로 date를 사용하면 날짜를 선택할 수 있다. (오와...신기...🫢)

 

인풋 타입 date 예제

 

파일(file)

인풋 타입으로 file을 사용하면 파일을 선택하여 첨부할 수 있다.

 

인풋 타입 file 예제

 

accept 속성으로 선택 가능한 파일 확장자를 지정할 수 있다. 위의 예제에서는 png 파일과 jpg 파일로 선택 확장자를 제한해 보았다. multiple 이라는 참/거짓 속성으로 여러 개 또는 한 개만 선택하도록 설정할수도 있다.

 

이메일(email)

텍스트를 입력하는 인풋과 디자인은 동일하지만, 버튼을 눌러서 폼을 전송할 때 올바른 이메일 형식인지 자동으로 검사해 준다.

<input name="email" type="email">

 

 

비밀번호(password)

인풋 내용이 가려진 형태로 표시되어, 어떤 값을 입력했는지 화면에서 확인할 수 없다.

<input type="password">

 

 

숫자(number)

인풋 타입으로 number를 사용하면 숫자만 입력이 가능하다. 일반 텍스트는 키보드를 눌러도 입력이 되지 않는다. min 속성으로 최소값, max 속성으로 최대값 지정이 가능하며, step 속성을 지정하면 버튼을 눌렀을 때 증가, 감소할 양을 정할 수 있다. 버튼을 눌렀을 때 점프하는 숫자의 양만 정하는 것이지 다른 숫자를 입력하지 못하는 것은 아니다.

ex) 아래 이미지에서 step을 10으로 설정했더라도 일의 자리수를 자유롭게 입력 가능 - 32, 49 등

 

인풋 타입 number 예제

 

라디오(radio)

인풋 타입으로 radio를 사용하면 동그란 선택 버튼으로 표시된다. 체크박스와 다른 점은 같은 name을 가진 인풋 중에서는 하나의 항목만 선택이 가능하다는 점이다. 아래 예제에서 좋음을 선택하면 feeling의 값으로 3이 들어간다.

 

인풋 타입 radio 예제

 

범위(range)

인풋 타입으로 range를 선택하면 해당 범위 안에서 선택이 가능하다.

인풋 타입 range 예제

 

옵션 선택 <select>

미리 정해져 있는 여러 값들 중에서 하나를 선택하려면 <select> 태그를 사용하면 된다. <select> 태그 안에서 <option> 태그를 value 속성과 함께 사용한다. 아래 예제에서 다큐멘터리를 선택하면 program의 값으로 documentary가 들어간다.

 

옵션 선택할 때 select 태그 예제

 

긴 글 <textarea>

긴 글을 입력하는 칸을 만들 때에는 <textarea>를 사용한다. 이 태그는 <input> 태그와는 달리 종료 태그 </textarea>가 꼭 필요하다.

 

긴 글을 쓸 수 있는 textarea 태그 예제

 

인풋 태그의 속성

유용하게 쓰이는 인풋 태그의 속성 두가지를 소개하도록 하겠다.

placeholder

플레이스홀더 속성은 인풋 내용이 아직 입력되지 않았을 때 보여주는 텍스트를 가리킨다. placeholder의 스타일을 바꾸려면 input::placeholder 라는 css 선택자를 사용하면 된다.

 

placeholder 속성 사용 예제

 

required

우리가 어떤 사이트에서 회원가입을 할 때 아이디, 비밀번호 등 필수적으로 입력해야 하는 항목들이 있다. 이처럼 폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 사용한다.

 

required 속성 사용 예제

 

autocomplete

이전에 입력한 적이 있는 값들을 보여주는 자동완성 기능을 사용하려면 autocomplete 속성을 사용하면 된다. 속성값으로는 on을 넣는다. on 이외에도 이메일을 넣고 싶다면 autocomplete의 속성값으로 email, 전화번호를 넣고 싶다면 tel을 넣으면 된다.

 

<input name="search" type="text" autocomplete="on">
<input name="email" type="email" autocomplete="email">
<input name="telephone" autocomplete="tel">

 

더 많은 내용을 알고 싶다면 아래 링크를 클릭!

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

HTML attribute: autocomplete - HTML: HyperText Markup Language | MDN

---

폼(form) 공부가 모두 끝났다. 다음 커리큘럼은 link 태그이다. html 공부가 점점 더 재밌어진다.

 

코드잇 오늘 공부