[HTML] 2. HTML5 2

이번 포스팅에서는 지난 번에 이어 HTML5에 대한 내용을 다루려고 합니다. 이번에 집중적으로 알아볼 부분은 input 태그와 form 태그의 method, input 태그, 그리고 주석입니다.

1. input 태그와 속성

form은 입력 양식입니다. 구글 폼과 같은 것들을 사용해보셨다면 충분히 예상하실 수 있으실텐데, form 태그 내부는 input 태그로 구성되어 있습니다. form 태그를 사용하는 이유에 대해서는 두 번째에서 말씀드리도록 하겠습니다.

input 태그는 아주 많은 속성을 가지고 있습니다. 지금까지 제가 웹 공부를 하면서 가장 많이 본 속성은 type, value, placeholder, name 정도가 있습니다. 하나씩 차차 알아보도록 하죠! 전체 input 태그의 속성에는 다음 url에서 확인하실 수 있습니다. www.w3schools.com/tags/tag_input.asp

가장 먼저 소개할 input 태그 속성은 type입니다. 이 type을 설정함에 따라 input에 받을 정보의 종류를 결정할 수 있습니다. 자주 쓰이는 type 속성을 아래에 정리해두었습니다.

• <input type="text"> : text 입력
• <input type="email"> : email 입력. 입력에 @가 없으면 오류 메세지 출력
  • <input type="email" required> : required 를 사용해 필수입력으로 설정, 입력하지 않으면 경고메세지 출력
• <input type="date"> : 날짜 형식 입력
• <input type="radio"> : 다지선일 형식 입력
  • <input type="radio" name = "something">: 같은 name을 가지고 있는 선택지끼리 복수선택이 되지 않도록 조정
• <input type="checkbox"> : 다지선다 형식 입력
• <input type="submit"> : 제출 버튼
• <input type="reset"> : 초기화 버튼
  • submit과 reset 모두 value를 추가해서 버튼 내용(placeholder) 변경 가능
• <input type="password"> : 암호화된 입력
  • minlength를 이용해 최소 자리수 설정 가능
• <select>
  • 여러 개의 옵션을 설정해 선택, multiple을 select 안에 추가하면 복수선택이 가능

<select multiple>
	<option value = "Volvo">Volvo</option>
	<option value = "Audi">Audi</option>
</select>

 

input 태그의 다른 속성으로는 value가 있습니다. value는 input 태그의 초기값을 설정합니다. 따라서 input 태그의 타입에 따라서 value 값을 가질 수 있는 것도 다릅니다. 예를 들어볼까요?

<input type="text" value="예시 텍스트" /> 라고 하는 코드가 있다고 생각해보면, 예시 텍스트라는 문구가 text 타입에 알맞기 때문에 아래 사진과 같은 결과가 나옵니다.

반대로, file 타입의 경우에는 value를 설정할 수 없습니다. 입력받을 데이터 타입이 file인데 초기값을 넣어줄 수는 없겠죠.

비슷한 개념으로 placeholder도 있습니다. placeholder은 초기값이 아니라 입력을 위한 도움말입니다. input 태그란을 클릭했을 때 배경에 흐릿하게 보이고, 입력하면 자동으로 사라집니다. 사진에서 선명도의 차이가 보이시나요?

예를 들어, 로그인 페이지에서 이메일 입력창에 username@example.com 이라고 흐린 글씨로 쓰여있는 것 등이 placeholder라고 할 수 있습니다. <input placeholder="예시 텍스트"/> 와 같이 씁니다.

다음은 name입니다. 말 그대로 여러 개의 input 태그를 사용할 때 태그를 구분하기 위해 사용됩니다. 태그를 구분하는 이유는, 자바스크립트에서 input 데이터를 받아올 때 요소를 참조하기 위해서도 사용되고, form을 제출한 후 서버에서 form 데이터를 받아오기 위해 사용되기도 합니다. <input name="name" /> 과 같이 씁니다.

2. form 태그의 method 속성

form 태그는 method라는 속성을 가지고 있습니다. 이 속성은 두 가지 값을 가질 수 있는데, GET과 POST입니다.

GET과 POST는 form에 입력한 데이터들의 전송방식이라고 이해할 수 있습니다. submit 버튼을 누르면 해당 데이터들은 클라이언트에서 서버로 전송되는데, 이 때 사용하는 HTTP 메소드를 명시합니다. 

• <form method="GET">은 URL에 정보를 담아서 전송하는 방식입니다. 쿼리 문자열을 사용하기 때문에 데이터 길이에 제한이 있고, 보안상 취약점이 존재합니다.
• <form method="POST">는 header의 body에 담아서 전송하는 방식입니다. 쿼리 문자열과는 별도로 전송되기 때문에 길이에도 제한이 없고 보안성이 더 높습니다.

3. 주석

html에서 주석은 여타 언어와는 조금 다릅니다. java나 c가 그렇듯이 // 를 쓰지도 않고, 파이썬처럼 #을 쓰지도 않습니다. html의 주석은 <!-- 주석 내용 -->으로 씁니다. 다른 포스트에서도 언급한 적이 있지만 주석은 프로그래머 자신에게도, 코드를 읽을 다른 사람에게도 이해를 돕기 위해 중요한 부분이니 습관화 하도록 노력합시다(저도 노력중입니다.....)

---

오늘 포스팅은 비교적 간단하게 끝마쳤습니다. 요즘에는 리액트 공부를 하고 있어서, html 의 기초 개념을 다시 다루는게 조금은 새롭게 느껴지네요. 다음 번에는 css의 기초에 대해서 몇 개 포스팅을 거쳐서 공부해보려고 합니다. 주기적으로 올릴 수 있도록 노력하겠습니다 :)

마스크 꼭 쓰시고, 오락가락하는 기온에 감기도 조심하시면서 몸 챙기시길 바라겠습니다.