HTML form, input

 웹사이트를 사용하다 보면 로그인이나 회원가입도 하고 검색도 하게 된다. 아래 사진과 같이 검색하는 것도 보았을 것이다. 이런 기능을 구현할 때 form, input으로 구현한다.

위의 코드를 구현하려면 

<form>

  <input type="search"/>

</form>

과 같은 구조를 사용하면 된다.

 

form

  form 태그의 속성으로 request에 대한 목적지인 url, request 방식인 method과 같은 request에 대한 정보를 등록한다. request의 body에 들어갈 데이터는 어떻게 정의할까? 바로 input 태그를 사용하는 것이 대표적이다. 매일 우리가 로그인할 때 아이디와 비밀번호를 입력한다. 이 입력하는 과정이 input 태그에 정보를 넣는 과정이다. 그리고 로그인 버튼을 누르면 form 태그에 대한 request message가 전송되는 것이다. 즉, 사용자에게 id, password,  email 등을 입력받고 이 데이터들을 묶어서 지정한 url로 HTTP request를 날리는 것이다. 웹브라우저는 HTTP 프로토콜을 기반으로 작동하기 때문에 위의 설명이 이해가 되지 않는다면 HTTP 프로토콜을 이해해야한다.

 

fieldset: input들을 그룹별로 묶어준다.

 설문지를 작성할 때 기본 항목가 있고 추가정보가 있다고 해보자. 이것을 html 구조적으로 어떻게 설정할까? 다른 말로, input 여러 개 중에서 일부는 기본정보이고 나머지는 추가정보로 구분하고 싶을 때는 어떻게 해야할까?  input들의 그룹 하나 당 fieldset태그 하나로 감싸면 된다. 그리고 fieldset의 이름을 기본정보로 하려면 fieldset 자식으로 legend를 추가하면 된다. 

 

정리하면, fieldset으로 input을 그룹핑하고 그룹의 이름은 legend로 한다. 아래의 예시는 아이디와 비밀번호는 기본정보이고 이메일은 추가정보라고 가정한 것이다. 코드 구조는 다음과 같다. 

 

<form>

    <fieldset>

        <legend>basic info</legend>    

        <label for="user-id">id</label>

        <input type="text" id="user-id">

        <input type="password" /> 

    </fieldset>

    <fieldset>

        <legend> addition info </legend>

        <input type="email"> 

</form>

 

 위와 같은 형식으로 작성하면 기본정보의 그룹을 만들어서 전송할 수 있다.

 

 input은 입력 중이거나 입력중이지 않은 두 가지 상태가 존재한다. 로그인 할 때를 생각해보면 아무 칸도 클릭하지 않았을 경우에 id,password 둘 다 사용 중이지 않은 상태이다. 아이디 입력 부분을 마우스 클릭을 했을 때 아이디 칸에서 커서가 깜빡이는 이 상황에서는 id가 focus되있는 것이고 password는 blur 상태이다. 입력 중일 경우에는 :focus이며 아닌 경우는 :blur이다. 10개의 input이 있다면 focus는 최대 1개만 가능하다. focus가 되어있지 않은 input은 blur상태라고 보면 된다.

 input에 대한 group에 이름을 지정하는 방식이 legend라고 했는데 하나의 input에도 이름을 지정할 수 있다. label 태그를 사용하면 된다. label의 for 속성 값과 input의 id 속성 값을 일치시키면 된다. 예시 코드는 <label for="id1"></label> <input id="id1">이다. label을 추가하여 매칭시켜 두면 라벨을 클릭했을 때 해당 input에 :focus된다.  label 요소 안에 input을 쓰면 for를 생략해도 되는데 mdn 사이트에서 확인해보길 바란다. 

 

input태그 type의 종류

text: 텍스트 입력시 

password: 비밀번호 입력시

tel: 전화번호 입력. 

email: 이메일 입력시 사용하며 이메일 형식에 맞는지 확인해준다.

url: url 입력시 사용하며 형식 확인해줌

checkbox : 복수개의 항목을 체크할 수 있다.

radio: 동일한 name 속성 값에서는 한 개의 radio만 체크할 수 있다.

button 버튼 모양이 생성되며 type은 3가지다. button, submit, reset이다. button은 별다른 기능이 없다. submit은 해당 form의 입력된 정보를 전송한다. reset은 해당 form에 입력된 값들을 초기화한다.

file: 로컬에 있는 파일을 업로드시 사용

search: text처럼 생겼으나 검색할 문자를 쓰면 지우기 버튼으로 x를 사용할 수 있다.

textfield: display속성이 block이며 여러 줄의 텍스트를 칠 때 사용한다. resize 속성을 사용하면 박스의 크기를 변경할 수 있다.

 

input 값 중에 필수 정보는 required 속성을 사용하면 된다. required가 있는 input의 정보가 입력되어야만 submit 할 수 있다. 이외의 type도 있으니 상황에 따라 검색해서 사용하길 바란다. 

 

<select>태그 : 드롭다운 방식으로 선택할 수 있다. 여러 개의 옵션을 주어 선택권을 준다. form 태그와 같이 쓰면 선택된 옵션이 데이터 전송시 포함된다.

 

 

 *참고

form, fieldset, legend: default display: block