HTML 5강. input, form, table 태그

<input></input> 태그

input 태그는 사용자의 상호작용(이벤트)을 받을 수 있는 태그이다.

사용자의 입력을 받아 서버에 전송할 때 사용한다.

 

input 태그는 종류가 매우 많다.

이 종류는 type으로 지정해준다.

 

이 많은 종류들을 모두 알고 있을 필요는 없다.

지금 몇 가지 타입을 살펴본 후 필요할 때마다

https://developer.mozilla.org/ko/ 이 사이트에서 검색한 후 찾아보는 것이 좋다.

MDN Web Docs

input 태그는 혼자 사용하는 태그라서 한 번에 열고 닫는다.

 

타입이 button인 input 태그의 value에 "버튼"값을 주었더니

"버튼"이라고 적힌 버튼이 생긴 것을 볼 수 있다.

 

아직 서버를 배우지 않았기 때문에 버튼을 눌렀을 때 전송되는 이벤트는 일어나지 않는다.

텍스트 박스가 버튼의 옆으로 생성된 것을 보아

input 태그는 inline임을 알 수 있다.

 

보통 텍스트 박스 아래 버튼이 있는 구조를 많이 볼 수 있는데

줄 바꿈이 필요할 때마다 <br />을 쓰기에는 코드가 지저분해지고 복잡해질 것이다.

 

이때는 block으로 css 설정을 해주면 된다.

input 태그 전체에 block 설정을 해주기에는

inline인 input 태그가 필요할 수 있을 것이다.

 

필요한 태그에만 클래스 설정을 해줄 것이다.

클래스 이름을 지을 때 앞에 내가 만든 클래스라는 의미의 my 약자인 m을 자주 사용한다.

 

 

이 텍스트 박스가 어떤 데이터를 넣어야 하는 텍스트 박스인지 사용자가 알아보기 쉽게

속성을 추가해줄 것이다.

placeholder는 힌트와도 같은 것이다.

실제로 글자가 적혀있는 것은 아니기 때문에

텍스트 박스를 클릭하고 값을 입력할 때 바로 사라진다.

비밀번호를 입력할 때 값이 그대로 입력되면 보안에 취약할 것이다.

이때 사용하는 타입이 따로 있다.

타입에 password를 주면 * 아스트리크 모양, 우리가 아는 별표로 입력이 된다.

 

전화번호를 입력하기 위한 타입도 있다.

tel 타입인데 보통 회원가입을 할 때 "-없이 입력하세요"라는

문구를 본 기억이 있을 것이다.

하지만 실제로 실행해보면 -가 있어도 페이지가 넘어갈 것이다.

이것은 -를 허용하게 프로그램을 짠 프로그래머의 잘못이다.

 

-가 있을 때 전송이 안되게 하려면 어떻게 해야 할까?

 

이것을 알기 전에 먼저 알아야 할 것이 있다.

여러 가지 input 태그에 있는 데이터를 서버로 한 번에 묶어서 보낼 수 있는 태그가 있다.

바로 <form></form> 태그이다.

전송하려는 데이터를 form 태그로 묶어주어야 한다.

form 태그를 보면 action이라는 속성이 보인다.

여기에는 자원의 위치(url)를 입력해주어야 한다.

 

그리고 form 태그에 묶여있는 모든 input 태그들을 동시에 전송할 수 있는 타입이 있다.

submit 타입은 button과 모양이 똑같이 생겼지만 기능은 다르다.

input 태그의 모든 데이터를 action의 위치로 전송해주는 역할을 한다.

 

일단 action에 https://www.naver.com을 입력해보자.

그리고 빈칸을 입력해서 회원가입 버튼을 눌러보자.

 

그러면 네이버 화면으로 잘 넘어갈 것이다.

 

그런데 전화번호에 - 모양 없이 입력하라고 했지만

-모양을 입력해도 네이버 화면으로 잘 넘어갈 것이다.

 

어떻게 하면 - 모양이 없을 때만 전송이 가능할까?

 

아까 안내했던 사이트에서 검색해보자.

 

 

숫자 범위와 개수의 패턴이 있음을 알 수 있다.

이걸 그대로 복사해서 코드에 붙여 넣어 보자.

그리고 실행해보면 *** - *** - ****

패턴을 지켜야 넘어가는 것을 볼 수 있다.

패턴을 지키지 않는다면 

오류가 발생한다.

 

이런 패턴들은 하나하나 기억해둘 필요가 없다.

필요할 때마다 검색해서 사용하면 된다.

 

이 패턴에서 알 수 있듯이 우리는 - 모양이 필요 없고 자릿수도 다르니까

pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"에서

pattern="[0-9]{11}"로 바꿀 수 있다.

그러면 - 모양이 있을 때 전송되지 않는 것을 볼 수 있다.

 

만약 아이디나 비밀번호 칸이 공백일 때

빈칸을 채우라는 경고창을 본 적이 있을 것이다.

 

하지만 지금 상태에서 빈칸인 채로 회원가입을 눌러도

네이버 사이트로 잘 넘어갈 것이다.

이를 방지하기 위해 단어 하나만 더 입력해주면 된다.

required이다.

required는 폼 태그의 데이터가 서버로 전송되기 전 반드시 채워져 있어야 하는 입력 필드를 말한다.

 

required를 추가해준 input 태그가 비어있다면 채워달라고 경고창이 뜰 것이다.

 

---

form 태그에는 get과 post 2가지 요소가 있다.

이전에 배웠듯 http 프로토콜에는 url과 get요청밖에 없었다.

 

클라이언트가 회원가입을 위해 get요청을 하면

서버는 html 문서를 줄 것이고

이때 클라이언트는 문서를 작성해서 서버에 post 한다.

프로토콜이 업데이트하면서 post 프로토콜이 생긴 것이다.

 

get은 파일 달라!

post는 파일 줄게!

회원가입과 같은 상황에선 get 할 게 없기 때문에 post를 사용한다.

근데 get인 상태에서도 데이터를 보낼 수 있다. 왜일까?

 

보내는 게 목적인 get은 구체적인 요청을 할 때 사용한다.

A 치킨집에서 치킨을 시킬 때 치킨집의 주소와 원하는 치킨의 종류를 선택하는 것 이외에도

어떤 음료를 원하는지, 순살인지 뼈인지 등등

구체적으로 원하는 자원을 요청할 때 get을 사용한다.

이때 url 주소뒤에 ?(물음표)를 붙이고 "키 = 밸류" 형식으로 연결한다.

구체적인 조건이 여러 가지일 때 & 기호로 연결해준다.

위 사진에서는 음료와 반찬이 키, 콜라와 단무지가 밸류가 되는 것이다.

이것을 쿼리 스트링이라고 한다.

 

아까 사용하던 코드에서 입력받은 데이터들이 밸류가 되는 것이다.

이 밸류의 키는 name 요소로 지정해줘야 한다.

키가 없다면 밸류도 전송이 되지 않는다.

정리해보면 form 태그의 메서드는

구체적인 데이터 값을 요청할 때 get을 사용하고,

서버에 데이터를 넘겨줄 때 post를 사용한다.

 

실행시켜서 올바른 형식에 맞게 회원가입 버튼을 누르게 되면

네이버 url 주소 뒤에 ?를 시작으로 내가 요청한 데이터들이 "키=밸류" 형식으로 적혀있는 것을 확인할 수 있다.

이것이 쿼리 스트링이다.

 

네이버에 이 데이터를 보내더라도 네이버는 "이건 뭐야?" 하고 버려버린다.

쿼리는 질의라는 뜻!

 

이러한 값들은 get요청이기 때문에 주소창에서 눈으로 확인이 가능하다.

post 메서드는 회원가입과 같이 중요한 데이터를 전송할 때 사용하기 때문에

주소창에서 확인할 수 없다.

 

---

<table></table> 태그

 

table태그는 일정한 크기의 행이 모여있고, 내부적으로 열이 모여있는 행열 데이터이다.

 

table 만드는 방법은

<tr></tr> tr : table row 우선 행부터 만들어야 한다.

 <td></td> td : table date 행 안에 열을 만든다. 

 

<th></th> th : table header 제목 열을 나타내는 태그로 글자가 진해진다.

<td colspan="2"></td> : 오른쪽으로 2개의 행 합치기

<td rowspan="2"></td> : 아래쪽으로 2개의 열 합치기

* 행을 합칠 때는 합치려는 방향에 빈칸이 여야 한다.

 

flex 기능이 생긴 이후로 table은 거의 사용을 안 하긴 하지만

table이 더 유용하게 사용될 때가 있다.

 

div로 박스를 나누어 배치를 했을 때

박스가 문자열의 크기, 길이에 맞춰주지 않는다.

문자열이 너무 길다면 잘리게 될 것이다.

반면에 table은 글자크기에 맞춰 크기가 조절되므로

table이 더 적합한 부분에서는

아직도 사용을 한다.

 

[출처]

 

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩