26~27일차 - form과 관련된 여러 태그 및 속성, focus 가상선택자

Form에 대해서

 

form은 웹사이트에서 사용자의 데이터 입력을 위해 만드는 input 폼이다. 문의페이지나 주문을 위해 정보를 입력해야 하는 페이지, 로그인 페이지, 코멘트를 입력하는 페이지 등이 대표적이다.

오늘 만들어본 form 예시

위 이미지는 오늘 수업을 진행하며 만들어본 form 페이지이다. 우리가 흔히 보는 회원가입 페이지와 닮았다.

 

이 form은 함께 쓰이는 여러 속성들이 있다.

• action 속성: 이 속성은 보내고자 하는 요청이 도착하는 URL 주소와 통로를 지정하는 속성이다.
• method 속성: 서버로 전송되어야 하는 HTTP 요청의 종류를 선택하는 속성이다. 대표적으로 GET과 POST 요청이 있으며, 대문자로 입력해야 한다.

위 완성본을 감싸고 있는 form 태그와 속성

이 메소드 속성의 GET 요청은 브라우저의 기본값으로 설정되어 있는 요청방식이며, 어떤 자원을 가져와야할 때 쓰이는 요청이다. 예를 들어 요청의 주목적이 HTML 파일을 불러와서 그 내용을 디스플레이하는 것이라면 GET 요청을 써야한다.

 

또한, 일반적으로 form은 백엔드의 데이터베이스에 사용자 데이터를 저장하기 위해 제출되는데, 이 경우에 POST 요청을 사용한다. 이는 모든 브라우저에 의해 지원되는 요청이기도 하다. 이 요청을 사용하면 브라우저에게 POST 요청을 보냄으로써 서버에 해당 데이터를 저장하라고 명시하게 된다. 저장된 코드의 실행 여부는 서버 쪽의 코드에 따라 결정된다.

form과 함께 쓰이는 여러가지 태그와 속성

 

💡 input 태그: 사용자가 입력한 인풋을 가져오는 용도의 태그이다. 이 태그에는 type 속성이 있는데, 이는 어떤 인풋을 가져올 것인지 설정하는 속성이다. 이 input태그에는 type 속성말고도 몇가지의 속성들이 더 있다.

• name 속성: 입력 요소에 고유한 식별자를 부여할 수 있도록 해주는 속성이다. 다른 태그의 id 속성과 비슷하다.
• value 속성: 사용자가 입력할 값을 입력창 위에 띄워놓는 속성이다.

input 태그의 여러 속성

위 이미지는 오늘 만들어본 폼의 라디오버튼 중 하나에 있는 코드이다. 라디오버튼에 value값을 사용하면 사용자가 볼 수는 없지만, 폼이 제출되었을 때 어떤 값을 선택했는지에 대해 value값을 보고 판단할 수 있다.

 

💡 textarea 태그: 여러 줄의 텍스트 인풋을 가져올 수 있도록 해주는 태그이다. input태그는 보통 짧은 인풋, 한줄짜리 인풋을 수용하는 반면에, textarea는 사용자가 남기는 댓글 혹은 피드백 텍스트를 전부 가져올 수 있다.

 

💡 select 태그: 드랍다운 메뉴를 만들어 사용자가 여러 값 중 하나를 선택할 수 있도록 하는 태그이다.

 

💡 button 태그: 사용자가 어떤 값을 확정하는 기능의 태그이다. 확정하고 제출할 수 있도록 거의 모든 폼에서 필요한 태그가 된다. 또, 이 버튼 밑에 폼을 초기화하는 리셋 버튼으로도 사용할 수 있다.

 

💡 label 태그: 사용자에게 어떤 데이터가 입력되어야 하는지 명시할 때 사용하는 태그이다. label 태그에는 for 속성이 있는데, 어떤 레이블이 어느 입력을 지칭하는지 명시하는 속성이다. 이 for 속성으로 input과 연결하게 되는데, 이 때 input에는 id 속성이 꼭 필요하다. 그 id명과 label의 for 명칭이 같아야 하기 때문이다. input의 name은 양식의 제출 때만 사용되므로 input과의 연결에는 관련이 없게 된다.

label과 input의 만남

input태그 type속성의 여러가지 유형

 

input 태그의 type 속성에는 여러가지 유형들이 있다. 대표적으로 자주 쓰이는 몇가지를 나열해보고자 한다.

 

• email 유형: 다른 입력 필드와 외적으로 동일하지만 이메일 주소만을 입력받는다. 올바른 이메일 유형이 아니면 브라우저에서 기본으로 제공하는 경고창을 통해 알려준다. 또, 모바일 환경에서 이 입력필드를 선택하면 이메일주소를 입력하기 편한 키보드 레이아웃이 표출된다.

email유형으로 잘못된 형식을 입력했을 경우의 경고창

• number 유형: 숫자를 입력받을 때를 위한 유형이다. 이 유형을 사용하면 숫자 외에는 입력이 안되며, 입력창의 오른쪽에 숫자를 올리고 내릴 수 있는 작은 셀렉터도 추가된다. 또, 모바일환경에서 숫자만 있는 키보드 레이아웃을 나타나게 한다.

number유형의 사용

• password 유형: 기본값인 text 유형과 비슷하지만 사용자의 입력을 숨겨서 입력값을 보지 못하도록 한다.

password유형의 사용

• date 유형: 날짜 입력에 최적화된 유형이며, 사용자가 입력창을 누르면 날짜 선택 창이 뜨도록 한다.

date유형의 사용

• radio 유형: 동그란 모양의 라디오 버튼을 생성한다. 이 라디오 버튼으로 여러 선택지를 생성하되, 하나의 선택지만 활성화할 수 있다.

radio유형의 사용

• checkbox 유형: 체크표시를 하는 박스를 생성한다. 예/아니오나 동의여부를 물을 때 사용한다.

checkbox유형의 사용

• file 유형: 서버에 업로드되어야 하는 파일을 사용자가 선택할 수 있는 파일 셀렉터를 생성한다.

file유형의 사용

:focus 가상선택자

 

focus 가상선택자는 입력을 위해 해당 구역이 포커스되면 그 구역의 스타일링을 설정하는 선택자이다.

focus 선택자 예시

위 이미지는 완성된 폼의 인풋 창의 스타일링을 focus 선택자를 이용해서 바꿔준 모습이다. 인풋 창이 포커스되면 배경화면과 글자색, 테두리 색상이 바뀌도록 했다.