Forms 📄

우리는 인터넷을 사용하면서 많은 로그인과 회원가입을 한다. 많은 포털 사이트 뿐만 아니라 온라인 쇼핑몰 등에서 말이다. 많은 로그인과 회원가입의 과정 중에 이제 우리가 배우는 form과 관련된 태그들이 있다. 하나씩 살펴보도록 하자!

<Form>의 기본 속성

<form>은 기본적으로 정보를 입력하는 영역을 가리키는 태그이다. <form>에 입력을 하고 제출하게 되면 데이터가 서버로 전송이 되고 전송된 데이터는 웹 서버가 처리하며 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송한다.

<form>의 동작방식 ⚙️

1. 웹 페이지에 있는 form에 데이터를 입력
2. 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동
3. 웹 서버는 데이터를 처리하기 위해 APP을 호출
4. 필요에 따라 APP은 DB로 데이터를 전송
   3-4번의 과정에서 APP과 DB는 물리적인 별도의 서버일 수도 있음
5. DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송
   CRUD = Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 의미
6. 웹 서버는 받은 결과를 Client 브라우저에게 전송
7. 사용자 브라우저는 Response 받은 페이지를 렌더링하여 사용자에게 출력하여 보여줌

<form>의 속성

<form> 태그는 action와 method 속성을 가진다.

<form action="" method="get">
    <input type="text" name="userId">
    <input type="password" name="userPw">
    <button type="submit">로그인</button>
</form>

• action : 입력 값을 전송할 페이지를 나타냄, 속성값이 빈 값이면 현재 문서가 전송받게 된다.
• method : <form>의 데이터를 전송할 방법을 정의하는 속성, 속성값으로는 get과 post가 있다. get은 웹 서버에 데이터를 요청할 때 사용하며, 주소(URL)에 데이터를 입력하는 방식이고, post는 파일을 올리거나, 보안이 필요한 데이터를 전송할 때 등 사용한다.

간단하게 말하자면,
사용자가 입력한 정보(method를 통해 얻은 데이터)를 action에 있는 곳에 정보를 보내는 것!

http://127.0.0.1:5500/form.html?userId=jj134&userPw=123

위의 주소에서 ?userId=jj134&userPw=123가 전송한 데이터인데, 위처럼 주소(URL)에 쿼리 스트링으로 추가된다. 주의할 점은 get으로 데이터를 전송한 경우 주소에 데이터가 다 보이기 때문에 보안이 필요한 데이터는 절대 전송하지 않도록 한다.

그에 반해 post는 데이터를 전송해도 주소에 데이터가 보이지 않게 한다. 그래서 보안에 민감한 데이터들을 전송할 때 사용한다.

<input> ℹ️

<input>은 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력을 받는다. 또한 사용자가 입력하는 정보는 '개인정보'이기 때문에 method의 값은 post로 한다.
그리고 <input>의 type속성은 무조건 "하나의 타입"만 가진다. 두 개의 타입은 가질 수 없다.

<form action="" method="post">
  		<!-- text : 텍스트를 입력하는 input 태그 -->
        <input type="text" name="userId"><br>
        <!-- password : 패스워드를 입력하는 input 태그, 입력한 값을 기호로 나타냄(마스크처리) -->
        <input type="password" name="userPw"><br>
        
  		<!-- search : 검색할 수 있는 input 태그 -->
        <input type="search" name="searchInput"><br>
  
        <!-- checkbox : 0개 이상의 보기를 선택할 수 있는 input 태그 -->
        <input type="checkbox" name="" id=""><br>
        
        <!-- radio : 보기 중 하나만 선택 가능한 input 태그 -->
        <!-- 보기가 여러개일 경우 name속성의 값을 일치 시키면 하나만 선택 가능 -->
        <input type="radio" name="성별" id="male">
        <label for="male">남</label>
        <input type="radio" name="성별" id="female">
        <label for="female">여</label><br>
        
  		<!-- color : 컬러 피커를 통해 색을 선택하는 input 태그 -->
        <input type="color" name="" id=""><br>
  
        <!-- date : 날짜를 입력하는 input 태그 -->
        <input type="date" name="" id=""><br>

   		<!-- time : 시간를 입력하는 input 태그 -->
        <input type="time" name="" id=""><br>
  
        <!-- email : 이메일을 입력하는 input 태그 -->
        <input type="email" name="" id=""><br>
        
        <!-- hidden : 보이지 않지만 입력된 값을 받아서 자바스크립트로 전송하는데 주로 사용함 -->
        <input type="hidden" name=""><br>
  
        <!-- range : 슬라이드 바 형식의 input 태그 -->
        <input type="range" name="" id=""><br>
        
  		<!-- number : 수를 선택할 수 있게 하는 input 태그 -->
        <input type="number" name="" id=""><br>
        
  		<!-- url : 웹페이지 주소를 입력하게 하는 input 태그 -->
        <input type="url" name="" id=""><br>
        
  		<!-- tel : 전화번호를 입력하는 input 태그 -->
        <input type="tel" name="" id=""><br>
  
  		<!-- file : 파일을 업로드할 수 있는 input 태그 -->
        <input type="file" name="" id=""><br>
        
  
  		<!---->
        <button type="submit">로그인</button><br>
</form>

<input>과 함께 쓰이는 <label> 🔖

<input>태그를 설명하기 위해 다른 텍스트 태그를 붙여 설명할 수 있다. 하지만 웹접근성을 위해 <label>을 사용해 시각 장애인들도 폼을 사용할 수 있도록 하는 시멘틱한 태그이다.

<label>의 속성

<label>은 특이하게 화면에 출력되는 <label>의 콘텐츠만 클릭해도 <input> 클릭 영역이 넓어지기 떄문에 포커스가 <input>으로 포커스와 커서가 이동한다. 이를 위해선 속성인 for로 <input>과 연결(?)해야하는데 한번 보도록 하자!

<input type="radio" name="성별" id="male">
<label for="male">남</label>
<input type="radio" name="성별" id="female">
<label for="female">여</label><br>

위의 이미지에서 보이는 콘텐츠 "남"과 "여"가 각각의 radio타입의 <input>에 연결했다.
연결 방법은 연결할 <input>의 id와 <label>의 for의 값이 일치해야 연결이 된다.

하지만 이 속성을 사용하지 않고도 적용시킬 수 있다.

<label>
	이름 :
	<input type="text" name="name">
</label>

<label>안에 <input>을 자식 요소로 넣는 것이다.
하지만 나는 <label>의 for를 사용하는 것을 선호해서 전자처럼 사용한다.